Fork me on GitHub

ScrollZip

jQuery plugin to trigger functions when element/content becomes visibile/hidden while scrolling

Intro

ScrollZip is a jQuery plugin that is used to add some event/action/effect to the web elements when it is becoming visibile or hidden while scrolling the web page. This plugin doesn't actually add any action, It just finds whether the element is coming into or going out of the visible part of the browser viewport and triggers the function in the showFunction, hideFunction part accordingly.
Plugin by Arun David.

Example Usage

Download and include the jQuery library and the ScrollZip plugin in your web page.

<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.scrollzip.js"></script>
                
Now write the function to be called for the elements like the below code,

$(document).ready(function(){
    $(window).on("load scroll resize", function(){
        $('element').scrollzip({
            showFunction    :   function() {
                                    alert('Element has come into the view.');
                                },//optional
            hideFunction    :   function() {
                                    alert('Element has gone out of the view.');
                                },//optional
            wholeVisible    :     false,//optional (default false)
            showShift       :     100,//optional (default 0)
            hideShift       :     100,//optional (default 0)
        });
    });
});
                

Options

showFunction This function is used to write some code to be executed when the given element is becoming visible to user when scrolling. i.e. coming into the visible part of the browser viewport.
hideFunction Same like showFunction but for the event of the element going out of the visible part of the screen.
wholeVisible By default, Even when the small part of the element enters/exists the visibile part, the respective function is being called. But if you make wholeVisible to true, When the whole part of the element comes into the visibil area only the function triggers.
showShift To manually specify the distance after how much px it is into the screen, it should trigger the event. Nagative value to trigger the function for the distance before it is being displayed.
hideShift Same like showShift but for hiding the element.

Beware

Yes, there is already some good old jQuery plugins there for the scenario. But whats wrong? Let this be yet another solution. And by the way I am new to jQuery plugins. So beware, this may be a creepy unoptimised implementation?!.
But still it works!!.. Isn't that enough?

Here in this demo, I am using the Animate.css by @_dte for the CSS3 animations.
HTML5
CSS3
JavaScript