ダイナミックなアニメーションがかっこいい、フルスクリーン対応のスライダーを実装するチュートリアル

パネルに切り込みをいれ、垂直・水平方向にダイナミックにスライドするフルスクリーンで楽しめるスライダーをjQueryとCSS3で実装するチュートリアルを紹介します。

Fullscreen Slit Slider with jQuery and CSS3

[ad#ad-2]

• デモ
• 実装

デモ

デモはいつものようにIE以外の、Firefox, Chrome, Safari, Operaでご覧ください。

デモページ

[ad#ad-2]

サイドのアローをクリックすると、その大胆なスライドのアニメーションが楽しめます。

アニメーションの種類は2つあり、上が垂直に分割し、下が水平に分割しているキャプチャです。
各パネルに配置された画像や見出しなどがそれぞれ異なるアニメーションで表示されるのもいいですね。

実装

実装方法はポイントを説明します。

HTML

各パネルは「sl-slide」のclassを持ったdiv要素で実装されており、カラーは「sl-slide-dark」で管理されています。

<section id="sl-slider" class="sl-slider">
 
    <div class="sl-slide">
        <div class="sl-deco" data-icon="6"></div>
        <h2>A bene placito</h2>
        <blockquote>
            <p>You have just dined, and however scrupulously
            the slaughterhouse is concealed in the graceful
            distance of miles, there is complicity.
            </p>
            <cite>Ralph Waldo Emerson</cite>
        </blockquote>
    </div>
 
    <div class="sl-slide sl-slide-dark">
        <!-- ... -->
    </div>
 
    <!-- ... -->
 
</section>

アニメーションはHTML5のdata属性を使います。
各div要素にスライドの方向・角度・サイズなどを設定します。

<div class="sl-slide"
 data-orientation="horizontal"
 data-cut1-rotation="-25"
 data-cut2-rotation="-25"
 data-cut1-scale="2"
 data-cut2-scale="2"
>

JavaScript

スクリプトはjQueryと2つのプラグインを使用します。

• jQuery cond

  条件付きのロジックを強化するプラグイン。

• jQuery Transit

  CSS3アニメーションをよりスムーズに簡単にする実装するプラグイン。

元記事には、スクリプトの使い方やスタイルシートは詳しい説明があり、全ファイルも一式でダウンロードできます。