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. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  2. no-image
  3. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  4. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  5. Choreographer-js

    JavaScript

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

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

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP