Animated Scroll Effect With CSS3 Animations – ScrollFx.js

ScrollFx.js is a tiny JavaScript library that applies scroll-triggered reveal effects to elements using CSS3 animations.

How to use it:

1. Insert the ScrollFx.js script into the document and we’re ready to go.

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

2. Add the CSS class scroll-fx to the target element and define the scroll effect using the following data attributes:

• data-translate-x
• data-translate-y
• data-translate-z
• data-opacity
• data-skew-x
• data-skew-y
• data-scale
• data-rotate
• data-blur
• data-offset
• data-distance
• data-easing: easing function
• data-translate-unit: ‘%’,’vw’ or ‘vh’

<div class="scroll-fx" data-translate-x="-50" data-opacity="0.0" data-scale="0.0">Element</div>
<div class="scroll-fx" data-translate-y="200" data-scale="0.7">Element</div>
<div class="scroll-fx" data-rotate="360" data-distance=".400" data-offset="0">Element</div>
<div class="scroll-fx" data-translate-y="200" data-offset=".10" data-skew-y="10">Element</div>
...

3. Animate a group of elements in a sequence.

<div class="scroll-fx-stagger-container" data-stagger=".02" data-offset="0.1">
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Button</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Fade In</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Effect</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Even</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Staggering</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Possible</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Now</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">How</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Nice</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Button</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Cool</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Button</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Individual</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Button</button>
  <button class="scroll-fx" data-translate-y="100" data-opacity="0">Button</button>
</div>

4. Initialize the ScrollFx and done.

window.addEventListener('load', function() {
  var instance = new ScrollFx();
})

5. You can also define the scroll effects in the JavaScript as follows:

var instance = new ScrollFx({
    offset: .2,
    distance: .3,
    translateX: 0,
    translateY: 0,
    translateZ: 0,
    translateUnit: 'px',
    skewX: 0,
    skewY: 0,
    scale: 1,
    rotate: 0,
    opacity: 1,
    blur: 0,
    easing: 'ease-out',
});