jpv

jquery-plugin-viewport-checker

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

Showing:

Popularity

Downloads/wk

37

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jQuery-viewport-checker

JUST FORKED TO GET INTO NPM

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

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial