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.js"></script>
  

You need to add the link to the Easy Reveal stylesheet in your head tag.

  <link rel="stylesheet" href="css/easy-reveal.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!

fade-in-up

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

fade-in-down

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

fade-in-left

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

fade-in-right

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

fade-in-rotate-x

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

fade-in-rotate-y

Eaque quibusdam, quae voluptate ab quaerat pariatur, consequuntur consequatur ad porro nihil aliquid amet voluptatibus. Eos quisquam, nobis magnam ullam debitis excepturi inventore nostrum incidunt, sequi culpa quam ipsum impedit.

Neque placeat eveniet vel recusandae inventore. Veritatis minima deleniti praesentium rem illo accusamus voluptatibus sit temporibus perferendis autem quibusdam, voluptate consequuntur non blanditiis tempora quis facilis, vel dolorem vero, earum.

Temporibus sed, reprehenderit dolorem commodi minus aperiam eos inventore qui nemo nesciunt possimus quod dicta facilis aliquid aut dolorum iusto necessitatibus ducimus eligendi expedita, unde sapiente adipisci. Enim, voluptatum nesciunt!

Totam adipisci, aperiam in perspiciatis explicabo ex! Omnis sit sunt corrupti facere dolores tenetur explicabo accusantium ad repudiandae iusto vero ex, velit, saepe neque excepturi quam non ipsa labore minus.

Beatae alias, hic eum provident inventore libero illo, fuga aut quae itaque, consectetur cupiditate veniam sunt similique! Officia sint magni cupiditate, debitis aut cum corrupti rem, eaque dolores fuga error.

Voluptatum ut cupiditate nemo voluptatem eum delectus unde perspiciatis similique, ipsam vel praesentium assumenda earum incidunt illo obcaecati eligendi deserunt in ad nam aperiam architecto quam? Vel quae at explicabo!

Tenetur rerum culpa eius, facere, unde earum consectetur voluptatibus odit perferendis rem illo labore vero aliquid tempore ut soluta quae iste debitis illum aut quis nulla numquam corporis! Tempore, ratione!

Ullam molestias non, dolorem nulla nesciunt est quia. Omnis error obcaecati sequi! Molestias hic maiores consectetur dolor, vero reprehenderit tempore delectus quis nostrum deserunt dolores perferendis. Ipsum aspernatur impedit exercitationem.

Non dolores, quas quo blanditiis nemo aliquid, tenetur accusantium doloribus at excepturi veritatis maxime maiores adipisci. Deleniti odio in, pariatur at labore repellat recusandae voluptates qui consequatur, nemo porro atque.