2014/04/14
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」
ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミス
-
-
これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+
海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと
-
-
タイポグラフィ/WEBフォントに関する作業を簡単にするツール14
WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い
-
-
もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」
ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を
-
-
2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50
2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ
-
-
スクロールした位置についてくるStickyプラグイン15
スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ
-
-
よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル
初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム
-
-
信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」
CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。
-
-
CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51
CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、
-
-
コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25
海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ