スクロールすると、要素がでてくるやつをjqueryを使用して実装します。
<仕様>
①ページをスクロールして、隠れている要素がブラウザの画面高さの1/4に到達したら要素を表示する。
②対象要素は5.6.7の三つ。
それでは、解説。
○index.html
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="css/normalize.css">
- <link rel="stylesheet" href="css/sanitize.css">
- <link rel="stylesheet" href="css/common.css">
- <title>デモ</title>
- <meta name="description" content="">
- <meta name="keywords" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="css/index.css">
- </head>
- <body>
- <!--header-->
- <header></header>
- <main ontouchstart="">
- <div class="Container">
- <div class="sideMargin">
- <div class="itemBlock">
- <div class="block block1">
- <p>1</p>
- </div>
- <div class="block block2">
- <p>2</p>
- </div>
- <div class="block block3">
- <p>3</p>
- </div>
- <div class="block block4">
- <p>4</p>
- </div>
- <div class="block block5">
- <p>5</p>
- </div>
- <div class="block block6">
- <p>6</p>
- </div>
- <div class="block block7">
- <p>7</p>
- </div>
- </div>
- </div>
- </div>
- </main>
- <!--footer-->
- <footer>
- <script src="js/jquery-2.0.0.min.js"></script>
- <script src="js/common.js"></script>
- </footer>
- </body>
- </html>
・div class=block block4、div class=block block5、div class=block block6の3つの要素をスクロールしたら表示するようにします。
○index.css
- .Container {
- padding: 50px 0;
- background-color: #9e9e9e40; }
- .sideMargin {
- padding: 0 10px; }
- .itemBlock {
- background-color: white;
- max-width: 780px;
- margin: 0 auto; }
- .block {
- background-color: blue;
- height: 300px;
- width: 300px;
- margin: 0 auto 20px;
- -webkit-transform: translateY(50px);
- transform: translateY(50px);
- opacity: 0;
- -webkit-transition: 0.5s;
- transition: 0.5s; }
- .block p {
- color: #fff;
- font-size: 3.0rem; }
- .block1,
- .block2,
- .block3,
- .block4 {
- -webkit-transform: translateY(0px);
- transform: translateY(0px);
- opacity: 1; }
- .fadeIn {
- -webkit-transform: translateY(0px);
- transform: translateY(0px);
- opacity: 1; }
①block
・transformを適用して本来の表示位置からY軸方向に50px移動
・表示を消すためにopacityを適用して要素を透明にする
・transitionを適用して一定時間でcssを変化させるようにする(今回は0.5秒)
②fadeIn・・・block要素を表示させる設定にする。
・ずれた要素をもとの位置にするためにtransformを再度適用
・透明の要素を表示させるためにopacityを再度適用
○common.js
- $(function(){
- $(window).scroll(function(){
- var fade5 = $('.block5').offset().top;
- var fade6 = $('.block6').offset().top;
- var fade7 = $('.block7').offset().top;
- var scroll = $(window).scrollTop();
- var windowHeight = $(window).height();
- if (scroll > fade5 - windowHeight + windowHeight/4){
- $('.block.block5').addClass('fadeIn');
- }
- if (scroll > fade6 - windowHeight + windowHeight/4){
- $('.block.block6').addClass('fadeIn');
- }
- if (scroll > fade7 - windowHeight + windowHeight/4){
- $('.block.block7').addClass('fadeIn');
- }
- });
- });
① 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というクラスを追加する
これで、スクロールすると要素が下から出てくるよく見る動きになります。
今回は以上です。