luxy.js

JavaScript

優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実装できるプラグインです。Vanilla.jsが使用されています。エレガントな雰囲気を感じさせる慣性スクロールとダイナミックな視差効果の組み合わせがとても素敵ですね。

luxy.js

デモ

デモでは画面をスクロールすると慣性スクロールとパララックスエフェクトの両方を確認できます。スクロールして指を離した後でも急にとまることなく慣性が働くので、とても優雅な印象になります。

また、画面の横幅いっぱいに広がった美しい背景画像に生じるパララックスエフェクトがダイナミックで見る人を魅了しますね。

ラグジュアリーで高級感あふれるサイトなどには、ピッタリなプラグインになるのではないでしょうか?

使い方・マークアップもシンプルに記述できるので、その点に関してもうれしい仕様です。HTMLタグにはdata属性も加えることができ、値を調節することでカスタマイズもできます。主なdata属性は、data-speed-x、data-speed-y、data-offset、data-horizontalです。また、オプションにはwrapper、targets、wrapperSpeedといった項目が用意されています。各オプションのデフォルト値は、wrapperが’#luxy’、targetsが’.luxy-el’、wrapperSpeedが0.08です。

luxy.js

関連記事

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

    JavaScript

    jQueryでアニメーションを遅らせるにはdelayを使えばいいらしい

    ちょっとしたメモです。jQueryでanimateをメソッドチェーンで…

  2. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  3. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  4. Simple Image Panner and Zoomer
  5. jQuery Social Share Bar
  6. PIGNOSE-ParallaxSlider

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP