Animate On Scroll Using CSS @keyframes – Scrollerful.js

Category: Animation , Javascript | April 14, 2024
Author:remino
Views Total:26 views
Official Page:Go to website
Last Update:April 14, 2024
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="sclf sclf--snap">
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__sprite">Element 1</p>
    </div>
  </div>
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__sprite">Element 2</p>
    </div>
  </div>
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__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 {
    /* ... */
  }
}
.sclf__tray:nth-child(1) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-1;
}
.sclf__tray:nth-child(2) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-2;
}
.sclf__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-3;
}

Changelog:

v1.0.0 (04/14/2023)

  • The scrollerful prefix has been shortened to sclf. This affects CSS class names, JavaScript functions and events. See below for a list.
  • The top element wrapping all containers is no longer needed.
  • Nomenclature of inner and outer sprites has been changed to contain and cover, respectively, matching upcoming CSS standards.
  • Event names have been changed to match the new prefix and have colons in them.
  • Addition of rudimentary animation-timeline support.

v0.6.4 (04/09/2023)

  • Update

v0.5.1 (02/05/2023)

  • Remove console.log() call

v0.5.0 (02/01/2023)

  • Fix variable name in scrollerful.sass

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