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 |

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.