jQuery LVL99 Nice Screen transitions

Example of Nice Screen transitions for purposes of debugging transition animation rendering errors See: https://github.com/lvl99/jquery-lvl99-nicescreen/tree/develop

by lvl99

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/lvl99/jquery-lvl99-nicescreen/master/dist/jquery-lvl99-nicescreen.min.css">
<script src="https://cdn.rawgit.com/lvl99/jquery-lvl99-nicescreen/master/dist/jquery-lvl99-nicescreen.min.js"></script>
<nav id="screen-nav">
  <ul>
    <li>
      <a href="#screen-1">1</a><a href="#screen-2">2</a><br/><a href="#screen-3">3</a><a href="#screen-4">4</a>
    </li>
    <li><select id="screen-transition">
      <optgroup label="Transition type">
        <option value="topleft">Slide (top/left)</option>
        <option value="slide">Slide (translate)</option>
        <option value="3d">3D</option>
        <option value="card">Card</option>
      </optgroup>
    </select></li>
  </ul>
</nav>

<div id="viewport" class="ui-nicescreen-viewport" data-nicescreen-transition="topleft">
  <div id="screen-1" class="ui-nicescreen" data-nicescreen-row="0" data-nicescreen-column="0">
    <div class="screen-inner">
      Screen 1
    </div>
  </div>
  <div id="screen-2" class="ui-nicescreen" data-nicescreen-row="0" data-nicescreen-column="1">
    <div class="screen-inner">
      Screen 2
    </div>
  </div>
  <div id="screen-3" class="ui-nicescreen" data-nicescreen-row="1" data-nicescreen-column="0">
    <div class="screen-inner">
      Screen 3
    </div>
  </div>
  <div id="screen-4" class="ui-nicescreen" data-nicescreen-row="1" data-nicescreen-column="1">
    <div class="screen-inner">
      Screen 4
    </div>
  </div>
</div>

CSS

/* Example styles */
#screen-nav {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 99;
  text-align: right;
}

#screen-nav ul,
#screen-nav li {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

#screen-nav li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}

#screen-nav li select {
  margin: 5px 0;
}

#viewport {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#screen-1,
#screen-2,
#screen-3,
#screen-4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.screen-inner {
  padding: 20px;
}

#screen-1,
#screen-nav li a[href="#screen-1"] {
  background-color: #ccc;
  color: #333;
}

#screen-2,
#screen-nav li a[href="#screen-2"] {
  background-color: #999;
  color: #000;
}

#screen-3,
#screen-nav li a[href="#screen-3"] {
  background-color: #666;
  color: #fff;
}

#screen-4,
#screen-nav li a[href="#screen-4"] {
  background-color: #333;
  color: #ddd;
}

/* Top/left slide transition */
[data-nicescreen-transition="topleft"].ui-nicescreen-animation-enterfromleft,
[data-nicescreen-transition="topleft"] .ui-nicescreen-animation-enterfromleft {
  -webkit-animation-name: topleftenterfromleft;
          animation-name: topleftenterfromleft;
}
[data-nicescreen-transition="topleft"].ui-nicescreen-animation-enterfromright,
[data-nicescreen-transition="topleft"] .ui-nicescreen-animation-enterfromright {
  -webkit-animation-name: topleftenterfromright;
          animation-name: topleftenterfromright;
}
[data-nicescreen-transition="topleft"].ui-nicescreen-animation-enterfromtop,
[data-nicescreen-transition="topleft"] .ui-nicescreen-animation-enterfromtop {
  -webkit-animation-name: topleftenterfromtop;
          animation-name: topleftenterfromtop;
}
[data-nicescreen-transition="topleft"].ui-nicescreen-animation-enterfrombottom,
[data-nicescreen-transition="topleft"]...

JavaScript

jQuery(document).ready(function ($) {
	// Initialise NiceScreen
	$('.ui-nicescreen').nicescreen();
  
  // Change screen transition type
  $('#screen-transition').change( function (event) {
  	$('#viewport').attr('data-nicescreen-transition', $(this).val());
  });
});