Animations
animate.css
One of the plugins we have included inside Raleway is animate.css, an awesome cross-browser animation plugin that is extremely easy to use. And also offers around 50 animations you can play with on any element.
To add an animation to an element (anything) simply add the class .animationName-animated all classes are listed below, for example: <h4 class="fadeInLeft-animated">Example</h4>
Check out the usage page for more features and the cheatsheet to see all of available animations in action:
The animations available are listed below, just make sure to add -animated after the animation name.
bounce flash pulse rubberBand shake swing tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flip flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight slideInUp slideInDown slideInLeft slideInRight slideOutUp slideOutDown slideOutLeft slideOutRight zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp hinge rollIn rollOut
scrollReveal.js
Another animation plugin which we include in Raleway is scrollReveal.js, which is used for a simple way to create and maintain how elements fade in, triggered when they enter the viewport. It is also extremely easy to use, everything is done just inside the HTML markup like animate.css awesome right!
By adding a data-sr attribute to an element, it will automatically be revealed (using default values) as soon as the element is within the viewport:
<!-- Reveal using defaults. --> <div data-sr>Hello world!</div>
But wait! It’s more fun if you define your own reveal animation parameters, which you can do using using natural, declarative language:
<!-- Reveal using custom parameters. --> <div data-sr="enter left and move 50px over 1.33s"> Foo </div> <div data-sr="enter from the bottom after 1s"> Bar </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Baz </div>
These plugins are used all over the "Pages" of this template, browse around there, you will see some awesome animations in action. Or check out the preview pages linked above :)