Instantly Beautify Your Website Using Animate.css And ScrollReveal
Add These Light CSS and JS Libraries to Your Website To Make it More Flashy Using Just Classes
--
Whether it’s your personal or company website, you can make use of the following libraries very easily to right away add some flashiness either generically to your pages or especially to call-to-action elements.
Frameworks have come a long way since the time when marquee was the fanciest 🙂.
Animations.css
This CSS library is super easy to use and makes it straightforward to add animations with just CSS classes. The animations can be on a loop or just happen one time, and they are extremely versatile, to the point you could build an entire interactive presentation!
We need to be careful not to add animations just for the sake of adding animations, but instead thoughtfully make use of them to divert attention in a smooth way to points of interest. For example, I used them for social icons on my website.
Example
You can see the example live in action on my website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<h1 class="animate__animated animate__pulse animate__infinite">Title</h1>ScrollReveal
This JS library allows you to easily add intro fade-in animations to your page, in bulk, which artificially adds dynamism to pages. Similarly to animations.css, you can make it so it’s all linked to CSS classes and make it happen on product list pages or articles on a blog.
Example
You can see the example live in action on my website.
<script src="https://unpkg.com/scrollreveal"></script>
ScrollReveal().reveal('.card', { reset: true });