【苦手克服】パララックスサイトを作ってみよう　その２

こんにちは朱夏です。

前回に続いて、パララックスサイトを作っていきます。
今回は、フェードインやスライドして表示される視覚効果を実装できる様にしていきます。

最初に、効果を付ける要素を作っておきます。
Bootstrapのカードを使います。
ポラロイドカメラで撮った写真の様な見た目のカードを作る事が出来ます。

コンテンツ１に以下を追加します。

            <div class="container">
               <div class="row">
                  <div class="col-sm-6 col-md-3 effect-fade">
                     <div class="card img-thumbnail">
                        <img class="card-img-top" src="画像リンク" alt="写真">
                        <div class="card-body px-2 py-3">
                           <h5>タイトル</h5>
                           <p class="card-text">内容説明</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-3">
                     <div class="card img-thumbnail">
                        <img class="card-img-top" src="画像リンク" alt="写真">
                        <div class="card-body px-2 py-3">
                           <h5>タイトル</h5>
                           <p class="card-text">内容説明</p>
                        </div>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-3">
                     <div class="card img-thumbnail">
                        <img class="card-img-top" src="画像リンク" alt="写真">
                        <div class="card-body px-2 py-3">
                           <h5>タイトル</h5>
                           <p class="card-text">内容説明</p>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

次に、CSSにこちらを追記します。

.effect-fade {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1000ms;
}
    
.effect-fade.effect-scroll {
    opacity : 1;
    transform : translate(0, 0);
}

次はJavascriptです。
今回はCSSで動きを付けているので、表示した後の固定のためにJSが使われているようです。
classを追加して、後から読み込まれたスタイルを優先する仕様を使った固定方法ですね。

まず、スライドさせたい要素にclassを指定します。
今回は”effect-sride”としました。

そして、CSSに以下の追記をします。

.effect-sride {
    transform: translate(500px, 0);
    transition: all 1000ms;
}

.effect-sride.effect-scroll {
    transform: translate(0, 0);
}

Javascriptには、先程と同じようにclassを追加する記述を追記します。

$(function(){
　$(window).scroll(function (){
    $('.effect-sride').each(function(){
        var elemPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > elemPos - windowHeight){
            $(this).addClass('effect-scroll');
        }
    });
　});
});

これで、スクロールしてくると右からスライドしてくるように出来ました。
フェードインしていないので先程のものより簡単に実装できた感じです。