Click to Begin Presentation – Ani.JS – The Menu Code
Click to Begin Presentation – Ani.JS – The Menu Code
0 0
Ani.JS-Presentation
A review of Ani.JS for the Full Sail WIA class.On Github ssmith-wombatweb / Ani.JS-Presentation
Click to Begin Presentation
Ani.JS
An JavaScript/CSS3 Animation Library Using Custom HTML Attributes
What is Ani.JS
Ani.JS is an animation library that uses HTML attribute tags to animate web pages. The previous slide used the code below to create the animations using Ani.JS:
<h1 class="clickEnter active" data-anijs="if: click, do: flipOutX animated active, after: removeAnim">Click to Begin Presentation</h1>
<h1 class="bounceIn animated" data-anijs="if: animationend, on: h1.clickEnter, do: $addClass active"> Ani.JS</h1>
<h4 class="slideInUp animated" data-anijs="if: animationend, on: h1.clickEnter, do: $addClass active">
An JavaScript/CSS3 Animation Library Using Custom HTML Attributes
</h4>
Examining the Code
Let's examine a portion of the code.
The rest of the code is basic markup to style the element. The portion that is important to the animation is the following.
data-anijs = "if: click, do: flipOutX animated active, after: removeAnim"
The "data-anijs" Attribute
The information about the animation should be stored in this attribute on any HTML tag. Within here you store the object that gets passed to Ani.JS
The "if" Key
This makes the animation fire on a click event. Other events can be use. More events can be found at the Mozilla Developer Network.
The "do" Key
This is where you insert the animations you wish to run once the event happens. This essentially adds classes and animates the changes in those clases.
The "after" Key
The after key is where you store functions that you wish to happen after the animation is complete. The removeAnim removes the classes added above. This is not typically necessary but I wanted to removed the active class which was in the HTML code.
An Animated Menu
-
Menu
- Home
- Portfolio
- About Us
- Contact Us
The Menu Code
<nav data-anijs="if: mouseleave, on: .menuSample nav > ul > li, do: hinge animated visible, to: .menuSample ul li ul li, after: removeAnim">
<ul><li><span>Menu</span><ul>
<li class="first" data-anijs="if: mouseenter, on: .menuSample nav > ul > li, do:bounceInUp animated visible, to: .menuSample ul li ul li.first">Home</li>
<li class="second" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.first, do:zoomInDown animated visible, to: .menuSample ul li ul li.second">Portfolio</li>
<li class="third" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.second, do:slideInRight animated visible, to: .menuSample ul li ul li.third">About Us</li>
<li class="fourth" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.third, do:flipInX animated visible, to: .menuSample ul li ul li.fourth">Contact Us</li>
</ul></li></ul></nav>
Beginning the Animation
<li class="first" data-anijs="if: mouseenter,on: .menuSample nav > ul > li, do: bounceInUp animated visible, to: .menuSample ul li ul li.first">Home</li>
The animation is trigger by a mouseenter.
The element that is being watched for a mouse enter is the immediate li child of our main ul element. This can be left out if the element you are watching is the element that contains this data-anijs attribute.
Then you would specify the animation, or rather classes you wish to add, and then Ani.JS adds those classes and animates if indicated by those classes.
Finally the element that is getting the classes added is specified. This can be left out if the element you are animating is the element that contains this data-anijs attribute. This sets up the first animation on the first menu item.
<li class="second" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.first, do:zoomInDown animated visible, to: .menuSample ul li ul li.second">Portfolio</li>
<li class="third" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.second, do:slideInRight animated visible, to: .menuSample ul li ul li.third">About Us</li>
<li class="fourth" data-anijs="if: animationend, on: .menuSample nav > ul > li > ul > li.third, do:flipInX animated visible, to: .menuSample ul li ul li.fourth">Contact Us</li>
We also have the animations on the next three menu items. These fire on the animation end of the previous items.
And Much More...
This is the basic of Ani.JS. There is much more like the before: and after: keys which are used to trigger events before and after. You can also create your own custom animations and add them to Ani.JS's library.