Little script that detects if an element is in the viewport and adds a class to it. Check the site for a demo
JavaScript
Clone or download
Latest commit bd61d92 Sep 25, 2017
Permalink
Failed to load latest commit information.
demo Add scrollwrapper in demo Oct 12, 2015
dist Release 1.8.8 Sep 25, 2017
src Fix Viewport Checker Sep 8, 2017
.gitignore Release 1.8.8 Sep 25, 2017
Gruntfile.js Added grunt tasks Apr 25, 2015
LICENSE Initial commit Jan 3, 2014
README.md Added version badge Oct 12, 2015
bower.json Release 1.8.8 Sep 25, 2017
package.json Release 1.8.8 Sep 25, 2017

README.md

jQuery-viewport-checker

Little script that detects if an element is in the viewport and adds a class to it.

Help me with a cup of coffee

Installation

Download the file located in /dist or use bower to install it.

bower install jQuery-viewport-checker

Include the script and jQuery in your website tag and call it on the elements you want to check.

<head>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="dist/jquery.viewportchecker.min.js"></script>

    <script>
        $(document).ready(function(){
            $('.dummy').viewportChecker();
        });
    </script>
</head>

Options

The currently available global options are:

$('.dummy').viewportChecker({
    classToAdd: 'visible', // Class to add to the elements when they are visible,
    classToAddForFullView: 'full-visible', // Class to add when an item is completely visible in the viewport
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    removeClassAfterAnimation: false, // Remove added classes after animation has finished
    offset: [100 OR 10%], // The offset of the elements (let them appear earlier or later). This can also be percentage based by adding a '%' at the end
    invertBottomOffset: true, // Add the offset as a negative number to the element's bottom
    repeat: false, // Add the possibility to remove the class if the elements are not visible
    callbackFunction: function(elem, action){}, // Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
	scrollHorizontal: false // Set to true if your website scrolls horizontal instead of vertical.
});

Besides the global options you can also add data-attributes to each individual element. These attributes will override the global options.

Available attributes are:

<div data-vp-add-class="random"></div>          > classToAdd
<div data-vp-remove-class="random"></div>       > classToRemove
<div data-vp-remove-after-animation="true|false"></div>      > Removes added classes after CSS3 animation has completed
<div data-vp-offset="[100 OR 10%]"></div>       > offset
<div data-vp-repeat="true"></div>               > repeat
<div data-vp-scrollHorizontal="false"></div>    > scrollHorizontal

Use case

The guys from web2feel have written a little tutorial with a great example of how you can use this script. You can check the tutorial here and the demo here.