detect which div is appearing in window

[vizz]

I'm using Ascensor.js. I need to detect which div section is visible in window to add animation effects to elements inside that visible div.

For following code,

<div id="ascensorBuilding">
    <section>
            //floor one content here
    </section>
</div>

I'm using my code,

<div id="wrapper">  

   <div class="section about"  id="about">
   </div>

   <div class="section home"  id="Home">
   </div>

</div>

It's working well.

And my script to detect which div is visible or appearing in window is ,

$(document).ready(function(){

    $.fn.isOnScreen = function(){

        var win = $(window);

        var viewport = {
            top : win.scrollTop(),
            left : win.scrollLeft()
    };

    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

    };


    if($('.about').isOnScreen())
        {
          // element is now visible in the viewport
          alert("You can see me");
        }
    else
    {
        // element has gone out of viewport
        alert("You can not  see me more !!!");
    }


});

I need to make this work

$('.about').isOnScreen(function(){ 

    alert("You can see me");

});

Whenever .about i.e. <div class="section about" id="about"></div> appears on screen, animation effects can be added to elements inside .about div

[vizz]

I find this plugin For this,

How to make this work?

$('.me').bind('inview', function (event, visible) {
    if (visible) {
      alert('Yay! You can see me!');
    } else {
      alert('Hidden again. Muhahah!');
    }
});

[stbuchok]

I'm assuming that there is a click event happening that causes the div to come into view. If so, why not just cause the animations to happen when you click the button? Or when you click on a button that show a div, set an attribute on that div that says, it's selected:

<div data-isSelected="true"></div>

you can then call $('[data-isSelected="true"]') to get the currently selected div that is in view and can use this as the context for all your animations.

$('#elementid', $('[data-isSelected="true"]'))...

But really without knowing all the details I'm just guessing that you could do something like that.

[vizz]

From long time I'm trying to create website like this.

I succeeded upto some limit with using Ascensor.js. But still I'm unable to add animations. I have tried with @keyframes, But I'm far away from quality of website stated above.

Please help me to create website like this.

[imBaCodes]

Try to use Show and Hide Event with JQUERY . or TRY BOOTSTRAP to do it for you.