no-image

JavaScript

シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクトを実装できるJavaScript・jQueryプラグインです。画面を上下にスクロールすることで視差効果を演出できるので、サイトがリッチな感じになりますね。

スピードや高さをオプションから設定可能

parlx.js

デモでは各オプションによるセッティングが異なるさまざまなタイプのサンプルが設置されています。どれも画面をスクロールすることで滑らかなパララックスエフェクトを確認できるかと思います。

ちなみにオプションには、speed、height、mobileが用意されており、デフォルト値はそれぞれspeedが0.3、heightが’400px’、mobileがtrueに設定されています。

例えば、デモページにあるCustom speedのところにはスピードが0.3、0、-0.3の3種類のサンプルが用意されています。ほかにもCustom heightでは高さが700pxのものがあったりDisable parallax effect on mobileにはmobileがfalseに設定されたものなどもあります。

シンプルで使い方からカスタマイズまで簡単にパララックスエフェクトを加えることができるので、気になる人はぜひ「parlx.js」をチェックしてみてはいかがでしょうか? 視差効果があることで、ユーザーの視線も引きつけやすくなりそうですね。

関連記事

  1. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  2. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  3. Add To Cart Interaction
  4. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  5. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP