【Labs】CSSだけでパララックスレイアウト

12月更新・前月(11月)の人気記事トップ10 12/07/2023

【Labs】レスポンシブデザイン WordPressテーマ【Labs】ホイールの回転で要素間を移動するパララックスレイアウト

【Labs】CSSだけでパララックスレイアウト

Posted on 2014-05-20
Last updated on 2017-03-09

こんにちは（・∀・）

今回はCSSだけで実現できるパララックスレイアウトのサンプルをご紹介したいと思います。コンテンツの長さが要素ごとに違っても可変しますのでレイアウトに柔軟です。

スマホサイトにも対応したレスポンシブデザインですが、スマホサイトでは背景画像は固定しないためパララックスではなくなります。

サンプル

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【サンプルデモ】CSSだけでパララックスレイアウト - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div id="wrapper">
<h1 id="toplogo"><a href="/"><img src="/common/img/logo.png" alt="Webデザインラボ"></a></h1>
<article id="contents1">
<section>
<div>
<h2>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
</section>
</article>
<article id="contents2">
<section>
<h3>2. Suspendisse ac risus placerat, consequat erat eget, varius ligula</h3>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacinia tellus. Donec tristique dui at enim rutrum, a venenatis augue feugiat. Curabitur eu faucibus magna. Suspendisse ac risus placerat, consequat erat eget, varius ligula. Nullam eu condimentum justo. Vestibulum laoreet enim et pulvinar condimentum. Fusce ac commodo orci.</p>
</section>
</article>
<article id="contents3">
<section>
<div>
<h2>3. Sed turpis elit, malesuada vitae orci eget, rutrum fringilla ipsum</h2>
</div>
</section>
</article>
<article id="contents4">
<section>
<h3>4. Aliquam gravida malesuada lobortis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin, quam sit amet varius ullamcorper, dui quam molestie lectus, nec ultrices purus felis tempus eros. Quisque lectus purus, tempor nec sem vel, placerat fermentum dui. Aliquam gravida malesuada lobortis. Nullam nec lectus id nisi ultrices maximus in id arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque pellentesque ornare dictum. Praesent vitae justo nec sapien rhoncus porttitor at a sapien. Duis eros sapien, feugiat eu mi ac, blandit consequat lorem. Donec at urna convallis, tempor ligula et, cursus elit. Proin euismod, felis porta gravida pharetra, ligula tellus gravida turpis, sed pellentesque libero eros eget purus. Pellentesque sed sodales metus. Nullam erat tellus, porttitor vel metus non, congue iaculis leo.</p>
</section>
</article>
<article id="contents5">
<section>
<div>
<h2>5. Duis eros sapien, feugiat eu mi ac, blandit consequat lorem</h2>
</div>
</section>
</article>
<article id="contents6">
<section>
<h3>6. Fusce nec tortor semper, interdum lacus eu, blandit purus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus porttitor libero, eget blandit purus congue molestie. Phasellus sodales, metus id rhoncus ullamcorper, justo elit facilisis justo, quis convallis massa metus nec massa. Nunc et augue efficitur, vulputate diam eu, egestas nunc. Vivamus interdum consectetur magna, ac bibendum lacus ullamcorper non. Fusce euismod sem ut ullamcorper posuere. Maecenas sed mattis lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pretium vitae leo malesuada fermentum. Fusce nec tortor semper, interdum lacus eu, blandit purus. Sed tristique finibus velit, sed venenatis dolor ultrices ac. Nulla sed ex at est condimentum consequat. Sed suscipit lobortis mauris, sed varius tellus. Suspendisse placerat orci augue, nec pharetra nunc euismod eget.</p>
</section>
</article>
<article id="contents7">
<section>
<div>
<h2>7. Aenean elementum lorem sed nibh euismod consequat</h2>
</div>
</section>
<div id="copyright">&copy;WEB DESIGN LAB<!--copyright--></div>
</article>
<!--wrapper--></div>
</body>
</html>

CSS


html,bocy {
  height: 100%;
}
#wrapper h1 {
  position: fixed;
  width: 100%;
  z-index: 100;
  background: #777;
  text-align: center;	
  opacity: 0.9;
}
#wrapper article {
  min-height: 100vh;
  height: 100%;
}
#wrapper article section {
  background: rgba(51, 51, 51, 0.5);
  min-height: 100vh;
  height: 100%;
  padding: 60px 12px 60px 5px;
}
#wrapper article section div {
  position: relative;
  height: 100vh;
}
#wrapper article section div h2 {
  position: relative;
  top: 40%;
  transform: translateY(-40%);
  color: #fff;
  font-size: 24px;
  text-align: center;
}
#wrapper article section h3 {
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}
#wrapper #contents1 {
  background: url(img/bg1.jpg) no-repeat 50% 0;
  background-size: auto 100%;
}
#wrapper #contents2 {
  background: #777;
}
#wrapper #contents3 {
  background: url(img/bg3.jpg) no-repeat 50% 0;
  background-size: auto 100%;
}
#wrapper #contents4 {
  background: #777;
}
#wrapper #contents5 {
  background: url(img/bg5.jpg) no-repeat 50% 0;
  background-size: auto 100%;
}
#wrapper #contents6 {
  background: #777;
}
#wrapper #contents7 {
  background: url(img/bg7.jpg) no-repeat 50% 0;
  background-size: auto 100%;
}

@media (min-width: 768px) {
#wrapper article section div h2 {
  font-size: 34px;
}
#wrapper #contents1 {
  background: url(img/bg1.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#wrapper #contents3 {
  background: url(img/bg3.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#wrapper #contents5 {
  background: url(img/bg5.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
#wrapper #contents7 {
  background: url(img/bg7.jpg) no-repeat 50% 0 fixed;
  background-size: cover;
}
/* ** */}

Result

サンプルデモ
スマホでのご確認はこちら
QRコード

使用している背景画像のサイズは1600x1064pxです。

いかがでしたでしょうか、jQueryを使わずにCSSだけでパララックスレイアウトを実現することは難しくありません。このCSSだけで出来るパララックスレイアウトは、すごくシンプルな作りですが印象深いデザインのWebサイトを簡単に作成することができますのでオススメです。

12月更新・前月(11月)の人気記事トップ10 12/07/2023

【Labs】CSSだけでパララックスレイアウト

サンプル

HTML

CSS

Result

関連リンク