Fade In Elements When Visible - jQuery ScrollFade

ScrollFade is a jQuery plugin to fade in elements below the fold with a scale effect when they become visible in the viewport on scroll.

Built with jQuery and CSS opacity & transform properties.

How to use it:

1. Download and place the scrollFade.js script 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="scrollFade.js"></script>

2. Attach the plugin to your DOM elements and done.

<div class="box">
  Element
</div>

$(function(){
  $('.box').scrollFade();
});

3. You can also customize the trigger element in the JavaScript. Useful for multiple elemnts.

$(function(){
  $('.box').scrollFade({
    triggerElement: $(this)
  });
});

4. Customize the duration of the animation in seconds.

$(function(){
  $('.box').scrollFade({
    duration: 0.5
  });
});

5. Delay the animation.

$(function(){
  $('.box').scrollFade({
    useDelay: false,
    delayIncrement: 0.5
  });
});

6. Set the distance from the bottom to trigger the animation.

$(function(){
  $('.box').scrollFade({
    visibleDistance: 30 // 30vh
  });
});

7. Set the breakpoint to enable/disable the animation on specific devices.

$(function(){
  $('.box').scrollFade({
    mediaQuery: 841
  });
});

---

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