【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。Tags【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。ONZEhttps://on-ze.com/archives/1947HomeBlog【CSS3】話題のパララックス効果をスクリプト無しで実装する方法。Google昨年、2013年度あたりから普及し始め、今年も大流行したウェブデザインのテクニックの1つである[パララックス・スクロール]をCSS3だけで実装する方法を紹介します。パララックス(Parallax)とは日本語に訳すと「視差効果」を意味し、主にマウスの動きに合わせて特定の要素のスクロール量をコントロールして、ウェブサイトに奥行きや遠近感を表現する手法です。「パララックス・スクロール」の他に、「パララックス・デザイン」や「パララックス・エフェクト」とも呼ばれています。動作のサンプルをご覧ください。Chrome、Firefox、Opera等)をお使いの場合、「開発モード」のボタンをチェックするとレイヤーが3D化されるので構造を理解しやすいと思います。このパララックスをjQuery無しで導入するにあたり、キモとなるのがCSS3の「perspective」プロパティと「transform」プロパティです。「perspective」プロパティは、要素に「transform」効果を適用する際に、その奥行きの深さを指定するために設定します。「transform」プロパティでは、値に[translateZ]関数を使うことで、Z軸での距離を指定することができます。文章の説明だけでは難しいので、実際のHTMLとCSSの記述を見てみましょう。Layer</div></section>パララックス効果を適応させたい要素にクラス名で「layer-fore」「layer-base」「layer-back」「layer-deep」を指定しています。続いてCSS側の記述です。scale(3);z-index:1;}親要素となる[#parallax]に[perspective]プロパティとして「-300px」と指定しています。その子要素となる[.layer-force][.layer-base][.layer-back][.layer-deep]には、それぞれ[transform]プロパティで「translateZ(x)」と「scale(x)」を指定しています。この「translateZ(x)」と「scale(x)」で指定した数値がZ軸上での奥行きを生み、視差効果として表現されるワケです。忘れてはいけないのが[z-index]プロパティで、要素の重なり順を指定しておくことも重要です。パララックス効果はjQueryを使うことでも実装できますが、CSS3ならばより簡単に表現することができます。パララックス・スクロール:動作サンプルぜひ導入を検討してみてはいかがでしょうか。TwitterFacebookGoogle+FeedlyLINEこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【CSS3】最新のスタイルシートのテクニック「flexbox」を使ったアコーディオン風のウェブデザイン。【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。文字の太さを調節する。要素にグラデーションを施す方法。