パララックスが簡単に実装出来る!skrollrの使い方

お久しぶりでございます。
年初に今年は”アウトプット宣言”しておきながら、長らく更新STOPしてしまいました。
というのも、記事を書こうとするといつもこう、ヤツにPCを占拠されてしまう有様でどうにもこうにも…
というのはただのいい訳です。もう少し更新頻度上げてく様頑張らねば(^^;

さて、今日はパララックス(視差効果)が簡単に実装出来る、skrollrの使い方をやってみたいと思います。

デモを作ってみましたので、こちらをご覧下さい。

まずGitHubからskrollr.jsをダウンロードします。
html側にはskrollr.min.jsファイルjqueryを読み込ませます。
下のコードをhtmlのどこかにペースト、以上です。簡単ですね!

<script src="js/skrollr.min.js"></script>
  <script>
      var s = skrollr.init();
  </script>

デモではほぼ全てのdivにdata属性をつけて動かしています。
ポイントは…

  1. data-○○=”ここに普通にcssを書けばよい”
  2. 色はrgb(a)かhsl(a)で指定する。
  3. 単位を揃える。%とかpxとかを混ぜて使わない。
  4. ベンダプレフィックスは必要なし。
  5. skrollrにはmodeが二つあって、[absolute mode] とは、スクロール量で変化させるモード。
  6. [relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。


私は6.の[relative mode]のdata-anchor-targetの使い方に最初つまずきました。
簡単に言うと、
要素Aが現れたら要素Bがアクションを起こす。としたい場合、
要素Aにidを付けておいて、要素Bにdata-anchor-target=”#要素Aにつけたid名”を記述し、起こしたいアクションを続けて記述する。これだけのことでした。

skrollrの使い方については、りんごの勉強会でも何度かテーマに取り上げていまして、倶楽部りんごのサイトにジェイ子さんがとっても詳しくわかりやすい記事ををUPして下さったので、こちらも併せてご覧下さい。というかむしろこっちを読むんだ(笑)ジェイ子さん、丁寧な解説ありがとうございます!
●パララックスにしよう!! skrollrの実装方法
●skrollr.jsで背景をパララックスしてみた

最後にデモのソースです。data量を変えたり、数値やCSSを変えたりして動きを試してみて下さい(^^)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>skrollr</title>
  <style>
    body{
      font-family: serif;
      color: #555;
      overflow-x:hidden;
    }

   #bg1 {
     background: url(img/dot-2.png) repeat 0 0 scroll;
    }

    h1{
      font-size: 3em;
      padding: 2em 2em 5em;
      margin-top: 0em;
    }

    #gradi{
      color: white;
    }
    .box1{
      border:3px solid #555;
      border-radius: 5px;
      position: fixed;
      top: 7em;
      right: 5em;
      padding:5em;
      z-index: 1;
    }
      .box2 {
      border:3px solid #555;
      border-radius: 5px;
      padding:5em;
      margin: 5em;
      background-color: #fcfaf5;
    }
  </style>
</head>

<body
<div id="bg1"
data-2000="background-position:800px -1000px;"
data-0="background-position:0px 0px;">
</div>

  <h1>skrollr入門</h1>

  <div class="box1"
  data-anchor-target="#gradi"
  data-bottom-top="background-color:rgb(255,255,255);"
  data-top="background-color:rgb(130,163,140);">
  [relative mode] グラデーションさせているdivが画面に現れ始めたら色を変化させる。<br><br>
  今回の場合はまず、グラデーションさせているdivにid="gradi"をつけた。<br>
  次にdata-anchor-target="#gradi"を変化を起こしたいdiv(つまりこのdiv)に指定した。<br>
  </div>
  <div class="box2"><h3>skrollrのポイント</h3>
    <ol>
     <li>色はrgbかhslで指定する。</li>
     <li>単位を揃える。</li>
     <li>ベンダプレフィックスは必要なし。</li>
     <li>[absolute mode] とは、スクロール量で変化させるモード。</li>
     <li>[relative mode] とは、data-anchor-targetを指定し相対的に変化させるモード。</li>
    </ol>
  </div>

  <div class="box2" 
  data-0="background-color:rgb(242,142,151);"
  data-500="background-color:rgb(241,202,108);">
  [absolute mode] 色をスクロール量で変えてみる。</div>

  <div class="box2"
  data-600="transform:translate(-110%,0)"
  data-700="transform:translate(0%,0)">
  [absolute mode] 左から出現して止まる。
  </div>

  <div class="box2"
  data-800="transform:translate(-110%,0)"
  data-900="transform:translate(0%,0)"
  data-1100="transform:translate(0%,0)"
  data-1200="transform:translate(120%,0)">
  [absolute mode] 左から出現して右へ消える。data-○○○はいくつ並べてもOK。
  </div>

  <div class="box2"
  data-1300="transform:rotateZ(0deg);"
  data-1400="transform:rotateZ(180deg);"
  data-1500="transform:rotateZ(360deg);">
  [absolute mode] 回転させる。
  </div>

  <div class="box2" id="gradi"
  data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));"
  data-2000="background-image:linear-gradient(360deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">
  [absolute mode] <br><br>背景色をグラデーションさせてみる。<br><br>
  </div><!--linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);-->

  <div class="box2"
  data-center-top="transform:rotate(0deg);"
  data-top="transform:rotate(360deg);">
  [relative mode] ブラウザの画面のcenterに要素のtopが来たら回転が始まり、画面のtopに要素のtopが来たら回転が止まる。
  </div>

  <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を使い、シングルページのスクロールサイトを作ってみます。
それではごきげんよう。

“パララックスが簡単に実装出来る!skrollrの使い方” への1件の返信

コメントを残す