jQuery Plugin To Make Elements Fade Into View When Entering Viewport

fadeintoview.proto is a lightweight jQuery plugin which makes elements with fade-into-view class fade into view when they enter the viewport.

Basic usage:

1. The plugin requires jQuery and Velocity.js JavaScript libraries.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/velocity.min.js"></script>

2. Include the fadeintoview.proto JQuery plugin's JavaScript file after jQuery

<script src="jquery-fadeintoview.js"></script>

3. The plugin relies on elements having a class 'fade-into-view' and an unique id.

<div id="section1" class="section fade-into-view">
  <h2>
    Lorem ipsum dolor sit amet
  </h2>
  <img src="https://unsplash.it/600/450?image=1084" />
</div>

4. Call the function on document ready.

$("body").fadeIntoView();

5. Add a SVG based blur effect to elements when they're scrolled into view.

.fade-into-view {
  /* Transition */
  -webkit-transition: all 0.75s;
  -moz-transition: all 0.75s;
  -o-transition: all 0.75s;
  transition: all 0.75s;
}

.fade-into-view.fade-out-blur {
  /* Blur filter */
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url("svg/blur.svg#blur-3");
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

.fade-into-view.fade-in-blur {
  /* Blur filter */
  filter: blur(0px);
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: url("svg/blur.svg#blur-0");
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

6. Possible plugin options.

$("body").fadeIntoView({
  "padding": $(window).height()/3,
  "applyBlur": true,
  "hiddenOpacity": 0.6
});

---

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