すごく簡単にパララックス？skrollrでスクロールアニメーション

髭人

2016.10.26

WEB制作

skollr

最近、パララックスとかって話題に上がってないような。
気がついていないだけ？

うちの会社でも簡単なパララックス見たいなものをやったりしております。
スクロールでアニメーションをさせるとか、わけわからん！って人もいると思いますが、「skrollr」使ったらすごく簡単です。

では、まずデモ的なものを作りました。（簡単すぎるやろ！）

See the Pen skrollr by msys (@msys) on CodePen.

これ３分ぐらいでつくれます。
本当に簡単です。

することを書くと

スクロールさせたいものをHTMLでかく
ちょっとスタイルをつける。
skrollrを読み込ませる。
１行のJavascriptを書く
アニメーションさせたい場所（座標）を指定する。
そしてそこでどうしたいかを書く

ザックリと書くとこんな感じです。
ザックリ過ぎてわからないと思うので、ちょっとだけ詳しいのを書いていきますよ！

スクロールさせたいものをHTMLでかく

<body>
<div id="stage">
<div class="section">
  <h1>skrollr</h1>
</div>
</div>
</body>

今回は背景色と文字の色を変えるというアニメーションなので、こんな感じ！

ちょっとスタイルをつける。

body{
  padding: 0;
  margin: 0;
}
#stage{
  height: 2000px;
}
.section{
  position: fixed;
  width: 100%;
  height: 100%;
  
  h1{
    color: #333;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

スクロールしても移動しないようにfixedを指定したり文字の位置を指定したりです。
本当にこんなのでいいの？

skrollrを読み込ませる。

ここが重要！！
skrollrを読み込ませるんです！
ここが一番大変です。
公式からダウンロードしてきます。
そしてheadに読み込ませます。

公式
公式というかGithub

<script src="path/skrollr.min.js">

cdnがあれば簡単にできるんですけどもね。

１行のJavascriptを書く

var s = skrollr.init();

ほんとこれだけ・・・

アニメーションさせたい場所（座標）を指定する。
そしてそこでどうしたいかを書く

上で書いたhtmlに指定するんですが、座標の指定して動作を書く、キーフレームアニメーションみたいなもんですよね。
座標は「data-0」で0座標の位置の指定をする。
アニメーションの指定はcssと一緒で、「background: rgb(255,255,255);」とする。
同じように2000座標に指定したいときは「data-2000」です。あとは一緒。文字色も指定します。

<body
    data-0="background: rgb(255,255,255);"
    data-2000="background: rgb(0, 0, 0);">
<div id="stage">
<div class="section">
  <h1
　　　　data-0="color: rgb(0, 0, 0);"
    data-2000="color: rgb(255,255,255);">skrollr</h1>
</div>
</div>
</body>