スマホでもパララックスを実装してみよう

2022.1.16 更新

皆さまごきげんよう!

さて、本日はスマートフォンでのパララックス(視差)的な動きを、cssを使って演出してみようと思います。

前回、パララックスを簡単に実装できるskrollrというjsライブラリを使って、シングルページを作ってみたのですが、PCでは思い通りのパララックスが表現出来るものの、skrollrはスマホに対応していなかったため、スマホで見ることが出来ませんでした。

●以前の記事、skrollrでパララックスのランディングページを作ってみよう〜追記あり〜

そこで、今回はskrollrを使わずにスマホでパララックスを実装してみようと思います。

前回記事の続編となりますので、ざっと目を通しておいていただきますとより解りやすいと思います。

また、元になるhtmlとcssファイルは、前回の「skrollrでパララックスのランディングページ」で使ったものをskrollr用の記述だけを外して使用しました。

スマホで背景画像を固定する

スマホではなぜかcssのbackground-attachment: fixed;が効かないため、背景を固定するといったパララックス的な動きが出せません。

しかもbackground-size: cover;もPCでは問題無く表示されるのに、スマホで見るとなぜか拡大されてしまい画像がきちんと表示されません。

そこで、今回は背景画像が置いてある「div class=”section1″」に擬似要素::beforeを使い、その疑似要素のpositionをfixedにする、という方法で対処しました。

具体的にはbackground-attachment: fixed;の代わりにposition: fixed;と指定して、z-index: -1;で画像をコンテンツの背後に置く、といった感じです。


.section1 {
 height: 100vh;
 padding:10% 0;
}

.section1::before{
 background: url("../img/008-s.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 /*background-attachment: fixed;*/
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 10% 0;
 content: "";
 z-index: -1;
}

メディアクエリでPC用の記述もしておきます。


@media screen and (min-width: 980px) {
 /*980px以上用(PC用)の記述 */
.section1 {
 background: url("../img/008.jpg") no-repeat fixed center center /cover;
 padding: 10% 0;
}

背景画像にパースペクティブ感を出す

前回の「skrollrでパララックスのランディングページ」ではsection1、section3に置いた画像に対してtransform: scaleで画像が微妙に遠ざかっていく感じを出しましが、これを今回はsection3にcssアニメーションで表現してみました。(スマホではfixedした背景画像が一枚しか見えないため、このアニメはPCでご覧下さいませ)


.section3 {
 background: url("../img/006.jpg") no-repeat fixed center center /cover;
 -webkit-animation: bg_anime1 20s -2s infinite linear alternate;
 animation: bg_anime1 20s -2s infinite linear alternate;
}

@-webkit-keyframes bg_anime1 {
 0% {-webkit-transform: scale(1) ;}
 100% {-webkit-transform: scale(1.1) ;}
}

@keyframes bg_anime1 {
 0% {transform: scale(1) ;}
 100% {transform: scale(1.1) ;}
}
}

スマホ対応パララックスのソース

スマホ対応パララックス完成!

skrollrを使った時のように文字やアイコンまで動きは付けられませんが、「スマホでもパララックス風」な背景を固定させることが出来ました。背景画像が1枚だけでしたらこの方法で出来ると思います。

他にもcssだけで出来るこんな方法もありますのでぜひご覧ください。

position: sticky;がスクロールで要素を固定するのに便利過ぎた件

html


<!DOCTYPE html>
<html lang="ja">
 <head>
	<title>LandingPage</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/style_2.css">
  <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="icomoon/style.css">
 </head>

 <body>
  <div>
   <div class="section1">
    <h1>VIEW FROM<br>A DIFFERENT ANGLE</h1>
    <p class="words">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, tempora voluptatum porro. Harum odio, sapiente dicta.</p>
    <p class="kigou">▽</p>
   </div>

   <div class="section2"><!-- メニュー -->
    <ul>
     <li class="nav"><a href="">about us</a></li>
      <p>Morbi aliquet enim nisi, vel sollicitudin dui vulputate a. Sed interdum volutpat tortor id feugiat. Donec condimentum malesuada diam, et sodales elit accumsan quis.</p>
     <li class="nav"><a href="">members</a></li>
      <p>Mauris cursus tellus nec condimentum aliquam. Vivamus varius pretium ullamcorper. Phasellus odio neque, imperdiet pulvinar euismod id, tempor id metus.</p>
     <li class="nav"><a href="">blog</a></li>
      <p>Proin eu enim vitae magna tempor maximus vitae sit amet velit. Donec id felis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
     <li class="nav"><a href="">gallery</a></li>
      <p>Nullam nibh velit, sagittis a semper et, faucibus eu odio. Maecenas commodo suscipit leo sed vestibulum. In ultrices cursus tincidunt. Sed laoreet leo lacus, sit amet vestibulum dolor tristique vel. </p>
    </ul>
   </div>

   <div class="section3"><!-- 画像 -->
    <h2>Section3</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis tristique risus nec ornare. Praesent et justo et ipsum fermentum dignissim vel eget odio. Aliquam feugiat ornare neque non pellentesque. Fusce accumsan, sem et lobortis commodo, lacus enim rutrum tellus, et iaculis augue tortor a mi. Nullam id aliquet elit, at luctus justo. Aliquam cursus, arcu sed sagittis tincidunt, lacus mauris malesuada justo, eu dapibus risus mi vitae elit.</p>
    <p>Praesent congue tincidunt sagittis. In vestibulum sodales enim, sit amet lobortis risus ornare sit amet. Ut sed augue lacus. In hac habitasse platea dictumst. Donec rutrum auctor nisi, vel finibus diam congue ut. Aliquam vel gravida nulla. Sed finibus gravida tincidunt. Suspendisse in neque sodales, rutrum massa ut, gravida mauris. Vivamus erat libero, consectetur ac blandit sit amet, tempor tincidunt tortor.</p>
    <p></p>
   </div>

   <div class="section4"><!-- ソーシャルボタン -->
    <h2>contact</h2>
    <p>Proin eu enim vitae magna tempor maximus vitae sit amet velit. Donec id felis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <br>
    <p class="follow">follow us</p>
    <ul class="web-logo-font">
     <li class="twitter-btn-icon">
      <a href="#" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a>
     </li>
     <li class="facebook-btn-icon">
      <a href="#" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a>
     </li>
     <li class="google-plus-btn-icon">
      <a href="#" class="google-plus-btn-icon-link"><span class="icon-googleplus"></span></a>
     </li>
     <li class="line-btn-icon">
      <a href="#" class="line-btn-icon-link"><span class="icon-line"></span></a>
     </li>
    </ul>
   </div>
  </div>
 </body>
</html>

css


html, body {
 height: 100%;
}

body {
 position:relative;
 margin: 0;
 padding: 0;
 height:100%;
 text-align: center;
 overflow-y: scroll;
 overflow-x: hidden;
 text-shadow:0.02em 0.02em 0.02em #777;
}

div{
 margin:0;
 color:#fff;
 letter-spacing: 0.2em;
 text-align: center;
 width:100%;
 min-height:45em;
 padding:0;
}

h1{
 margin:0;
 font: 4em bold;
 padding:2em 0;
}

h2{
 margin:0;
 font: 3em bold;
 padding: 1.5em;
}

a, a:visited {
 color: #fff; text-decoration: none;
}

a:hover {
 color: #ec5637;
}

p{
 margin:0 20%;
 padding:4% 0;
 font-weight: normal;
}

.kigou{
 font-size: 2em;
 margin: 0;
 padding:1em;
}

ul{
 margin:0;
 padding:0;
}

.nav{
 font: 3em bold;
 list-style: none;
 color:#444;
}

.section1 {
 height: 100vh;
 padding:10% 0;
}

.section1::before{
 background: url("../img/008-s.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 /*background-attachment: fixed;*/
 background-size: cover;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 padding: 10% 0;
 content: "";
 z-index: -1;
}

.section2 {
 background: #222;
 padding:10% 0;
}

.section4 {
 background:#222;
 padding: 10% 0 20%;
}

.follow{
 font-size: 1.5em;
}

ul.web-logo-font {
 margin:0 auto;
 padding-left: 0;
 padding-top: 1em;
 font-family: sans-serif;
}

ul.web-logo-font li {
 display:inline;
 list-style-type: none;
 margin-right: 5px;
 padding-right: 5px;
}

ul.web-logo-font li a{
 font-size: 5em;
 text-decoration: none;
 color: #fff;
 padding: 7px;
 border-radius: 5px;
}

ul.web-logo-font li a:hover{
 opacity: 0.6;
}

/*背景色などの設定*/
ul.web-logo-font a.twitter-btn-icon-link{
 background-color:#55ACEE;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.facebook-btn-icon-link{
 background-color:#3C5A99;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.google-plus-btn-icon-link{
 background-color:#DD4B39;
 padding:0.1em 0 0 0.1em;
}
ul.web-logo-font a.line-btn-icon-link{
 background-color:#00C300;
 padding:0.1em 0 0 0.1em;
}


@media screen and (min-width: 980px) {
 /*980px以上用(PC用)の記述 */
.section1 {
 background: url("../img/008.jpg") no-repeat fixed center center /cover;
 padding: 10% 0;
}
.section3 {
 background: url("../img/006.jpg") no-repeat fixed center center /cover;
 -webkit-animation: bg_anime1 20s -2s infinite linear alternate;
 animation: bg_anime1 20s -2s infinite linear alternate;
}

@-webkit-keyframes bg_anime1 {
 0% {-webkit-transform: scale(1) ;}
 100% {-webkit-transform: scale(1.1) ;}
}

@keyframes bg_anime1 {
 0% {transform: scale(1) ;}
 100% {transform: scale(1.1) ;}
}
}

@media screen and (max-width: 768px) {
 /* 768px以下用(タブレット) */
 div{
  min-height:35em;
  }
}

@media screen and (max-width: 479px) {
 /* 479px以下用(スマホ) */
 div{
  min-height:20em;
  }
 h1{
  font-size: 2em;
 }
 h2{
  font-size: 2em;
 }
 ul{
 padding:20% 0;
 }
 .nav{
 font-size: 2.5em;
 }
 .section4{
 padding-top: 3em;
 }
 ul.web-logo-font li a{
 font-size:3em;
 }
 .kigou{
 font-size: 1.8em;
 margin: 0;
 padding:0.5em;
}
.words{
 margin-top: -1.5em;
}
}

雑談

お仕事や勉強をしている時など、集中力を高めるのにホワイトノイズがいいらしい、ということで使ってみて良かったアプリをひとつご紹介します。noisliです。アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるのも良いですよ。ぜひお試しあれ♪

コメントを残す