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. bcralnit.js
  2. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  3. gridscrolling.js
  4. jqueryIntroLoader
  5. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  6. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP