Animate On Scroll Using CSS @keyframes – Scrollerful.js

Category: Animation , Javascript | January 18, 2023
Author:remino
Views Total:51 views
Official Page:Go to website
Last Update:January 18, 2023
License:MIT

Preview:

Animate On Scroll Using CSS @keyframes – Scrollerful.js

Description:

Scrollerful.js is a lightweight AOS (animate on scroll) JavaScript library for animating elements on scroll using CSS keyframes and variables.

How to use it:

1. Download and import the Scrollerful.js library.

<script src="dist/scrollerful.js"></script>

2. The required HTML structure.

<div class="scrollerful scrollerful--snap">
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 1</p>
    </div>
  </div>
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 2</p>
    </div>
  </div>
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 3</p>
    </div>
  </div>
  ...
</div>

3. Animate the elements using CSS.

@keyframes element-1 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
@keyframes element-2 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
@keyframes element-3 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
.scrollerful__tray:nth-child(1) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-1;
}
.scrollerful__tray:nth-child(2) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-2;
}
.scrollerful__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-3;
}

Changelog:

v0.4.6 (01/18/2023)

  • Update

v0.4.5 (01/16/2023)

  • Add variables and animation on scrolls

You Might Be Interested In:


Leave a Reply