Rotate/Scale/Translate/Fade In Elements On Scroll - jQuery scrollMe

File Size: 9.1 KB
Views Total: 5859
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Rotate/Scale/Translate/Fade In Elements On Scroll - jQuery scrollMe

scrollMe is a jQuery plugin for creating animations on scroll. The plugin enables you to rotate, scale, translate, and fade in any DOM element when scrolling down or up the webpage.

Heavily based on CSS3 animation properties. Highly customizable and fully configurable via HTML data attributes.

How to use it:

1. Insert the JavaScript file jquery.scrollme.js after jQuery library and you're ready to go.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.scrollme.js"></script>

2. Add the animateme class to the element you want to animate on scroll.

<div class="animateme">
  Element To Animate
</div>

3. Wrap the element into a container with the class of scrollme.

<div class="scrollme">
  <div class="animateme">
    Element To Animate
  </div>
</div>

4. Apply scroll-triggred animations to the element using the following data attributes:

  • data-when: When to trigger the animation: "enter", "exit" or "span"
  • data-from: The boundary the animation starts.
  • data-to: The boundary the animation ends.
  • data-opacity: Fade in effect. 0-1.
  • data-translatex: TranslateX effect.
  • data-translateY: TranslateY effect.
  • data-translatez: TranslateZ effect.
  • data-scale: Scale effect.
  • data-scalex: ScaleX effect.
  • data-scaley: ScaleY effect.
  • data-scalez: ScaleZ effect.
  • data-rotatex: RotateX effect.
  • data-rotateY: RotateY effect.
  • data-rotatez: RotateZ effect.
  • data-crop: Limits the boundary. True or False.
  • data-easing: Easing functions: "easeout", "easein", "easeinout", or "linear"
<div class="scrollme">
  <div class="animateme"
       data-OPTION="Value">
       Element To Animate
  </div>
</div>

This awesome jQuery plugin is developed by sumitramanga. For more Advanced Usages, please check the demo page or visit the official website.