Flyin & Fade In/Out Elements On Scroll - jQuery ScrollMation

The jQuery ScrollMation plugin makes use of CSS properties to flyin and/or fade in/out specific elements when the user scrolls down or up the webpage.

How to use it:

1. Load the minified version of the ScrollMation plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/scrollmation.min.js"></script>

2. Apply the scroll-triggered animations to element as follows:

function myAnimation(){

  // fade in animation
  $(".element-1").scrollMation({
    action : 'fadeIn'
  });

  // fade out animation
  $(".element-2").scrollMation({
    action : 'fadeOut', 
    scrollPos : 250,
  });

  // fly in animation
  // from right to left
  $(".element-3").scrollMation({
    action : 'flyIn', 
    startPos : 600, 
    endPos: 0,
  });

  // fly in animation
  // from left to right
  $(".element-4").scrollMation({
    action : 'flyIn', 
    startPos : -600, 
    endPos: 0
  });

  // multiple animations
  $(".element-5").scrollMation({
    action : 'fadeIn'
  });
  $(".element-5").scrollMation({
    action : 'flyIn', 
    startPos : -600, 
    endPos: 0,
  });
}

3. Initialize the myAnimation function on document ready and attach the function to the window.scroll event.

myAnimations();

$(window).scroll(function(){
  myAnimations();
});

4. All default options to customize the animations.

{

  // fadeIn, fadeOut, flyIn
  action : 'fadeIn',

  // the distance from the top to start the scroll
  scrollPos: height-(height*.15),

  // the duration of the animation
  duration: (height-247)*.35,

  // start and end positions
  startPos: 600, 
  endPos: 0

}

---

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