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

2022.1.16 更新

皆さまこんにちは。

本日はskrollr再び!skrollrを使ってペラいちのランディングページを作ってみます。

まずはこちらにDEMOを作ってみましたのでご覧ください。
(※firefoxブラウザではきちんと表示出来ないかもしれません。その際はお手数ですが他のブラウザでお試し下さいませm(_ _)m )

skrollrってなに?

パララックス(視差)効果で立体感のあるページが簡単に作れるJavaScriptライブラリです。スマホにも対応してます。まずはダウンロードしてみよう。

skrollrをダウンロード

skrollrの基本的な使い方は前回の記事をどうぞ。

⚫︎パララックスが簡単に実装出来る!skrollrの使い方
⚫︎skrollrを使ってシングルページのパララックスサイトを作ってみました

スクロールで画像にパースペクティブ感を出す

今回は大きく分けてセクションが4つあります。
そのうちセクション1とセクション3の背景に画像を配置しました。この画像に対し、skrollrの指定をcss3の
transformプロパティのscale()
で、初めに1.1倍に拡大した画像をスクロールと共に1倍になるよう指定し、画像が微妙に遠ざかっていく感じを出しました。

<div class="section1"
   data-bottom-top="transform: scale(1.1,1.1);"
   data-center-bottom="transform: scale(1,1);">

〜2015/08/02 追記〜
上で、スマホにも対応してます、と言っておきながらDEMOがスマホで全く動いてませんでした!すみませんm(__)m

スマホではスクロール中のcssのアニメーションが動かないので、その対策として

bodyの直下に、そのあとのコンテンツ全てを覆うdivをひとつ作ります。
そのdivのidをskrollr-bodyにして下さい。

<body>
<div id="skrollr-body">

こんな感じです。閉じタグもお忘れなく。

下記がhtmlのソースになります。
htmlはシンプルに、bodyの直下に4つのdivで構成しています。

div class=”section1″:背景に画像を配置
div class=”section2″:メニューのページ
div class=”section3″:背景に画像を配置
div class=”section4″:コンタクトページ SNSボタンを配置
(スマホ対策に、これら4つののdivをdiv class=”skrollr-body”で囲みます。)

もっとコンテンツが多い場合はこの要領でsection5、6、7 …と続けて作ってみてください(^^)

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>LandingPage</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.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 id="skrollr-body">
<div class="section1"
   data-bottom-top="transform: scale(1.1,1.1);"
   data-center-bottom="transform: scale(1,1);"><!-- 画像 -->
    <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"
      data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)"><a href="">about us</a></li>
      <p data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)">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"
      data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)"><a href="">members</a></li>
      <p data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)">Mauris cursus tellus nec condimentum aliquam. Vivamus varius pretium ullamcorper. Phasellus odio neque, imperdiet pulvinar euismod id, tempor id metus.</p>
      <li class="nav"
      data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)"><a href="">blog</a></li>
      <p data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)">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"
      data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)"><a href="">gallery</a></li>
      <p data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0%,0)">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"
      data-bottom-top="transform: scale(1.1,1.1);"
      data-center-bottom="transform: scale(1,1);"><!-- 画像 -->
    <h2 data-bottom="opacity:1;"
      data-100-top="opacity:1;"
      data-top="opacity:0;">Section3</h2>
    <p data-bottom="opacity:1;"
      data-100-top="opacity:1;"
      data-top="opacity:0;">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>
    <br>
    <p data-bottom="opacity:1;"
      data-100-top="opacity:1;"
      data-top="opacity:0;">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>
      <br>
      <p data-bottom="opacity:1;"
      data-100-top="opacity:1;"
      data-top="opacity:0;">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>
</div>

<div class="section4"><!-- ソーシャルボタン -->
   <h2>contact</h2>
   <p data-bottom-top="transform:translate(-120%,0)"
      data-center-top="transform:translate(0,0)">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" data-bottom-top="transform:translate(0,180%)"
      data-center-top="transform:translate(0,0)">follow us</p>
<ul class="web-logo-font" data-bottom-top="transform:translate(0,180%)"
      data-center-top="transform:translate(0,0)">
  <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"></a>
  </li>
</ul>

</div>
</div><!-- skrollr-body -->
<script src="js/skrollr.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
      var s = skrollr.init();
  </script>
</body>
</html>

いろんなところに動きを出していますが、skrollrを使うと実に簡単なのです。
簡単すぎてやりすぎないよう、逆に気をつけなければなりませんね(^^;A

スマホの普及でシングルページのサイトが主流になりつつある昨今。skrollrを上手に使って、訪問者を飽きさせない効果を演出できるといいですね。

それではまた次回、ごきげんよう(^^)/

“skrollrでパララックスのランディングページを作ってみよう〜追記あり〜” への4件の返信

  1. デモ拝見させていただきました。
    今までに様々なパララックスサイトを見てきましたが、こちらで紹介されているでものようにシンプルな、微妙な動きのほうが奥行き感が表現できるのだと改めて感じました。お洒落です。

    真似てみました。とてもいい感じです。
    ですが、ひとつ気になったことがあります。私は解決できていないのですが、もしかしたらこのskrollr.jsを使う限りこうなってしまう、ということなのかもしれないと思い、質問させていただきました。

    スマホ、ipad、などでPC表示として表示するとき、ピンチインピンチアウトによる拡大表示ができない、user-scalable=yesが効かない、おそらくこのskrollr.jsがそれをさせないように思えますがいかがでしょう。

    もしそうであれば、何らかの方法でスマホ、ipadで拡大させることが可能でしょうか。

    1. ササキヒロシさん、コメントありがとうございます!コメントを頂けると本当に励みになります。
      このデモは当時PC表示メインで作成したもので、タッチディスプレイのデバイスについてはテストしておらず、作りっぱなしのままでした。
      今や、PCよりスマホやタブレットが主流なのですから、むしろそちらの方を考慮しなければいけませんよね!
      改めて問題点に気づかせて頂き、ありがとうございます。

      早速、タッチデバイスでのピンチイン・ピンチアウトに対応させるよう、改良してみたいと思います。
      解決策が見つかりましたらまたこの場でお返事いたしますので、もうしばらくお時間下さいませ(^^;ゞ

  2. うわ!ご返答ありがとうございます!

    私もこの件、調査中です!

    1. ササキヒロシさん、大変遅くなりましたが、ピンチイン・ピンチアウトについて私の思いつく対策をまとめてみました。

      まずskrollrについてですが、やはりこちらはピンチイン・ピンチアウトには対応していませんでした。参考1
      ですので、skrollrを使わないバージョンを作ってみました。こちらです。
      skrollrで設定したような細かい動きが出せなくなってしまいましたが、これだと私のiphoneで見ますとピンチイン・ピンチアウトが出来ておりました。

      viewportの設定でも出来るようです。参考2

      また、iphoneではほとんどのサイトでピンチイン・ピンチアウトが出来るのですが、私はAndroidは使っておりませんゆえ、詳しくはわからないのですが、Androidスマホの場合、各ブラウザの設定画面で拡大縮小設定を変えるとピンチイン・ピンチアウトが出来るようになるみたいですね。
      ただ、普通はそのような設定が出来ること自体知らなかったり、また調べたりしないと思われますので、やはり、どの機種・どのブラウザで見てもピンチイン・ピンチアウトせずともはじめからテキストや画像が見やすい大きさで表示されるよう、メディアクエリで設定しておくのが一番良いのかなと、今回のご質問を通して思った次第です。ちゃんと回答になっているか心配ですが…(^^;A

      今回のデモについては近々記事にしようと思っておりますので、是非また見に来てやって下さいね(^^)ゞ

コメントを残す