jQuery練習: スクロールエフェクト

以前作ったグリッドに、「スマホやタブレットの場合、ホバーではなくスクロールでエフェクトが自動で起きる」というギミックを搭載してみました。

プラグインの導入

導入にあたってはこちらのページを参考にさせていただきました。

jQuery＆CSS3で超簡単！スクロールするとかっこ良く要素を表示する方法7つ

上のサイトが非常に分かりやすく解説してくださっているので、引用にて紹介させて頂きたいと思います。

スクロールイベントは「jquery.inview.js」というプラグインを使用します。
ブラウザの画面上で要素が見えたとき・画面から外れたときに処理を実行するという動作が簡単に実現できます。
まずはGithubに用意されている公式の配布サイトからプラグインのファイルをダウンロードしてきましょう。

ダウンロード先リンク
https://github.com/protonet/jquery.inview

フォルダをダウンロードしたら、jsファイルをサーバーにアップロードします。自分の場合はCyberduckを使って使用中のWordpressの親テーマフォルダにアップロードしました。

下から3番目がアップロードしたファイルです。次にこのファイルを呼び出せるようにheader.phpのheadタグ内に下記のように追記します。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.inview.js" type="text/javascript"></script>

既にjQueryを呼びさせるようにしている場合は、jquery.inview.jsを呼び出すだけで大丈夫です。src内はフォルダの場所を指しているので運営しているサイトによって異なるかと思います。これで下準備が整ったので、次は実行コードを書いていきます。

スクリプト

スクリプトはfooter.phpのbodyタグが終わる直前に書き込みます。.sample-coverという要素が表示されるエリアまでスクロールしたら、.scrollというクラスを付与し、表示エリアから消えたら.scrollというクラスを削除、ということが書かれており、次にやることはHTMLとCSSの編集です。

<script type="text/javascript"><script type="text/javascript">
$(function() { 
  $('.post-thumbnail-cover, .sample-cover').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 
    if(isInView){ 
      $(this).stop().addClass('scroll'); 
    } 
    else{ 
      $(this).stop().removeClass('scroll');
    }
  });
});
</script>

HTML

HTMLは何度か紹介しているギミックのものを流用しています。

<div class="container" style="margin-bottom: 24px">
  <div class="row">
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-a"><a href="#" class="sample-cover">
        <div class="sample-bg bg-1"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">History</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-b"><a href="#" class="sample-cover">
        <div class="sample-bg bg-2"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Tradition</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-c"><a href="#" class="sample-cover">
        <div class="sample-bg bg-3"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Nature</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
    <div class="blog-post col-md-8 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-d"><a href="#" class="sample-cover">
        <div class="sample-bg bg-4"></div>
        <div class="sample-borderline"></div>
        <div class="sample-comment">Views</div>
        <div class="roll-button">Click for details</div>
      </a></div>
    </div>
  </div>
</div>

CSS

CSSは、ホバー設定を行ったCSSを流用しました。変更点は、.sample-cover:hoverとなっていた部分を、全て.sample-cover.scrollにしている点で、これにより.sample-cover要素にscroll要素が付与された瞬間（可視領域に入った瞬間）に各種エフェクトが自動で動き始めます。また、タブレット・スマホでのみスクロールで可視領域に入った瞬間にエフェクトが作動するよう、@media screen設定をしています。iPadを横向きにしたあたりのサイズまでスクロールでエフェクトが作動します。

@media screen and (max-width:1024px) {
.sample-cover.scroll .sample-borderline, .sample-cover.scroll .roll-button {
 opacity: 1;
}

.sample-cover.scroll .sample-borderline {
 -webkit-transition: all 0.8s ease;
 -moz-transition: all 0.8s ease;
 -o-transition: all 0.8s ease;
 transition: all 0.8s ease; 
}

.sample-cover.scroll .roll-button {
 transform: translateY(15px);
 -webkit-transition: all 0.3s ease-in 0.8s;
 -moz-transition: all 0.3s ease-in 0.8s;
 -ms-transition: all 0.3s ease-in 0.8s;
 transition: all 0.3s ease-in 0.8s;
}

.sample-cover.scroll .sample-comment {
 -webkit-transition: all 0.8s ease-in;
 -moz-transition: all 0.8s ease-in;
 -ms-transition: all 0.8s ease-in;
 transition: all 0.8s ease-in;
 transform: translateY(-100%);
}
 
.sample-cover.scroll .sample-bg {
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -o-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
}

.sample-cover.scroll .sample-bg::before {
   background-color: rgba(0,0,0,0.7);
}
}

まとめ

PCではマウスホバー、タブレットやスマホではスクロールでエフェクトが開始するにはどうすればいいか、というのを考えたとき、@mediaで:hoverをPC画面サイズ、タブレット・スマホサイズの画面サイズの場合はjQueryでスクロールにより別クラスを与えてそれをスイッチにエフェクトを起動させれば実現可能なのではないか、と思い実装してみました。画面サイズによる分岐をスクリプト側で行うべきか今回のようにCSS側で行うか、どちらがより良いのかはまだ判断つきませんが、とりあえず実装できたことに満足しています。今後も思いついたことがあったらどんどん実装し、備忘録として記していきたい。

Yusaku Days

jQuery練習: スクロールエフェクト

もくじ

プラグインの導入

スクリプト

HTML

CSS

まとめ