jQueryのスクロール系プラグイン『skrollr』の使い方を徹底解説

今回はスクロールで面白いアニメーションを施すことができるjQueryプラグインの『skrollr』を紹介させていただきます。

jQueryプラグインのことがあんまりよくわかっていない方は、jQueryとは?プラグインの導入方法を実践解説の記事を先に読んでおきましょう。

このskrollrというプラグインはかなり自由度が高く、簡単にオリジナルのスクロールアニメーションを実装できるので個人的にオススメのjQueryプラグインです。最初は少し使い方に戸惑うかもしれませんが慣れればすぐにやりたいことができるようになると思います。下の公式デモページからskrollrでどのようなアニメーションができるか見てみてください。

skrollr 公式デモ

skrollr ダウンロード(Github)

スマホでは少し見にくさはあるのですがちゃんと動くので問題ありません。それでは、このskrollrを実装するための使い方を見ていきましょう。

skrollrを使うための準備をしよう

まずはjqueryのスクリプトを埋め込んでjQueryを使えるようにしましょう。書き方は以下を参考にしてください。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<!-- ↓これがjQueryのスクリプトです。body終了タグの直前に入れるといいでしょう -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

これでjQueryが使えるようになりました。
続いてskrollrのスクリプトを先ほど入れたjQueryのscriptの下に入れましょう。skrollrのスクリプトはGithubからダウンロードできます。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- ↓jQueryスクリプトの下にskrollrのjsファイルを入れましょう -->
<script src="js/skrollr.min.js"></script>
</body>
</html>

これでskrollrの準備が整いました。skrollrのスクリプトの下に実行コードを入れればskrollrのプラグインが動き始めるので実行コードをskrollrスクリプトの下に入れましょう。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/skrollr.min.js"></script>
<!-- ↓下の三行がskrollrの実行コードです。これを入れることでskrollrが動き始めます。 -->
<script type="text/javascript">
	var s = skrollr.init();
</script>
</body>
</html>

これでskrollrを使うための準備が整いました。あとはHTMLにデータ属性を追加すればスクロールに応じてアニメーションが実行されるようになります。

HTMLにデータ属性を追加してスクロールアニメーションを試してみよう

skrollrプラグインでアニメーションを実行するには、動かしたいHTMLの要素にdata属性を追加することで動くようになります。まずdata属性の書き方がいくつかあるので一つずつ解説していきます。

スクロール量でアニメーションの開始・終了のタイミングを指定する方法

まず一つ目のdata属性の書き方は、スクロール量を数値で指定してそのスクロール量が始まってから終わるまでに指定されたアニメーションが実行されるという方法です。

実際にHTMLの例を見てみましょう。

<img src="img/imac_tori.svg"
data-100="transform:translateX(0px);"
data-300="transform:translateX(-500px);"
>

上のHTMLの動作デモをチェックしてみましょう

下へスクロールしたら鳥が左へ移動するアニメーションが出たかと思いますが、これを実装しているのがdata属性でtransformプロパティを使って動かしたということになります。左へ移動させたい要素であるimgにdata属性がついており、今回の設定であれば「100px下へスクロールするとtranslateX(0px)にいる鳥が動き始め、300px下へスクロールする間に500px左へ移動する」という意味になります。

skrollrでスクロール量によってアニメーションの開始・終了するタイミングを決める場合

ウインドウ位置でアニメーションの開始・終了のタイミングを指定する方法

二つ目のdata属性の書き方は、スクロールしてきたウインドウの位置によってアニメーションさせたい要素の動きを始めたり止めたりする方法です。

HTMLの例を見てみましょう。

<img src="img/imac_tori.svg" 
data-center-top="transform:translateX(0px);" 
data-top-top="transform:translateX(-500px);"
>

上のHTMLの動作デモをチェックしてみましょう

このdata属性の書き方は、「スクロールされたウインドウの中央がアニメーションさせたいimg要素の上部に届いたらアニメーションを始め、ウインドウの上部がimg要素の上部に届いたらアニメーションを止める」という意味になります。

skrollrでウインドウ位置によってアニメーションの開始・終了するタイミングを決める場合

対象要素の位置は省略することが可能です。対象要素を省略した場合は、ウインドウ位置と対象要素の位置が同じ扱いとなります。

  • 例)data-top = data-top-top
  • 例)data-center = data-center-center
  • 例)data-bottom = data-bottom-bottom

またウインドウ位置によるアニメーションの設定方法については、ウインドウ位置からさらにpxの数字をdata属性に追加することでプラスやマイナスの位置指定をすることもできます。

<img src="img/imac_tori.svg" 
data--200-bottom-top="transform:translateX(0px);" 
data-100-top-top="transform:translateX(-500px);"
>

上のHTMLの動作デモをチェックしてみましょう

例えば、data-top-topはウインドウの上部に要素が来た時と対象要素の上部が重なればアニメーションを始めるという指示でしたが、data-50-top-topに変えることでウインドウの上部から50px下と対象要素の上部が重なった時にアニメーションを始めるという意味にすることができます。

skrollrのウインドウ位置指定に加えてpxで位置を調整する場合

また、data-startを使えばページの初め、data-endを使えばページの終わりを指定することができ、開かれたページの最初から終わりまでずっとアニメーションさせる時などに使えます。

相対位置でアニメーションの開始・終了のタイミングを指定する方法

三つ目は、「ある要素が画面に入ったら別の要素がアニメーションを始める」というようなアニメーションのタイミングを指定する方法です。

HTMLの例を見てみましょう。

<img src="img/imac_tori.svg"
data-anchor-target="#red-box"
data-center-top="transform:rotate(0deg)"
data-top-top="transform:rotate(360deg)">

<!-- 下のspanが赤いボックスです -->
<span id="red-box">
</span>

上のHTMLの動作デモをチェックしてみましょう

上のHTMLは赤いボックスのtopとウインドウのcenterが重なると鳥が回るアニメーションが始まり、赤いボックスのtopとウインドウのtopが重なると鳥が回るアニメーションを終了するという処理をしていることになります。

まずウインドウに入ってくる要素に対してidで名前を付け、アニメーションをする要素にdata-anchor-target=”#id名”を記述することでアンカーを付けることができます。すると今までdata要素をつけた要素ではなくアンカーをつけた要素に対して位置指定をすることができるようになるのです。

skrollrのdata-anchor-targetを使った相対位置指定

アンカーを使った相対の位置関係は少しややこしいかもしれませんが、上の例を見ながらご自身でアニメーションを実装するなど試行錯誤すれば理解ができるかと思います。私も最初は理解するまで相当苦労しました。。

skrollrをスマホで使う場合

最後にスマホでの操作についてですが、前述した方法でスクロールアニメーションを実装したとしてもスマホで動きを確認してみると不具合が起こってしまいます。

スマホでもskrollrを正常に動かしたいときは、全体を覆っている要素に対して、id=”skrollr-body”を指定する必要があります。bodyタグにid=”skrollr-body”を付けても構いません。

この作業だけでスマホ対応ができるようになるので簡単ですね!

しかしskrollrをスマホで動かす際に一つ問題があります。このid=”skrollr-body”の中の要素にposition:fixed;を使う場合は要素が固定されない不具合が起きてしまうのです。id=”skrollr-body”要素の外に外してposition:fixed;で固定させることは可能なのですが、面倒ですし他のトラブルの原因にもなりかねません。skrollrを使う際はposition:fixed;と一緒に利用することは避けた方がいいかもしれません。ちなみにPCではposition:fixed;も正常に動作します。

まとめ

今回は簡単にスクロールアニメーションを実装できるjQueryプラグインskrollrの使い方を解説しましたがいかがでしたでしょうか?

少し人とは違ったサイトを作りたい時にインパクトを残せるアニメーションを実装できるのですが、むやみやたらにアニメーションを付けすぎるとそれはそれでうるさいサイトになってしまう恐れもあるので、アニメーションをさせることに意味がある部分にさりげなく施す程度が良いのではないかなと思います。

最後にこのプラグインの名前、私だけかもしれませんが間違えやすいので注意してください(^^;)
英語のスクロールから派生して「スクローラー」という名前なのでしょうが、英語で普通にスクロールと書くと「scroll」となり、cとkが入れ替わっています。そして普通にスクローラーという名前から連想した綴りは「scroller」になるのが一般的だと思うのですが、最後のeもありません。

そんなskrollrですが、オススメなのでぜひ試してみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です