当元素在视口中可见时，对div进行动画处理

Question

Im am trying to create a horizontally scrolling, one-page website where I am using divs as buttons to get the page to scroll to an element when they are clicked. I have the scrolling mechanism working but I want the divs to animate (change size or colour ect...) when the element they are linked to to is visible in the viewport. What is the best way to do this?

Answer 1

I'm not sure how you code is done for the scrolling because you didn't provide any code / exemple but I will try to help you in some way.

$(function(){
var sections = {},
    _height  = $(window).height(),
    i        = 0;

// Grab positions of our sections 
$('.section').each(function(){
    //this.name would be the attr name="" of a section but you could change to the id
    sections[this.name] = $(this).offset().top;
});

$(document).scroll(function(){
    var pos = $(this).scrollTop();

    // Look in the sections object and see if any section is viewable on the screen. 
    // If two are viewable, the lower one will be the active one. 
    for(i in sections){
        if(sections[i] > pos && sections[i] < pos + _height){
            $('a').removeClass('active');
            $('#nav_' + i).addClass('active');
        }  
    }
});

});

This Code should do what you want to achive atm it's just active a 'active' class but you could do a Css3 animation as you want.