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. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  2. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  3. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  4. suitabs

    JavaScript

    横や縦にスライドできるスライドショー&タブ実装のjQueryプラグイン「suitabs」

    suitabsはスライドショー&タブを実装することができるjQuery…

  5. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  6. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP