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. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  2. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  3. no-image
  4. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  5. JavaScript

    とても簡単で軽量なjQueryスライダー「jQuery Slider²」を使ってみる

    とても簡単かつ軽量なjQueryのスライダー「jQuery Slide…

  6. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP