最近、パララックスとかって話題に上がってないような。
気がついていないだけ?
うちの会社でも簡単なパララックス見たいなものをやったりしております。
スクロールでアニメーションをさせるとか、わけわからん!って人もいると思いますが、「skrollr」使ったらすごく簡単です。
では、まずデモ的なものを作りました。(簡単すぎるやろ!)
See the Pen skrollr by msys (@msys) on CodePen.
これ3分ぐらいでつくれます。
本当に簡単です。
することを書くと
ザックリと書くとこんな感じです。
ザックリ過ぎてわからないと思うので、ちょっとだけ詳しいのを書いていきますよ!
<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を読み込ませるんです!
ここが一番大変です。
公式からダウンロードしてきます。
そしてheadに読み込ませます。
公式
公式というかGithub
<script src="path/skrollr.min.js">
cdnがあれば簡単にできるんですけどもね。
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>
これだけで、上のデモみたいなのができます。
これを使ってtransformとかpositionを駆使すれば、結構すごいものが作れます。
公式デモでは、結構ごちゃごちゃ動かしています。
一度見てみてはいかがですか^^
すごく簡単な設定で、今まで難しかったことが出来るようになるjsは作ってくれた人様様です。
今回は、特に簡単な設定で、いままで複雑だなと思っていたことが出来るので、おすすめです。
皆様も一度挑戦してみてはいかがですか!