2014/04/14
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
![](https://co-jin.net/wp-content/uploads/2014/04/Simple-Page-Scrolling-Effect.jpg)
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。
パララックス効果はトレンドから、当たり前に見られるエフェクトになってきましたね。
今回ご紹介するのは、JSを一切利用せず、CSSだけで実装しています。
すごい簡単ですので、手軽に利用できると思いますよ。
凝ったパララックスは不要だけど、簡単なところだけ、実装したいという方にはオススメかもしれません。
ご参考になれれば幸いです。
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
今回のデモでは、シングルページでトップの画面が固定されて、その画像の上をコンテンツがパララックスするという形です。
DEMO
HTMLを記述
早速マークアップから。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</title> <style> /*Styles 今回は、ここにCSSを記述します。*/ </style> </head> <body> <div class="image"> <h2>JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法</h2> </div> <section class="content"> <!--ここにコンテンツが入ります--> </section> </body> </html> |
CSSを記述
CSSもシンプルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
body { margin:0; padding:0; border:0; } .image { background: url('images/tumblr_n381qgQRTS1st5lhmo1_1280.jpg') no-repeat fixed; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 500px; } h2 { color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 60px; text-align:center; font-weight: bold; letter-spacing: -1px; margin: 0 auto; width: 800px; position: fixed; top: 30%; left: 50%; margin-top: -200px; margin-left: -400px; opacity:0.8; } .content { width: 100%; max-width: 750px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; z-index: 2; background: #FFF; width: 100%; } p { font-family: Georgia, Times, "Times New Roman", serif; font-size: 22px; line-height: 40px; margin: 30px 0; } |
ポイントは、.image に、backgroundimageをセットして固定にします。
そして、高さをmin-heightに設定します。
これでスクロールエフェクトが得られます。
画像の上にテキストをセンター表示で載せていますが、これはマージンとfixedで実装しています。
詳しいテクニックはQuick CSS Trick: How To Center an Object Exactly In The Centerをどうぞ。
簡単ですね。
ここまでは、Super Simple Page Scrolling Effect Without JavaScript | Pencil Scoopを参考にしました。
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン
-
-
WordPressにベストな格安レンタルサーバーはこれです!
WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr
-
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
-
-
全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121
2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン
-
-
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」
CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
-
-
画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」
CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる
-
-
WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」
WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code
-
-
WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」
流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ