2015-10-18 08:40:11 +02:00
<!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" >
2016-03-16 14:44:23 +01:00
< meta name = "description" content = "KUTE.js performance testing page, in comparison with GSAP and Tween.js" >
2015-10-18 08:40:11 +02:00
< 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" >
2016-03-16 14:44:23 +01:00
< 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;
}
iframe {width: 100%; height: 100%; border:0}
.line {
width: 200px;
height: 2px;
position: absolute;
}
2015-10-18 08:40:11 +02:00
.box { height: 200px }
#info {position: absolute; top: 0; left: 0; width: 400px;}
.padding {padding: 20px}
.btn-group { margin-bottom: 15px; }
.btn {font-size: 13px; }
2016-03-16 14:44:23 +01:00
.text-danger {font-weight: bold}
< / style >
<!-- Polyfill -->
< script src = "./assets/js/minifill.js" > < / script >
2015-10-18 08:40:11 +02:00
< / 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 >
2016-03-16 14:44:23 +01:00
<!-- <li><a id="1500" href="#">1500</a></li>
< li > < a id = "2000" href = "#" > 2000< / a > < / li > -->
2015-10-18 08:40:11 +02:00
< / ul >
< / span >
< hr >
< div style = "width:100%;clear: both" >
< button class = "btn btn-success" id = "start" type = "button" style = "margin-bottom: 15px" > Start< / button >
< / div >
2015-10-26 11:04:54 +01:00
<!-- [if IE]><p class="text - danger">The test page is not intended for legacy browsers.</p><![endif] -->
<!-- [if !IE ]><! -->
2015-10-18 08:40:11 +02:00
< 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 class = "text-danger" > Do not try this test on lower end or mobile devices.< / p >
2015-10-26 11:04:54 +01:00
<!-- <![endif] -->
2015-10-18 08:40:11 +02:00
< / div >
2016-03-16 14:44:23 +01:00
2015-10-18 08:40:11 +02:00
< 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 -->
2015-10-26 11:04:54 +01:00
<!-- [if !IE ]><! -->
2016-03-16 14:44:23 +01:00
< script type = "text/javascript" src = "https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js" > < / script >
2015-10-26 11:04:54 +01:00
2016-03-16 14:44:23 +01:00
< script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js" > < / script >
2015-10-26 11:04:54 +01:00
< script src = "./assets/js/tween.min.js" > < / script >
< script src = "./src/kute.js" > < / script >
< script src = "./assets/js/perf.js" > < / script >
<!-- <![endif] -->
2015-10-18 08:40:11 +02:00
< / body >
< / html >