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

皆さまごきげんよう!梅雨も明けいよいよ夏本番、いかがお過ごしでしょうか?

皆さまも、部屋でお仕事や勉強をしている時にBGMをかけたりすると思うのですが、集中力を高めるのにホワイトノイズがいいらしい、ということで私、久々に使ってみて良かったのがこちら、noisliです。説明するまでもないですが、アイコンをクリックして表示されるバーを動かして音量調節します。直感的に操作できるシンプルさと、自分で好きなように音をミックスできるところがいいんです。聞いているだけで心落ち着きますし、ほんとお勧めです。ぜひお試しあれ♪

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

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

●以前の記事、skrollrでパララックスのランディングページを作ってみよう〜追記あり〜こちらの続編となりますので、ざっと目を通しておいていただきますとよりわかりやすいと思います。

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

スマホではbackground-attachmentが効かない?

スマホではなぜか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枚だけでしたらこの方法で出来ると思います。

しかしデモでは本来、PC用ではsection1とsection3に違う画像を配置してあり、スマホでも全く同じように見せることは出来ていません。画像を表示したい位置をjavascriptで取得する、という方法がありそうですが、スマホで複数の背景画像をパララックスさせるには、私がもう少し勉強する必要があるようです(^^;A

他にもこんな方法があるよ!と良いアイデアをお持ちの方、いらっしゃいましたらぜひご教授下さいませ!コメントいつでもお待ちしております(^^)ゞ

ソース

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;
}
}

コメントを残す