Animations engine documentation
<link rel="stylesheet" href='../../HTWF/css/animations.css'>
<a class="img-box thumbnail" data-anima="fade-left" data-trigger="hover">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
<a class="img-box thumbnail" data-anima="fade-left" data-trigger="hover">
<span>
<img class="anima" src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
<a class="img-box thumbnail" id="anima-demo">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
<button class="btn" type="button" data-anima="fade-top" data-trigger="click" data-target="#anima-demo">
Start animation
</button>
<a class="img-box thumbnail" onmouseover="$(this).showAnima('pulse-horizontal');">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
<a class="img-box thumbnail" data-anima="pulse-vertical" data-trigger="hover" data-time="5000">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HTML initialization | Data attribute |
Add data attribute data-anima="animation-name"to target object. Default trigger is on scroll.
|
||||||||||||
| Javascript initialization | Javascript |
To animate a element use function $("#target").showAnima("animation-name");.Use $("#target").showAnima("animation-name","complete"); to start a full animation process like default animations,
it support all features like attribute data-anima and childrens animations.
|
||||||||||||
| Inner animation target | CSS class |
Animate a element inside a parent element, parent element is the trigger area of the animation. Useful expecially for on hover animations.
To create inner animations simple add class anima to inner element.To set different inner animations add class anima-animation-name to inner element. Example: <div class="anima anima-fade-left"></div>.
|
||||||||||||
| Outer animation target | CSS class |
Animate a element outside a trigger element, trigger element is the trigger of the animation. Useful expecially for on hover and on click animations.
To create outer animations add data-attribute data-target="#target". You can obtain same result with Javascript initialization.
|
||||||||||||
| HTML settings | Data attribute |
Animations settings are five: data-anima, data-trigger, data-time, data-anima-out, data-timeline.
|
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Animation types | Data attribute |
Built-in animations are 17:
|
||||||||||||||||||||||||||||||||||||||
| Default animation | Javascript |
You can set default animation by edit file ../../HTWF/scripts/script.js, edit code var default_anima = "fade-in"; and replace fade-in with animation name you want.
After this step you can use the default animation like others animations with keyword default. Example: data-anima="default".
|
||||||||||||||||||||||||||||||||||||||
| Add custom animation | CSS coding |
You can add your custom animations very quickly. Open CSS file ../../HTWF/css/animations.css go to bottom (or where you want)
and add your class animation with this sintax belove:
@keyframes your-animation-name { /* This is your aniamtion */
0% { transform: scale(1); } /* Start of animation */
100% { transform: scale(1.2); } /* Finish of animation */
}
.your-animation-name,.img-box.your-animation-name:hover img {
/* Set time you want, attribute date-time will overwrite this time */
animation: your-animation-name 1s;
/* Here insert same animation of @keyframes 100% */
transform: scale(1.2);
/* Opacity:1 !important must be always inserted */
opacity:1 !important;
}
Now you can use your animation exactly like all others built-in animations. Example: data-anima="your-animation-name".
|
| Name | Type | Description | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Trigger types | Data attribute |
Trigger types are four:
|
<div data-anima="fade-bottom">
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
</div>
<div data-anima="fade-bottom" data-timeline="asc">
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="http://www.framework-y.com/images/thumb-wide.png">
</span>
</a>
</div>
</div>
<div data-anima="fade-bottom" data-timeline="asc" data-time="3000">
<div class="col-md-3">
<a class="img-box thumbnail anima anima-show-scale">
<span>
<img src="../../images/animation-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima anima-fade-right">
<span>
<img src="../../images/animation-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima anima-pulse">
<span>
<img src="../../images/animation-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-3">
<a class="img-box thumbnail anima">
<span>
<img src="../../images/animation-thumb.jpg">
</span>
</a>
</div>
</div>
| Name | Type | Description |
|---|---|---|
| Animations group | Mixed |
Animations groups animate multiple elements at same time. You can create animations groups
with the inner animation target feature:
create a container element and add data-attribute data-anima="animation-name", insert into this
container the elements to animate and assign them the CSS class anima.
|
| Animations timeline group | Mixed |
Animations timeline groups animate multiple elements in sequence. To create a animations timeline group create
a normal animations group like above and add to container the data-attribute data-timeline="asc".
You can set two data-timeline values: data-timeline="asc" and data-timeline="desc".
|
| Timeline time | Mixed |
To set the interval between each item of the timeline add attribute data-timeline-time="123".
Replace 123 with delay time in milliseconds.
|
| Name | Type | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Graphics animation types | Data attribute |
Graphics animations are exactly like normal animations but its contain also some graphic element. Built-in graphics animations are three:
|