UNIRRY

WEBデザインとホロスコープと宇宙のブログ

スクロールに合わせていろいろやるやつのサンプル

scroll01

スクロールに合わせていろいろやるやつのサンプル。これも前につくったやつだけど。なんか、サムネイルに、文字いれるの、やめるぅ(´;ω;`)ブワッ

html

<div id="id1">
  <ul>
    <li><img src="/sample/dropitem/obake.png"></li>
    <li><img src="/sample/dropitem/obake.png"></li>
    <li><img src="/sample/dropitem/obake.png"></li>
  </ul>
</div>
<div id="id2">
  <ul>
    <li><img src="/sample/onmouse/ico3.png"></li>
    <li><img src="/sample/onmouse/ico3.png"></li>
    <li><img src="/sample/onmouse/ico3.png"></li>
  </ul>
</div>
<div id="id3">
  <ul>
    <li><img src="/sample/onmouse/ico1.png"></li>
    <li><img src="/sample/onmouse/ico1.png"></li>
    <li><img src="/sample/onmouse/ico1.png"></li>
  </ul>
</div>

js

$(function () {

var id1Top  = $('#id1').offset().top - 100,
    id2Top  = $('#id2').offset().top - 100,
    id3Top  = $('#id3').offset().top - 100;
var wind    = $(window);
var windTop = wind.scrollTop();
var id1li = $('#id1 ul li'),
    id2li = $('#id2 ul li'),
    id3li = $('#id3 ul li');

wind.scroll(function(){
  windTop = wind.scrollTop();
  if ( windTop >= id1Top ) {
    //ここに表示処理を記述するだけ
    id1li.each(function(i){
      $(this).delay(i * 100).animate({'opacity':'1'}, 500);
    });
  }
  if ( windTop >= id2Top ) {
    //ここに表示処理を記述するだけ
    id2li.each(function(i){
      $(this).delay(i * 100).animate({'opacity':'1'}, 500);
    });
  }
  if ( windTop >= id3Top ) {
    //ここに表示処理を記述するだけ
    id3li.each(function(i){
      $(this).delay(i * 100).animate({'opacity':'1'}, 500);
    });
  }
});

});

サンプル

スクロールに合わせていろいろやるやつのサンプル


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3