Use jQuery Scroll to enable / disable Fade / Scale.

Question

Jsfiddle

I decided to redesign my site today by adding some scroll effects through jQuery + CSS3.
I have a set of divs arranged horizontally and vertically.

I am trying to apply this effect , so each divwill fade / scale when scrolling and fade / zoom when fading / scaling the other.

I know that I can use .scrollan event handler, but I'm not sure how it will be used for this type of effect.

Here the current jQuery is added at the time of publication.

$(document).ready(function() {
    $(".container").scroll(function() {
        if ($(".container").scrollTop() > 50) {
            $(".container div").css('background', 'rgb(200, 54, 54)').stop().animate({"opacity":".5"}, 1000)
        }
    });
});

Answer 1

script , : http://www.bytemuse.com/scrollIt.js/

$.scrollIt({
  upKey: 38,             // key code to navigate to the next section
  downKey: 40,           // key code to navigate to the previous section
  easing: 'linear',      // the easing function for animation
  scrollTime: 600,       // how long (in ms) the animation takes
  activeClass: 'active', // class given to the active nav element
  onPageChange: null,    // function(pageIndex) that is called when page is changed
  topOffset: 0           // offste (in px) for fixed top navigation
});

, , ( ).

, , :

http://opensource.teamdf.com/visible/examples/demo-basic.html

if($('#element').visible();) {//do whatever you want}

: http://jsfiddle.net/prollygeek/AHguL/8/

, , : http://johnpolacek.imtqy.com/superscrollorama/