jQuery Plugin To Make Elements Fade Into View When Entering Viewport

File Size: 17.6 KB
Views Total: 1765
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
    Lorem ipsum dolor sit amet
  <img src="https://unsplash.it/600/450?image=1084" />

4. Call the function on document ready.


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");

.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");

6. Possible plugin options.

  "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.