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

hummingbird-popover高速・軽量なコンテキストメニュー実装「hummingbird-popover」前のページ

スワイプでのスライドもできるシンプルなスライダー「jquery-slide」次のページno-image

関連記事

  1. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  2. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  3. NO IMAGE

    JavaScript

    フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

    Prrple Sliderはフェードアニメーションやスライド、ループ、…

  4. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  5. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

  6. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP