2014/04/14
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。
パララックス効果はトレンドから、当たり前に見られるエフェクトになってきましたね。
今回ご紹介するのは、JSを一切利用せず、CSSだけで実装しています。
すごい簡単ですので、手軽に利用できると思いますよ。
凝ったパララックスは不要だけど、簡単なところだけ、実装したいという方にはオススメかもしれません。
ご参考になれれば幸いです。
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
今回のデモでは、シングルページでトップの画面が固定されて、その画像の上をコンテンツがパララックスするという形です。
DEMO
HTMLを記述
早速マークアップから。
<!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>
[/html]
CSSを記述
CSSもシンプルです。
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;
}
[/css]
ポイントは、.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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
激易!YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」
YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて
-
-
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!
CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
よくわかる 初心者のためのCSSアニメーションチュートリアル
初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア
-
-
左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6
CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ
-
-
トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」
トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定
-
-
HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」
HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール
-
-
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊
-
-
レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」
Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは
-
-
アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+
CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお
