スクロールが楽しくなる【skrollr.js】を紹介します

taka_oj
|
2019年3月28日
| コメントはまだありません
| JavaScript

スクロールするのが楽しくなる【skrollr.js】を紹介します。
単調になりがちなシングルホームページに変化を！
パララックス、スライドなど、スクロール時のエフェクトを効果的に入れることで、飽きのこないWEBページをつくりませんか？

今回はskrollr.jsのサンプルページから、すぐに使えそうなものをご紹介したいと思います。
導入が少し難しいので、HP作成に慣れてきてから試してくださいね！

それでは、デモページをご覧ください。
デモページは、こちら

↓デモページのサンプルコードは以下となります。

▼HTML

    <!--【デモ１】-->
    <div id="intro"
        data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;"
        data-500="opacity:0;top:-10%;transform:rotate(-90deg);"
        class="skrollable skrollable-between"
        style="opacity: 1; top: 3%; transform: rotate(0deg); transform-origin: 0px 0px;">
        <h1>★skrollrデモ★</h1>
        <h2>【デモ１】スクロールすると透明になりながら、上へ移動し、左へ回転します</h2>
        <p>デモは他にもあります。どんどん下へスクロールしてお楽しみください！</p>
        <p class="triangle">▼&nbsp;▼&nbsp;▼</p>
    </div>

    <!--【デモ２】-->
    <div id="transform"
        data-500="transform:scale(0) rotate(0deg);"
        data-1000="transform:scale(1) rotate(1440deg);opacity:1;"
        data-1300=""
        data-1600="transform:scale(5) rotate(3240deg);opacity:0;"
        class="skrollable skrollable-before"
        style="transform:scale(0) rotate(0deg);opacity: 1;">
        <h2>【デモ２】transform</h2>
        <p>①拡大・回転しながらフェードイン</p>
        <p>②しばらく静止</p>
        <p>③拡大・回転しながらフェードアウト</p>
    </div>

    <!--【デモ３】-->
    <div id="e_wrapper"
         data-0="display:none;"
         data-1700="display:block;"
         data-2700="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);"
         data-3700="background:rgba(0,0,0,1);color:rgb(255,255,255);"
         class="skrollable skrollable-between"
         style="display: none; top: 0%; background: rgba(0, 0, 0, 0); color: rgb(0, 0, 0);">
    <div id="easing" data-1700="left:100%" data-4600="left:25%;" class="skrollable skrollable-before" style="left: 100%;">
        <h2>【デモ３】スライドイン</h2>
        <p>さらにスクロールすると・・・</p>
        <p>背景の <span data-1700="" data-2700="color[swing]:rgb(0,0,0);" data-3700="color:rgb(255,255,0);" class="skrollable skrollable-before" style="color: rgb(0, 0, 0); font-size: 150%;">画面色 </span>が変わります。</p>
        <p data-3700="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:300%;" class="skrollable skrollable-before" style="opacity: 0; font-size: 100%;">楽しいでしょう？</p>
        </div>
    </div>

        <script type="text/javascript" src="js/skrollr.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>

▼jQuery

var s = skrollr.init({
    edgeStrategy: 'set',
    easing: {
        WTF: Math.random,
        inverted: function (p) {
            return 1 - p;
        }
    }
});

jQueryは、ページが読み込まれるとskrollrのスクリプトが読み込まれ、「skrollr.init()」が実行され、初期化されるという仕様です。

↓↓↓【skrollr.js】に興味を持たれた方は、以下からダウンロードやサンプルを見ることができます。↓↓↓
ダウンロード＆サンプルページ：https://github.com/Prinzhorn/skrollr/tree/master/examples

デモの作成には、上記【skrollr.js】のサンプルページThe “main” exampleを参考にしました。

今回の記事やデモページの作成にあたり、
skrollrのSampleを読み解く〜The "main" example〜 | FH_BLOG | Web制作・ホームページ制作会社【東京都 渋谷区】 | フライング・ハイ・ワークスさんのページを参考にさせて頂きました。
ありがとうございます。

JavaScript