0

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

Edited by vizz

3
Contributors
4
Replies
24
Views
4 Years
Discussion Span
Last Post by imBaCodes
0

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!');
    }
});
0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.