lucash / jquery-viewport-checker Goto Github PK

View Code? Open in Web Editor NEW

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

License: MIT License

JavaScript 76.59% HTML 23.41%

jquery-viewport-checker's Introduction

jQuery-viewport-checker

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

Installation

Just 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
    classToRemove: 'invisible', // Class to remove before adding 'classToAdd' to the elements
    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-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.

Recommend Projects

lucash / jquery-viewport-checker Goto Github PK