CODEWITHSUNDEEP
jquerycss
gautamz07
gautamz07

Reputation: 385

animate.css initializing with Jquery

Well, animate.css makes it easy to add animations to any HTML element you want. What I would like to know: how do I initialize or add an animate.css animation using jQuery?

I searched the web, and found a few similar questions asked on StackOverflow , but the problem is I am not too knowledgeable about jQuery and hence thought I would post a specific question on this topic. I would appreciate anybody's help or guidance .

Below is my code.

<section id="meet-the-team">

<div class="container">
    <div class="gap "></div>
    <h1 class="center">Meet the Team</h1>
    <p class="lead center">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <div class="gap"></div>


        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>

        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>        
        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>        
        <div class="col-md-3 col-xs-6">
            <div class="center">
                <p><img class="img-responsive img-thumbnail img-circle" src="images/vet.JPG" alt="" ></p>
                <h5>David J. Robbins<small class="designation muted">Senior Vice President</small></h5>
                <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor.</p>
                <a class="btn btn-social btn-facebook" href="#"><i class="icon-facebook"></i></a> <a class="btn btn-social btn-google-plus" href="#"><i class="icon-google-plus"></i></a> <a class="btn btn-social btn-twitter" href="#"><i class="icon-twitter"></i></a>
            </div>
        </div>
    </div>
    </div>
</section><!--/#about-us-->

How do I add the class "animate BouceIn" when the page only scrolls to that part of the page i.e "meet-the-team"?

Upvotes: 1

Views: 865

Answers (1)

chemitaxis
chemitaxis

Reputation: 14889

You can extract the scroll position using jQuery's .scrollTop() method: Documentation

Adds the specified class(es) to each of the set of matched elements.

JavaScript (.js)

$(document).ready(function () {
    //$("#divToAnimate").hide();
    var topOfOthDiv = $("#firstDiv").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?                
            $("#divToAnimate").addClass("animated bounceIn"); //reached the desired point -- show animation
        }
    });
});

HTML:

<body>
<div id="firstDiv">This is  the 1st Div </div>        
    <div id="divToAnimate"> 
        <img class="image-responsive image-thumbnail" src="http://goo.gl/IfIaDN"/>
    </div>        
</body>

CSS

#firstDiv
{
    background-color:#eee;
    height:300px;     
}

Here you have a Fiddle that works: Example

Make the window of the fiddle smaller to check it ;)

Upvotes: 2

Related Questions