5b61b7a1fe
* fixed minor issue with `borderRadius` on legacy browsers * removed CSS properties from SVG plugin (forgot in previous commit) * simplified core box model properties and CSS transform tween objects to always use `px` or `deg` as unit, with converted values * implemented the `crossCheck` function for SVG transforms (for stacking transform chains) and the SVG morph * simplified the `coords` interpolation used for SVG morph * general code cleanup * simplified the `processEasing` since the additional easing plugins have been removed, the old version can be found in the js file for easing examples page * doc updates
233 lines
13 KiB
HTML
233 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
|
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
|
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
|
|
|
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
|
|
|
|
<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="The CSS Plugin for KUTE.js extends the core engine with additional box model properties, color properties, border-radius, text properties and others.">
|
|
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css,css3,border-radius,border-color,clip,background-position,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 CSS Plugin | Javascript Animation Engine</title>
|
|
|
|
<!-- RESET CSS -->
|
|
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
|
|
|
<!-- DEMO KUTE CSS -->
|
|
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
|
|
|
<!-- Ion Icons -->
|
|
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
|
|
|
<!-- Synthax highlighter -->
|
|
<link href="./assets/css/prism.css" rel="stylesheet">
|
|
|
|
<!-- Polyfill -->
|
|
<script src="./assets/js/minifill.js"> </script>
|
|
|
|
<!-- legacy browsers support via polyfill
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
|
<!--[if IE]>
|
|
<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>
|
|
|
|
<body>
|
|
<div class="fill overlay"></div>
|
|
|
|
<div class="site-wrapper">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="content-wrap">
|
|
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
|
<ul class="nav">
|
|
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="features.html">Feature Overview</a></li>
|
|
<li><a href="properties.html">Supported Properties</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group active">
|
|
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="examples.html">Core Engine</a></li>
|
|
<li class="active"><a href="css.html">CSS Plugin </a></li>
|
|
<li><a href="svg.html">SVG Plugin </a></li>
|
|
<li><a href="text.html">Text Plugin </a></li>
|
|
<li><a href="attr.html">Attributes Plugin </a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group">
|
|
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="start.html">Getting Started</a></li>
|
|
<li><a href="api.html">Public Methods</a></li>
|
|
<li><a href="options.html">Tween Options</a></li>
|
|
<li><a href="easing.html">Easing Functions</a></li>
|
|
<li><a href="extend.html">Extend Guide</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="about.html">About</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
<h2>CSS Plugin</h2>
|
|
<p>The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the <a href="examples.html">examples page</a>. The focus is on box model properties like <code>padding</code>, <code>margin</code> or <code>borderWidth</code>, as well as other types of properties like <code>borderRadius</code>, <code>borderColor</code>, <code>backgroundPosition</code>, <code>borderColor</code> or <code>clip</code>.</p>
|
|
|
|
|
|
<h3>Border Radius</h3>
|
|
<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports <code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
|
|
<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
|
|
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
|
|
KUTE.to('selector3',{borderTopRightRadius:'100%'}).start();
|
|
KUTE.to('selector4',{borderBottomLeftRadius:'100%'}).start();
|
|
KUTE.to('selector5',{borderBottomRightRadius:'100%'}).start();
|
|
</code></pre>
|
|
|
|
<p>And here is how it looks like:</p>
|
|
|
|
<div class="featurettes">
|
|
<div id="allRadius" class="example-item example-box bg-red">ALL</div>
|
|
<div id="tlRadius" class="example-item example-box bg-pink">TL</div>
|
|
<div id="trRadius" class="example-item example-box bg-olive">TR</div>
|
|
<div id="blRadius" class="example-item example-box bg-indigo">BL</div>
|
|
<div id="brRadius" class="example-item example-box bg-blue">BR</div>
|
|
|
|
<div class="example-buttons">
|
|
<a id="radiusBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated with later versions. Download this example <a href='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>
|
|
|
|
<h3>Box Model Properties</h3>
|
|
<p>The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as <code>outlineWidth</code>, <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
|
|
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{marginTop:200});
|
|
var tween2 = KUTE.to('selector1',{marginBottom:50});
|
|
var tween3 = KUTE.to('selector1',{padding:30});
|
|
var tween4 = KUTE.to('selector1',{margin:'5%'});
|
|
</code></pre>
|
|
<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
|
|
<div id="boxModel" class="featurettes">
|
|
<div class="example-box example-box-model bg-lime" style="padding: 0; font-size:26px; line-height: 70px;">BOX<br> MODEL </div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-orange" href="#">Start</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
|
|
|
|
<h3>Text Properties</h3>
|
|
<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
|
|
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{fontSize:'200%'});
|
|
var tween2 = KUTE.to('selector1',{lineHeight:24});
|
|
var tween3 = KUTE.to('selector1',{letterSpacing:50});
|
|
var tween3 = KUTE.to('selector1',{wordSpacing:50});
|
|
</code></pre>
|
|
<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>
|
|
|
|
<div id="textProperties" class="featurettes" style="height: 152px">
|
|
<h1 class="example-item">Howdy!</h1>
|
|
<a href="javascript:void(0)" class="example-item btn btn-red">Button</a>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>TIP: this should also work in IE8 as a fallback for scale animation for text. It's not perfect, can be improved for sure, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
|
|
|
|
<h3>Color Properties</h3>
|
|
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>
|
|
<pre><code class="language-javascript">KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
|
|
KUTE.to('selector1',{borderTopColor:'#069'}).start();
|
|
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
|
|
KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
|
|
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
|
|
KUTE.to('selector1',{outlineColor:'#069'}).start();
|
|
</code></pre>
|
|
<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>
|
|
|
|
<div id="colBox" class="featurettes">
|
|
<div class="example-item example-box bg-olive" style="outline: #eee solid 5px; width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-blue" href="#">Start</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
|
|
|
|
<h3>Clip Property</h3>
|
|
<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks an element making parts of it invisible.</p>
|
|
<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
|
|
<p>A quick example here could look like this:</p>
|
|
|
|
<div id="clip" class="featurettes" style="min-height: 190px">
|
|
<div class="example-item example-box bg-red" style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-olive" href="#">Start</a>
|
|
</div>
|
|
</div>
|
|
<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <a href='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>
|
|
|
|
<h3>Background Position</h3>
|
|
<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
|
|
<pre><code class="language-javascript">KUTE.to('selector1',{backgroundPosition:[0,50]}).start();</code></pre>
|
|
<p>A working example would look like this:</p>
|
|
|
|
<div id="bgPos" class="featurettes">
|
|
<div class="example-item example-box" style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
|
|
|
|
<div class="example-buttons">
|
|
<a class="btn btn-lime" href="#">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>Download this example <a href='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
|
|
|
|
</div>
|
|
|
|
<ul id="share" class="nav">
|
|
<li>Share </li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
|
</ul>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="content-wrap">
|
|
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
|
<p>© 2007 - 2016 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div><!-- /.site-wrapper -->
|
|
|
|
|
|
|
|
<!-- JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
<!-- highlighter -->
|
|
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
|
|
|
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
|
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
|
|
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
|
|
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
|
|
<script src="./assets/js/css.js"></script> <!-- css plugin examples -->
|
|
</body>
|
|
</html> |