syncscroll

JavaScript

2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

syncscrollは2つ以上のスクロールエリアを同時にスクロールできるJSライブラリです。軽量で使い方もシンプルなところがいいですね。片方をスクロールした時に、もう片方を同時にスクロールさせたい時に便利です。

syncscroll

デモ

3つのテキストで書かれたエリアを同時にスクロールさせたり、2つの地図を並べて同時に動かせたりと、応用次第でいろいろと活用できますね。

使い方は、syncscrollのファイルを読み込んだ状態で、このようにマークアップするだけです。

<div class=syncscroll name=myElements>
    sample text
</div>

<div class=syncscroll name=myElements>
    sample text
</div>

クラス名にsyncscrollを付与し、name属性を同じ値にすればOKです。

syncscroll

roundSlider値の範囲を円形スライダーで表示できる「roundSlider」前のページ

スクロールに連動するプログレスバーを実装できる「Scrollgress」次のページScrollgress

関連記事

  1. jQuery Navobile
  2. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

  3. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  4. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  5. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  6. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP