Minimal Fade/Slide Scroll Animations In JavaScript & CSS3 – Scroll-Animation

Category: Animation , Javascript | March 5, 2020
Author:pandemuliada
Views Total:289 views
Official Page:Go to website
Last Update:March 5, 2020
License:MIT

Preview:

Minimal Fade/Slide Scroll Animations In JavaScript & CSS3 – Scroll-Animation

Description:

A dead simple and ultra-light (<1kb) scroll animation library built with CSS3, HTML data attributes, and JavaScript IntersectionObserver API.

How to use it:

1. Add references to scroll-animation.css and scroll-animation.js as follows:

<link rel="stylesheet" href="./scroll-animation.css" />
<script src="./scroll-animation.js"></script>

2. Apply scroll animations to elements using the data-san attribute. All possible animations:

  • Fade
  • Slide Top
  • Slide Right
  • Slide Left
<div class="box" data-san="slideRight"></div>
<div class="box" data-san="fade"></div>
<div class="box" data-san="slideLeft"></div>
<div class="box" data-san="slideTop"></div>

3. Determine the time to wait before animating the element.

<div class="box" data-san="slideRight" data-san-delay="400"></div>
<div class="box" data-san="fade" data-san-delay="200"></div>
<div class="box" data-san="slideLeft" data-san-delay="600"></div>

You Might Be Interested In:


Leave a Reply