フルスクリーンデザインにぴったりなスライドアニメーション「On Scroll Effect」

「On Scroll Effect」はスクロールに応じてコンテンツをスライドイン、スライドアウトで表示 / 非表示させるアニメーションが実現できるプラグインです。フルスクリーンデザインにピッタリです。

On Scroll Effect

On-Scroll-Effect

Demoサイトのフラットでフルスクリーンなデザインとマッチしていて、非常にオシャレです。

 

まずはこの状態。

On-Scroll-Effect-demo-1

 

スクロールさせるとすっと左右からスライドインし、表示されました。シンプルで面白い効果です。

On-Scroll-Effect-demo-2

 

 

それでは「On Scroll Effect」の実装方法をご紹介します。まずは外部ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpScroller.js"></script>

 

HTMLはこのようにマークアップします。

<div class="container">
  <div id="cbp-so-scroller" class="cbp-so-scroller">
    <section class="cbp-so-section">
      <article class="cbp-so-side cbp-so-side-left">
        <h2>Page 1</h2>
        <p>page1.page1.page1.page1.page1.page1.page1.</p>
      </article>
      <figure class="cbp-so-side cbp-so-side-right">
        <img src="images/1.png" alt="img01">
      </figure>
    </section>
    <section class="cbp-so-section">
      <figure class="cbp-so-side cbp-so-side-left">
        <img src="images/2.png" alt="img01">
      </figure>
      <article class="cbp-so-side cbp-so-side-right">
        <h2>Page 2</h2>
        <p>page2.page2.page2.page2.page2.page2.page2.</p>
      </article>
    </section>
    <section class="cbp-so-section">
      <article class="cbp-so-side cbp-so-side-left">
        <h2>Page 3</h2>
        <p>page3.page3.page3.page3.page3.page3.page3.</p>
      </article>
      <figure class="cbp-so-side cbp-so-side-right">
        <img src="images/3.png" alt="img01">
      </figure>
    </section>
    </div>
</div>

 

JavaScriptは以下の一行のみ。

new cbpScroller( document.getElementById( 'cbp-so-scroller' ) );

 

するとこのように作ることが出来ました。リンク先より一式ダウンロードして作ったので、デザインもDemoと同じですが。

On-Scroll-Effect-demo-3

 

少しスクロールさせるとこのようににょきっとスライドインしてきました。

On-Scroll-Effect-demo-4

 

フルスクリーンデザインにこういったアニメーションをつけるのが流行っていますね。僕も一度試してみたいです。スタイルを変更するにはdemo.cssを編集してください。でもこの感じで十分オシャレ。参考にどうぞ。

 

Home > JavaScript > フルスクリーンデザインにぴったりなスライドアニメーション「On Scroll Effect」

Return to page top