✨ Easy Reveal
How to use
You need to include jQuery and the Easy Reveal script at the end of your body tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="js/jquery.easy-reveal.min.js"></script>You need to add the link to the Easy Reveal stylesheet in your head tag.
<link rel="stylesheet" href="css/easy-reveal.min.css">Add the data attribute easy-reveal to the element you want to animate with the value of the wanted animation.
<h1 data-easy-reveal="fade-in-up">Yeah! i'm Animated on scroll</h1>And Voila!
You can check the demo page here
Animations
Here is the list of available animations
| animations | description |
|---|---|
| fade-in-up | default value, the element fade in and slides up 10px |
| fade-in-down | the element fade in and slides down 10px |
| fade-in-left | the element fade in and slides left 10px |
| fade-in-right | the element fade in and slides right 10px |
| fade-in-rotate-x | the element fade in and rotates on x axis |
| fade-in-rotate-y | the element fade in and rotates on y axis |
Customisation
You can edit the offset percentage of the page that will fire the animation. To do so go to the jquery.easy-reveal.js file and edit the variable (it has to be an integer). The default value is 30%
/* PARAMETERS */ var offset = 50; //int in %
