画像やリストに! 3D スクロールにする jQuery プラグイン

3Dのスクロールアニメーションを簡単に実装できるJQuery Tilted Page Scroll

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

面白い jQuery プラグインを見つけたのでご紹介です。

それは「 jQuery Tilted Page Scroll 」。

このプラグインを使えば、画像やリストに 3D のスクロールアニメーションをつけられます。しかも、ものすごく簡単に。

どのようなアニメーションかは、公式サイトのデモでご確認いただけます。

また、公式サイトのデモとは設定を変えたサンプルを用意しました。下にスクロールすると、画像が面白い動きをします。( AMP ではアニメーションしません。)

jQuery Tilted Page Scrollのサンプル画像
jQuery Tilted Page Scrollのサンプル画像
jQuery Tilted Page Scrollのサンプル画像
jQuery Tilted Page Scrollのサンプル画像
jQuery Tilted Page Scrollのサンプル画像

他とは違ったサイトにしたい方にぴったりなプラグインです。

jQuery Tilted Page Scroll の設置

jQuery Tilted Page Scroll を使うには、まず GitHub よりファイルをダウンロードします。

①「 Clone or download 」をクリック後、②「 Download ZIP 」をクリックするとダウンロードできます。

jQuery Tilted Page Scrollのダウンロード方法

ダウンロードした zip ファイルを解凍し、 jquery.tiltedpage-scroll.min.js をサーバーに設置します。 WordPress をお使いであれば、子テーマフォルダの直下に設置します。

サイズは、わずか 1.5KB 。軽い。

HTML を記述

次にすることは、 HTML の記述です。ただ、既存の HTML に適用する場合には、このステップは飛ばします。

HTML に必要なのは、アニメーションを適用する要素と、それを包み込む親要素だけです。最初に挙げたサンプルでは、下記のように記述しました。

<div id="sample-wrap">
    <div class="sample-img">
        <img>
    </div>
    <div class="sample-img">
        <img>
    </div>
    <div class="sample-img">
        <img>
    </div>
</div>

.sample-img がアニメーションを適用する要素。#sample-wrap が親要素です。

読み込みと実行コードの記述

</body> タグ手前に、設置した jquery.tiltedpage-scroll.min.js の読み込みと実行コードを記述します。

<script src="jquery.tiltedpage-scroll.min.js"></script>
<script>
$( function() {
    // 親要素の class または id を指定
    $('#sample-wrap').tiltedpage_scroll({
        // アニメーションを適用する要素の class または id を指定
        sectionContainer: '.sample-img',
        angle: 50,
        opacity: true,
        scale: true,
        outAnimation: true
    });
});
</script>

WordPress の場合はこちら。子テーマの利用を想定しています。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.tiltedpage-scroll.min.js"></script>
<script>
jQuery( function($) {
    // 親要素の class または id を指定
    $('#sample-wrap').tiltedpage_scroll({
        // アニメーションを適用する要素の class または id を指定
        sectionContainer: '.sample-img',
        angle: 50,
        opacity: true,
        scale: true,
        outAnimation: true
    });
});
</script>

オプション

上記コードのうち angle opacity scale outAnimation は、用意されている 4 つのオプションです。

angle

angle は、画面から出ていく要素の傾斜割合の指定です。デフォルトは 50

100 にすると、要素が 1 周します。 100 を超える指定も可能です。

opacity

opacity は、画面から出ていく要素を透過させるかの指定です。デフォルトは透過する true

false にすると、透過しなくなります。

scale

scale は、画面から出ていく要素を拡大させるかの指定です。デフォルトは拡大する true

false にすると、拡大しなくなります。

outAnimation

outAnimation は、画面から出ていく要素にアニメーションを適用するかの指定です。デフォルトはアニメーションを適用する true

false にすると、次に表示される要素のみにアニメーションが適用されます。

CSS を指定

あとは CSS を指定すれば終わりです。

.sample-img {
  perspective: 350px;
  transform-style: preserve-3d;
}

perspective の値で、 3D の奥行きを指定します。おおよその目安は 250 ~ 500px です。

テーマのインデックスリストに適用

jQuery Tilted Page Scroll は、既存の HTML にも適用できます。素晴らしい WordPress テーマ「 Cocoon 」のインデックスリストに対し適用してみます。

Cocoon のフロントページやアーカイブページのインデックスリストは、以下のような HTML です。

<div id="list">
    <a class="entry-card-wrap"></a>
    <a class="entry-card-wrap"></a>
    <a class="entry-card-wrap"></a>
    ...
</div>

まず子テーマフォルダの直下に jquery.tiltedpage-scroll.min.js を設置するのは、先に述べたとおり。

次に、子テーマの tmp-user/footer-insert.php に下記のコードを追加し、 jquery.tiltedpage-scroll.min.js を読み込みます。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/jquery.tiltedpage-scroll.min.js"></script>

さらに、子テーマの javascript.js に実行コードを追加します。

jQuery( function($) {
    $('#list').tiltedpage_scroll({
        sectionContainer: '.entry-card-wrap',
        angle: 50,
        opacity: true,
        scale: true,
        outAnimation: true
    });
});

最後に、子テーマの style.css に、下記の CSS を追加します。

#list {
  overflow: hidden;
}

.entry-card-wrap {
  perspective: 350px;
  transform-style: preserve-3d;
}

#list > .a-wrap:hover {
  background: none;
}

これで完成。テーマ設定より「カードタイプ」を「縦型カード 2 列」にすると、下の動画のような面白いインデックスリストに変化します。

インパクト大のインデックスリストです。