jQuery Plugin For Scroll-controlled Animations - HeroMagic.js

HeroMagic.js is a jQuery plugin which applies fancy fading and/or sliding animations to any elements when they are scrolled in or out of the viewport. Custom duration, delay and easing functions are supported as well.

How to use it:

1. Load the following JavaScript and CSS files in the html document.

<link rel="stylesheet" href="jquery.heromagic.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.heromagic.min.js"></script>

2. Initialize the plugin and the HeroMagic.js is ready for use.

$(window).on('load', function() {
  var $hm = $('body').heroMagic({
      addStyles: false,
  });
});

3. Add the following CSS classes to the element and config the scroll in/out animations using data attributes.

• .hm-fade-in: enable fade in animation
• .hm-fade-out: enable fade out animation
• .hm-scroll-in: enable scroll in animation
• .hm-scroll-out: enable scroll out animation
• data-appear: [duration], [easing], [delay]
• data-move: [x],[y], [duration], [easing], [delay]

<h2 class="hm-fade-in hm-scroll-in hm-fade-out hm-scroll-out" data-move="0, 0, 1000ms, ease-in-out, 0ms">Move</h2>

<h3 class="hm-fade-in hm-scroll-in hm-fade-out hm-scroll-out" data-appear="1000ms, ease-in-out, 500ms">Appear</h2>

<h4 class="hm-fade-in hm-scroll-in hm-fade-out hm-scroll-out" data-appear="1000ms, ease-in-out, 1000ms" data-move="0, 0, 1000ms, ease-in-out, 1000ms">Appear + Move</h2>

4. Possible options (with default values) to config the plugin.

$('body').heroMagic({

  // auto inject stylesheet into the document
  addStyles: true,

  // default options for the scroll animations
  defaults: {
    appearDuration: '300ms',
    appearEasing: 'ease-in-out',
    appearDelay: 0,
    moveX: 0,
    moveY: '-20px',
    moveDuration: '300ms',
    moveEasing: 'ease-in-out',
    moveDelay: 0,
  },

  // auto starts on window.load event
  autoStart: true,

  // changes the display property of your element
  positionOverrides: true,

  // offsets in pixels
  scrollOutDistance: 80,
  scrollInDistance: 80,

  // controls how aggressively the scroll-in|scroll-out|fade-in|fade-out is calculated
  scrollCompressor: 0.2,

  // debug mode
  debugScrollPoints: false,
  
});

Change log:

2017-07-08

• Complex transition positioning fix

---

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