[JS]スムーズなアニメーションで横スクロールコンテンツを作成するスクリプト -X-Rhyme.js

サイト構築 -JavaScript

Post on:2011年6月2日

sponsorsr

水平方向に長いコンテンツをスムーズなアニメーションで横スクロールさせるjQueryのプラグインを紹介します。

X-Rhyme.js

[ad#ad-2]

デモページが少し分かりにくいのですが、左に配置された四つの矩形がナビゲーションで、そこをクリックすると、コンテンツを横スクロールで表示します。

デモページ：「Work」をクリックしたキャプチャ

横スクロールの操作は、マウスホイールにも対応しています。

JavaSciprt

スクリプトのオプションでは、ナビゲーションのセレクタ、スクロール時のスピード・アニメーションを変更することができます。

    $('.horizontal_items_container').xrhyme({
        navigationSelector : '.anchor a',
        anchorMode : true,
        wheelSpeed : 0.7,
        animationTime : 777,
        easing : 'easeOutExpo',
        animeComplete : function(){
            //custom function
        }
    });

スクリプトのダウンロードは、下記ページよりどうぞ。