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」をチェックしてみてはいかがでしょうか? 視差効果があることで、ユーザーの視線も引きつけやすくなりそうですね。

no-imageセレクトボックスをシンプルに見やすくしてくれる「jQuery Styled Select Box」前のページ

タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」次のページno-image

関連記事

  1. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  2. jQuery Glow
  3. jQuery Floating Social Share
  4. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  5. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  6. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP