140 lines
6 KiB
HTML
140 lines
6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
|
|
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
|
|
<meta name="author" content="dnp_theme">
|
|
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
|
|
|
|
<title>KUTE.js | Performance Testing Page</title>
|
|
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body {background-color: #2e2e2e; color: #999; font-size: 12px; font-family: Helvetica, Arial, Helvetica, sans-serif;}
|
|
a {color:#ffd626; text-decoration: none}
|
|
a:hover,a:focus {color:#fff;}
|
|
#container {
|
|
width: 200px; /*height: 200px;*/
|
|
margin: 0 auto;
|
|
position: relative;
|
|
|
|
display: block;
|
|
}
|
|
|
|
.line {
|
|
width: 200px;
|
|
height: 2px;
|
|
position: absolute;
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
.box { height: 200px }
|
|
#info {position: absolute; top: 0; left: 0; width: 400px;}
|
|
.hack { transform: translate3d(0px,0px,0px); }
|
|
.padding {padding: 20px}
|
|
.btn-group { margin-bottom: 15px; }
|
|
.btn {font-size: 13px; }
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="info" class="padding">
|
|
<p><a class="back" href="index.html">Back to KUTE.js</a></p>
|
|
<p>Engine </p>
|
|
<span id="engine" class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a id="kute" href="#">KUTE</a></li>
|
|
<li><a id="gsap" href="#">GSAP</a></li>
|
|
<li><a id="tween" href="#">Tween.js</a></li>
|
|
</ul>
|
|
</span>
|
|
|
|
<p>Property </p>
|
|
<span id="property" class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a id="left" href="#">left</a></li>
|
|
<li><a id="translateX" href="#">translateX</a></li>
|
|
</ul>
|
|
</span>
|
|
|
|
|
|
<p>Repeat </p>
|
|
<span id="repeat" class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a id="5" href="#">5</a></li>
|
|
<li><a id="10" href="#">10</a></li>
|
|
<li><a id="15" href="#">15</a></li>
|
|
<li><a id="20" href="#">20</a></li>
|
|
</ul>
|
|
</span>
|
|
|
|
|
|
<p>How many elements to animate:</p>
|
|
<span id="count" class="btn-group">
|
|
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a id="100" href="#">100</a></li>
|
|
<li><a id="200" href="#">200</a></li>
|
|
<li><a id="300" href="#">300</a></li>
|
|
<li><a id="400" href="#">400</a></li>
|
|
<li><a id="500" href="#">500</a></li>
|
|
<li><a id="600" href="#">600</a></li>
|
|
<li><a id="700" href="#">700</a></li>
|
|
<li><a id="800" href="#">800</a></li>
|
|
<li><a id="900" href="#">900</a></li>
|
|
<li><a id="1000" href="#">1000</a></li>
|
|
</ul>
|
|
</span>
|
|
|
|
|
|
<div id="hack" style="display: none">
|
|
<p>When left is used, try the hack: </p>
|
|
<span class="btn-group" data-toggle="buttons">
|
|
<label class="btn btn-info">
|
|
<input type="checkbox" autocomplete="off"><span class="state">Hack OFF</span>
|
|
</label>
|
|
</span>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div style="width:100%;clear: both">
|
|
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
|
|
</div>
|
|
|
|
<!--[if IE]><p class="text-danger">The test page is not intended for legacy browsers.</p><![endif]-->
|
|
<!--[if !IE ]><!-->
|
|
<p>These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
|
|
<p>The hack refers to adding a blank transform <code>translate3d(0px,0px,0px);</code> for the elements to promote them into separate layers, as described <a href="https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas#promote-elements-that-move-or-fade" target="_blank">here</a>.</p>
|
|
<p class="text-danger">Do not try this test on lower end or mobile devices.</p>
|
|
<!--<![endif]-->
|
|
|
|
</div>
|
|
<div id="container"></div>
|
|
|
|
|
|
|
|
|
|
<!-- JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
|
|
|
|
<!--[if !IE ]><!-->
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.9/bootstrap-native.min.js"></script>
|
|
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
|
|
<script src="./assets/js/tween.min.js"></script>
|
|
<script src="./src/kute.js"></script>
|
|
<script src="./assets/js/perf.js"></script>
|
|
<!--<![endif]-->
|
|
</body>
|
|
</html>
|