deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Browse source
This commit is contained in:
thednp 2015-10-26 12:04:54 +02:00
parent 74f35db07c
commit af58612491
8 changed files with 891 additions and 901 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
about.html
View file

@ -24,8 +24,7 @@
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
</head>
<body>

29
api.html
View file

@ -31,7 +31,7 @@
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="./assets/js/minifill.js"> </script>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
@ -77,30 +77,9 @@ $ bower install --save kute.js
</code></pre>
<p>Your awesome animation coding would follow after these script links.</p>
<h3>Ideal HTML Template</h3>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers can actually do. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing we can actually do is use the Microsoft's synthax for it's own legacy browsers, so here's how a very basic <code>HTML</code> template for your websites would look like:</p>
<pre><code class="language-markup">&lt;!DOCTYPE html&gt;
&lt;!--[if lt IE 8]&gt;&lt;html class="ie prehistory" lang="en"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 8]&gt;&lt;html class="ie ie8" lang="en"&gt;&lt;![endif]--&gt;
&lt;!--[if IE 9]&gt;&lt;html class="ie ie9" lang="en"&gt;&lt;![endif]--&gt;
&lt;!--[if !IE]&gt;&lt;!--&gt; &lt;html lang="en"&gt; &lt;!--&lt;![endif]--&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;!-- SEO meta here --&gt;
&lt;!-- add your CSS here --&gt;
&lt;!-- add polyfills --&gt;
&lt;script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"&gt; &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- site content here --&gt;
&lt;!-- scripts go here --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
<h3>Targeting Legacy Browsers</h3>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and <a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
</div>
<div class="content-wrap">

9
assets/js/examples.js
View file

@ -1,7 +1,8 @@
// some regular checking
var isIE = /ie/.test(document.documentElement.className),
isIE8 = /ie8/.test(document.documentElement.className),
isIE9 = /ie9/.test(document.documentElement.className);
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
isIE8 = isIE === 8,
isIE9 = isIE === 9;
/* TRANSFORMS EXAMPLES */
@ -287,7 +288,7 @@ var element = document.getElementById("myElement");
var startValues = {}, endValues = {}, options = {};
// here we define properties that are commonly supported
startValues.opacity = 1; endValues.opacity = 0.5;
startValues.opacity = 1; endValues.opacity = 0.1;
startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71';
// here we define the properties according to the target browsers

16
examples.html
View file

@ -31,7 +31,7 @@
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="./assets/js/minifill.js"> </script>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
@ -332,15 +332,17 @@ KUTE.to('window',{scroll:450}).start(); // for the window
<h2 id="crossbrowser">Cross Browser Animation Example</h2>
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, first check your HTML template to have the browser detection for IE8-IE9, then check to have the polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>. In some cases you may not have access to the <code>HTML</code> tag, <a href="https://github.com/thednp/kute.js/issues/8#issuecomment-151037342" target="_blank">here's a work around</a>. Now we are ready:</li>
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>. Now we are ready:</li>
</ul>
<h3>Collect Information And Cache It</h3>
<pre><code class="language-javascript">// grab an HTML element to build a tween object for it
var element = document.getElementById("myElement");
// check for IE legacy browsers
var isIE8 = /ie8/.test(document.documentElement.className);
var isIE9 = /ie9/.test(document.documentElement.className);
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false;
var isIE8 = isIE === 8;
var isIE9 = isIE === 9;
// most browsers have specific checks, so make sure
// you include all you need for your target audience
@ -354,7 +356,7 @@ var options = {};
// here we define properties that are commonly supported
startValues.opacity = 1;
endValues.opacity = 0.5;
endValues.opacity = 0.2;
startValues.backgroundColor = '#CDDC39';
endValues.backgroundColor = '#ec1e71';
@ -383,7 +385,9 @@ if (isIE8) { // or any other browser that doesn"t support transforms
// common tween options
options.easing = "easingCubicOut";
options.duration = 2500;
options.duration = 2500;
options.yoyo = true;
options.repeat = 1;
</code></pre>
<h3>Build Tween Object And Tween Controls</h3>

6
features.html
View file

@ -3,7 +3,7 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 9 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if !IE ]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
@ -28,7 +28,7 @@
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="./assets/js/minifill.js"> </script>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
@ -69,7 +69,7 @@
<div class="content-wrap">
<h2 id="compatibiity">Browser Compatibility</h2>
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance legacy browsers may support <a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and <a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 and it really works with the help of <a href="https://polyfill.io/" target="_blank">polyfills</a> and an appropriate <code>HTML</code> template. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS <code>transition</code>.</p>
<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 and it really works with the help of <a href="https://polyfill.io/" target="_blank">polyfills</a> and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS <code>transition</code>.</p>
<p>Speaking of polyfills, KUTE.js requires <code>window.requestAnimationFrame()</code> for the main thread, <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll. Unlike other developers I didn't include these polyfills in the code to keep it clean, so that YOU decide whether your project need them or not. Also know that when using the recommended <a href="https://polyfill.io/"target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed. The provided <strong>ideal HTML template</strong> is the best solution for targeting Microsoft's legacy browsers.</p>
<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
</div>

2
index.html
View file

@ -28,7 +28,7 @@
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="./assets/js/minifill.js"> </script>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

17
performance.html
View file

@ -108,11 +108,14 @@
<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>
@ -123,10 +126,14 @@
================================================== -->
<!-- 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> <!-- Tween local -->
<script src="./src/kute.js"></script> <!-- KUTE local -->
<script src="./assets/js/perf.js"></script> <!-- some stuff -->
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute.js"></script>
<script src="./assets/js/perf.js"></script>
<!--<![endif]-->
</body>
</html>

1710
src/kute.js
View file

File diff suppressed because it is too large Load diff