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. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

  2. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  3. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  4. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  5. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

  6. jCider

    JavaScript

    レスポンシブ対応のjQueryカルーセルプラグイン実装「jCider」

    jCiderはレスポンシブ対応のシンプルなカルーセルを実装できるjQu…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP