スクロールしたら要素が出るやつ【.offset()】

Pocket

スクロールすると、要素がでてくるやつをjqueryを使用して実装します。

デモはこちら

<仕様>

①ページをスクロールして、隠れている要素がブラウザの画面高さの1/4に到達したら要素を表示する。

②対象要素は5.6.7の三つ。

それでは、解説。

○index.html

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="css/normalize.css">
  6. <link rel="stylesheet" href="css/sanitize.css">
  7. <link rel="stylesheet" href="css/common.css">
  8. <title>デモ</title>
  9. <meta name="description" content="">
  10. <meta name="keywords" content="">
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <link rel="stylesheet" href="css/index.css">
  13. </head>
  14. <body>
  15. <!--header-->
  16. <header></header>
  17. <main ontouchstart="">
  18. <div class="Container">
  19. <div class="sideMargin">
  20. <div class="itemBlock">
  21. <div class="block block1">
  22. <p>1</p>
  23. </div>
  24. <div class="block block2">
  25. <p>2</p>
  26. </div>
  27. <div class="block block3">
  28. <p>3</p>
  29. </div>
  30. <div class="block block4">
  31. <p>4</p>
  32. </div>
  33. <div class="block block5">
  34. <p>5</p>
  35. </div>
  36. <div class="block block6">
  37. <p>6</p>
  38. </div>
  39. <div class="block block7">
  40. <p>7</p>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </main>
  46. <!--footer-->
  47. <footer>
  48. <script src="js/jquery-2.0.0.min.js"></script>
  49. <script src="js/common.js"></script>
  50. </footer>
  51. </body>
  52. </html>

・div class=block block4、div class=block block5、div class=block block6の3つの要素をスクロールしたら表示するようにします。

○index.css

  1. .Container {
  2. padding: 50px 0;
  3. background-color: #9e9e9e40; }
  4.  
  5. .sideMargin {
  6. padding: 0 10px; }
  7.  
  8. .itemBlock {
  9. background-color: white;
  10. max-width: 780px;
  11. margin: 0 auto; }
  12.  
  13. .block {
  14. background-color: blue;
  15. height: 300px;
  16. width: 300px;
  17. margin: 0 auto 20px;
  18. -webkit-transform: translateY(50px);
  19. transform: translateY(50px);
  20. opacity: 0;
  21. -webkit-transition: 0.5s;
  22. transition: 0.5s; }
  23. .block p {
  24. color: #fff;
  25. font-size: 3.0rem; }
  26.  
  27. .block1,
  28. .block2,
  29. .block3,
  30. .block4 {
  31. -webkit-transform: translateY(0px);
  32. transform: translateY(0px);
  33. opacity: 1; }
  34.  
  35. .fadeIn {
  36. -webkit-transform: translateY(0px);
  37. transform: translateY(0px);
  38. opacity: 1; }

①block

・transformを適用して本来の表示位置からY軸方向に50px移動

・表示を消すためにopacityを適用して要素を透明にする

・transitionを適用して一定時間でcssを変化させるようにする(今回は0.5秒)

②fadeIn・・・block要素を表示させる設定にする。

・ずれた要素をもとの位置にするためにtransformを再度適用

・透明の要素を表示させるためにopacityを再度適用

○common.js

  1. $(function(){
  2. $(window).scroll(function(){
  3. var fade5 = $('.block5').offset().top;
  4. var fade6 = $('.block6').offset().top;
  5. var fade7 = $('.block7').offset().top;
  6. var scroll = $(window).scrollTop();
  7. var windowHeight = $(window).height();
  8. if (scroll > fade5 - windowHeight + windowHeight/4){
  9. $('.block.block5').addClass('fadeIn');
  10. }
  11. if (scroll > fade6 - windowHeight + windowHeight/4){
  12. $('.block.block6').addClass('fadeIn');
  13. }
  14. if (scroll > fade7 - windowHeight + windowHeight/4){
  15. $('.block.block7').addClass('fadeIn');
  16. }
  17. });
  18. });

① var fade = $().offset().top;

変数fadeは、$()要素のy軸上の値(一番上から、要素までの距離)

② var scroll = $(window).scrollTop();

変数scrollはブラウザのスクロールした値

③ var windowHeight = $(window).height();

変数windowHeightはブラウザの縦の大きさ

④ if (scroll > fade5 – windowHeight + windowHeight/4){}

『隠れている要素が、ブラウザの1/4の高さに到達したら』という条件

⑤ $().addClass(‘fadeIn’);

$()要素にfadeInというクラスを追加する

これで、スクロールすると要素が下から出てくるよく見る動きになります。

今回は以上です。