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. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  2. pixelate.js
  3. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  4. no-image
  5. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  6. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP