ScrollZip

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.

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.