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" >
2016-11-30 17:12:11 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1.0" >
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" >
2017-01-23 14:55:10 +01:00
< link rel = "shortcut icon" href = "./assets/img/favicon.png" >
<!-- TO DO -->
2015-10-18 08:40:11 +02:00
< title > KUTE.js | Performance Testing Page< / title >
2017-01-23 14:55:10 +01:00
< 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 >
2017-01-23 14:55:10 +01:00
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;
}
2016-03-16 14:44:23 +01:00
#container {
2017-01-23 14:55:10 +01:00
width: 200px;
/*height: 200px;*/
2016-03-16 14:44:23 +01:00
margin: 0 auto;
position: relative;
display: block;
}
2017-01-23 14:55:10 +01:00
iframe {
width: 100%;
height: 100%;
border: 0
}
2016-03-16 14:44:23 +01:00
.line {
width: 200px;
height: 2px;
position: absolute;
}
2017-01-23 14:55:10 +01:00
.box {
height: 200px
}
#info {
position: absolute;
top: 0;
left: 0;
width: 350px;
}
.padding {
padding: 20px
}
.btn-group {
margin-bottom: 15px;
}
.btn {
font-size: 13px;
}
.text-note {
color: #069
}
.text-danger {
font-weight: bold
}
2016-03-16 14:44:23 +01:00
< / style >
<!-- Polyfill -->
2017-01-23 14:55:10 +01:00
< script src = "./assets/js/minifill.js" >
< / script >
2015-10-18 08:40:11 +02:00
< / head >
< body >
2017-01-23 14:55:10 +01:00
< div id = "info" class = "padding" >
< p > < a class = "back" href = "index.html" > Back to KUTE.js< / a > < / p >
< p > Engine < / p >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
< p > Property < / p >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< li > < a id = "left" href = "#" > left< / a > < / li >
< li > < a id = "translateX" href = "#" > translateX< / a > < / li >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
< p > Repeat < / p >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< ul class = "dropdown-menu" role = "menu" >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
< p > How many elements to animate:< / p >
2015-10-18 08:40:11 +02:00
< 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 >
2017-01-23 14:55:10 +01:00
< 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 = "#" > < span style = "color: red" > 1000< / span > < / a > < / li >
< li > < a id = "1500" href = "#" > < span style = "color: red" > 1500< / span > < / a > < / li >
< li > < a id = "2000" href = "#" > < span style = "color: red" > 2000< / span > < / a > < / li >
< / ul >
2015-10-18 08:40:11 +02:00
< / span >
2017-01-23 14:55:10 +01:00
2015-10-18 08:40:11 +02:00
< hr >
2017-01-23 14:55:10 +01:00
2015-10-18 08:40:11 +02:00
< div style = "width:100%;clear: both" >
2017-01-23 14:55:10 +01:00
< button class = "btn btn-success" id = "start" type = "button" style = "margin-bottom: 15px" > Start< / button >
2015-10-18 08:40:11 +02:00
< / div >
2015-10-26 11:04:54 +01:00
2017-01-23 14:55:10 +01:00
<!-- [if IE]><p class="text - danger">The test page is not intended for Internet Explorer or legacy browsers.</p><![endif] -->
<!-- [if !IE ]><! -->
< p > These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera 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-note" > Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.< / p >
<!-- <![endif] -->
< / div >
2016-03-16 14:44:23 +01:00
2017-01-23 14:55:10 +01:00
< div id = "container" > < / div >
2015-10-18 08:40:11 +02:00
2017-01-23 14:55:10 +01:00
<!-- JavaScript
2015-10-18 08:40:11 +02:00
================================================== -->
2017-01-23 14:55:10 +01:00
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!-- [if !IE ]><! -->
< script type = "text/javascript" src = "https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js" > < / script >
< script src = "http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js" > < / script >
< script src = "./assets/js/tween.min.js" > < / script >
< script src = "./src/kute.min.js" > < / script >
<!-- <script src="./../kute.js"></script> -->
< script src = "./assets/js/perf.js" > < / script >
<!-- <![endif] -->
2015-10-18 08:40:11 +02:00
< / body >
2017-01-23 14:55:10 +01:00
2015-10-18 08:40:11 +02:00
< / html >