basicScroll

JavaScript

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

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

basicScroll

デモ

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

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

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

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

basicScroll

関連記事

  1. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  2. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  3. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  4. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  5. Woco Accordion jQuery plugin
  6. Responsive Sidebar Navigation

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP