はるらぼ

jQuery、Perl、Linux、デザイン、UI関連の備忘録です。※引用する場合は自己責任で。

スクロール量に応じて、横からコンテンツが出てくる

よくある「スクロール量に応じて、横からコンテンツが出てくる」あれです。今ドキっぽい。

$(function(){
  $('.box p').addClass('move');
  $(window).scroll(function(){
    $(".box").each(function(){
      var imgPos = $(this).offset().top;    
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/5){
        $(this).find("p").removeClass('move');
      } else {
        $(this).find("p").addClass('move');
      }
    });
  });
});











左からふわっと表示

文章が左から出てきまーす。
文章が左から出てきまーす。
文章が左から出てきまーす。

<div class="box">
  <p>
    文章が左から出てきまーす。<br>
    文章が左から出てきまーす。<br>
    文章が左から出てきまーす。<br>
  </p>
</div>
.box p {
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.box p.move {
  -webkit-transform: translate(-10px, 0);
  opacity: 0;
}

右からふわっと表示

今度は右から出てきまーす。
今度は右から出てきまーす。
今度は右から出てきまーす。

<div class="box">
  <p class="text_right">
    今度は右から出てきまーす。<br>
    今度は右から出てきまーす。<br>
    今度は右から出てきまーす。<br>
  </p>
</div>
.box p {
  text-align: right;
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
.box p.move {
  -webkit-transform: translate(10px, 0);
  opacity: 0;
}

中央から拡大しながらふわっと表示

センターどーん!

<div class="box">
  <p class="text_center">
    センターどーん!
  </p>
</div>
.box p {
  text-align: center;
  -webkit-transition: all 1s;
  -webkit-transform: scale(1.0);
  opacity: 1;
}
.box p.move {
  -webkit-transform: translate(0, 0)  scale(0.5);
  opacity: 0;
}







jQueryだけでも実装可能だが、javascript無効環境も考慮すると
classの操作に留めた方が無難か・・・。

【参考】 weboook.blog22.fc2.com