jquery появляются на свитке и каждый элемент после друг друга - PullRequest
Новая
       24

jquery появляются на свитке и каждый элемент после друг друга

1 голос
/ 23 марта 2012

Мне было интересно, как они исправили такой эффект:

При прокрутке до <div class="div1"></div>

Показывает изображение 1 с постепенным увеличением, затем изображение 2 с постепенным увеличением, изображение 3 с постепенным увеличением и т. Д. И т. Д.

http://www.neotokio.it/ сделал это, но я не могу понять это ..

Что у меня пока есть: 

tiles = $(".test1").fadeTo(0, 0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(900,1);
    });
})

так что он появляется при прокрутке до определенного div, но я понятия не имею, как это исправить, чтобы сделать больше анимаций за 1 div, как я упоминал выше. и как пример neotokio.it.

1 Ответ

0 голосов
/ 23 марта 2012

Это делает в значительной степени то, что вы ищете, где я взял 650 из позиции div, вы, вероятно, захотите использовать $(window).innerHeight(), чтобы получить высоту области просмотра и сделать из этого вычисления.

Стиль: 

body{
    height: 1000px; 
}

div#container{
    margin-top: 800px; 
    display:block; 
    height:50px; 
    width:300px;
 }

.tiles{
    display:inline-block; 
    height:40px; 
    width:90px; 
    opacity:0; 
    background-color:red;
}

HTML: 

<div id="container">
         <div class="tiles">tile1 content</div>
         <div class="tiles">tile2 content</div>
         <div class="tiles">tile3 content</div>
</div>

Сценарий: 

var divpos= $("#container").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= divpos-650) {          
          var animDelay = 0;
              $('.tiles').each(function(){
                  $(this).delay(animDelay).animate({
                      opacity:1
                   },500);
                   animDelay += 500;
              });
         clearInterval(interval);
   }
}, 250);

Надеюсь, это поможет - см. Демонстрацию здесь: http://jsfiddle.net/24M3n/28/

...