basicScroll

JavaScript

モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

basicScrollはモバイル・デスクトップに対応したスタンドアローンによるパララックススクロールを実装できます。CSSの変数を使用するとのことで、スクロール位置に応じてCSSの変数を変更できるのが特徴です。

basicScroll

デモ

デモでは上下にスクロールすることで、グラデーションカラーの正方形がコロコロと回転していくアニメーションを見ることが可能です。スクロールの位置に応じてCSSの変数を変更できるので、このような動きも可能になっています。

画像を使わなくてもCSSやJSを用いることでこのような楽しいパララックススクロールを実装できるのはとても便利ですね。

APIには.create(html, opts)、.start()、.stop()、.update()、.calculate()、.isActive()、.getData()が用意されています。また、スタートとストップの位置を指定できたりコールバック関数を設定できたり、カスタマイズ性も高くなっています。

モバイルとデスクトップに対応したスタンドアローンによるパララックススクロールを取り入れたい人は、ぜひ「basicScroll」を使われてみてはいかがですか?

basicScroll

no-imageシンプルでスタイリッシュなjQueryスライダー「Simple slider」前のページ

多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」次のページno-image

関連記事

  1. SweetModal

    JavaScript

    シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」

    SweetModalは、アラートやダイアログなどをシンプルでエレガント…

  2. Tabulous.js

    JavaScript

    色々なエフェクトのタブパネルが実装できるjQueryプラグイン「Tabulous.js」

    素敵なタブパネルがあったのでメモがてらご紹介します。オプションを指定す…

  3. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  5. Scroll Indicator

    JavaScript

    シンプルなスクロールインジケーターを実装できる「Scroll Indicator」

    Scroll Indicatorは、スクロールによるアニメーションでコ…

最近の記事

  1. Anker Bolder LC30
  2. BG-R10
  3. EOS R6

アーカイブ

PAGE TOP