bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptパララックス効果で視差の背景を演出してくれる「parallax-background.js」JavaScript2017.05.11パララックス効果で視差の背景を演出してくれる「parallax-background.js」parallax-background.jsは、単純な視差の背景をサイトへ演出してくれるjQueryプラグインです。サイトをスクロールすると、背景画像に美しく滑らかな視差を演出します。本プラグイン名にもあるように、パララックス効果をサイトへ構築するためのものになります。パララックスとは、複数の視覚要素を異なるスピードで動かすことで視差を生み出し、立体感や奥行きを演出する手法のことです。スクロールなどのユーザーの動作に応じて動作します。一時期は非常に注目され、最近では様々なサイトで見かける手法です。この手法はバグの発生も少なくなく、思い通りの演出を生み出すには非常に多くの構想と導入への時間を要します。そこで、単純な視差を生み出すのに適した本プラグインをご紹介します。それでは、parallax-background.jsについて詳しく見ていきましょう。parallax-background.js以下のページからparallax-background.jsのデモをチェックできます。デモでは、parallax-background.jsの導入からご紹介します。Transformsプロパティを使用します。プラグイン配布サイトで、ファイルをダウンロードしたらドキュメントに下記のように読み込ませます。jQueryは最新のものを読み込みましょう。2017年4月現在の最新はVer.3.2.1です。src="/path/to/parallax-background.min.js"></script>次に、要素に視差効果を簡単に追加するには、<script>タグ間に次の行を追加します。script>ここまでで、背景にサイドに動く視差効果が発生します。オプションもいくつか追加できます。オプションは、JavaScriptのデータ属性を介して追加することができます。視差効果が実行されるスピードや、効果の方向を上下左右で指定することもできます。追加する際はいくつか注意事項がありますので、デモサイトまたはプラグインの配布サイトで確認してから追加してください。詳細とダウンロードは以下からどうぞ。複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「...JavaScriptツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。先日もこの症状が生じてし...2020.02.15ハンドル付きのノートPC用インナーバッグ「エレコム...エレコムから出し入れしやすいハンドル付きのノートPC用インナーバッグが登場しまし...2020.02.14白銀の千秋公園スタバをあとにして朝の散歩をするために千秋公園へと向かった。今シーズンはいままで...2020.02.13日常の休日。スタバで温かいドリップを久しぶりの秋田のスタバ。いっても元旦以来だから約1カ月ぶりか。