個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

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

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。
パララックス効果はトレンドから、当たり前に見られるエフェクトになってきましたね。
今回ご紹介するのは、JSを一切利用せず、CSSだけで実装しています。
すごい簡単ですので、手軽に利用できると思いますよ。
凝ったパララックスは不要だけど、簡単なところだけ、実装したいという方にはオススメかもしれません。
ご参考になれれば幸いです。

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

今回のデモでは、シングルページでトップの画面が固定されて、その画像の上をコンテンツがパララックスするという形です。
DEMO

HTMLを記述

早速マークアップから。

[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もシンプルです。

[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を参考にしました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

jQueryベストプラグイン2014 使えるプラグイン50選をご紹介

2014年に登場したベストなjQueryプラグインを50個ご紹介します。 レイアウト系のプラグイン

記事を読む

ブラウザの閲覧履歴をファビコンで一覧表示するChrome機能拡張

もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」

ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を

記事を読む

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方をご紹介

無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方

Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで

記事を読む

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

アイコンはCSSの時代へ!?こんなにある無料のCSSアイコン500+

CSSだけ作られたアイコン(ピュアアイコン)をご紹介します。 アイコン制作手法も様変わりを見せてお

記事を読む

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションだけが90以上!ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」

ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し

記事を読む