Skip to content

Little utility to detect if elements are currently within the viewport 🔧

License

Notifications You must be signed in to change notification settings

ivnish/viewport-checker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

91 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Little utility to detect if elements are currently within the viewport 🔧

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%