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

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  2. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  3. fullPage.js

    JavaScript

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

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

  4. jquery.horizonScroll.js
  5. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  6. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP