2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。
今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。
マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。
※ 改編はMITライセンスの下で行っています。
目次
1. プラグインサンプル
スクロールに合わせて、アニメーション付きでコンテンツを読み進めることができます。
See the Pen pEqZJO by ya90net (@ya90net) on CodePen.
※ 右下RERUNを押すと、はじめから見ることができます。
2. 動作環境
モダンブラウザにて動作確認済み。
古いIEでは動作要チェックです。
3. 使い方
それでは、くわしい使い方を見ていきましょう。
準備
アニメーションさせたい要素が、JSが読込み前に一瞬見えることがあります。
これを防ぐため、このスタイルシートへを以下を追加しておきましょう。
.sr, .sr-seq { visibility: hidden; }
次にScrollReveal.jsをダウンロードします。
※クリックするとダウンロードが始まります。
ダウンロード後、ファイルを好きな場所へ移動しましょう。
最後にダウンロードしたスクリプトを読み込みます。
場所はhead内やbody要素の最後部など好きなところでOKです。
<script src="scrollreveal.min.js"></script>
※パスは環境に合わせて変更してください。
使い方１：通常のアニメーション
サンプルのロゴやアイコンのように、単体要素のアニメーションにはこちらを使います。
Step1：共通クラスをつける
はじめに、アニメーションさせたい要素へ
クラスを付与します。
Step2：アニメーション設定用のクラスをつける
次に、アニメーション設定用のクラスを作っていきます。書き方は次の通り。
2. 設定したい項目と値を、アンダースコア(_) でつなげて書く
3. 設定項目が複数あるときは、項目同士を ハイフン(-)でつなぐ
4. 値に小数点が入る場合、ドット(.)の代わりにfloat(小数)のfを使う
例： 0.2em を設定したい時は 0f2em と書く
※1 項目の並びは、好きな順番でOKです
※2 設定の無い項目には、デフォルト値が自動適用されます
設定できる項目は以下のとおりです。
| 項目 | デフォルト値 | 解説 |
|---|---|---|
| origin | bottom | 要素がアニメーションしてくる方向。top/right/bottom/left が使えます。 |
| distance | 20px | 要素がアニメーションする距離。単位にはpx/%/rem/vwなど、CSSで有効なものは全て使えます。 |
| duration | 500 | アニメーションの始まりから終わりまでの時間。単位はms。 |
| delay | 0 | アニメーション開始までの待機時間。単位はms。 |
| opacity | 0 | アニメーション開始時のopacityの値。 |
| scale | 0.9 | アニメーション開始時の要素の大きさ。 |
| easing | cubic-bezier(0.6, 0.2, 0.1, 1) | アニメーションの種類。ease/ease_in/ease_out/ease_in_outが使えます。ハイフン(-)ではなくアンダースコア(_)を使う点に注意。 |
| mobile | true | モバイル端末でもアニメーションを有効にするかどうか。trueにすると有効。falseだと無効。 |
| reset | false | 画面に要素が入る度にアニメーションを実行するか。trueにすると毎回アニメーションする。falseだと1度きり。 |
| useDelay | always | delayで設定した値を毎回使用するかどうか。always：毎回。once：最初の1度だけ。onload：最初のロードでトリガーされた時だけ。 |
| viewFactor | 0.2 | 要素がビューポートにどれくらい入った時にアニメーションを実行するか。0.2は20%を意味します。 |
See the Pen gwqVdW by ya90net (@ya90net) on CodePen.
オプション1：回転用のクラスをつける
アニメーションに回転を加えたい場合は、もう1つクラスを追加します。
2. x・y・z 方向の回転具合を、アンダースコア(_) でつなげて書く
0の時も、0と記入します。単位は°です
See the Pen ALwAYX by ya90net (@ya90net) on CodePen.
オプション2：オフセット用のクラスをつける
通常、アニメーションは画面内に入った瞬間にはじまるのですが、下から100px、右から20px入った時など、はじまるポイントをずらすことが可能です。
2. top・right・bottom・left のオフセット値を、アンダースコア(_) でつなげて書く
0の時も、0と記入します。単位はpxです。
See the Pen RGdbmY by ya90net (@ya90net) on CodePen.
使い方2：複数要素を連続でアニメーション
サンプルの星座名のように、タイミングをずらしながら連続で表示したい時はこちらを使います。
Step1：共通クラスをつける
はじめに、連続でアニメーションさせたい要素すべてに
クラスを付与します。これだけでも連続したアニメーションが使えます。
オプション1：各要素の時差をセット
各要素が現れるタイミングの時差を変更したい場合は、一番初めの要素に次のクラスをつけます。
2. 設定したい時間 を続けて書く
デフォルトは50。単位はmsです。
See the Pen ZpPEzB by ya90net (@ya90net) on CodePen.
オプション2：その他の設定
その他の項目を設定したい場合は、通常のアニメーションと同じく、
.srRotate-
.srOffset-
を使用することができます。
これらのクラスも、.srIntervalと同じく一番先頭の要素に追加しましょう。
※ 使い方は通常のアニメーションを参照
オプション3：連続させたいグループが複数ある場合
連続させたいグループが2つある場合、.sr-seqクラスは一つ目のグループで使ってしまっているので、
クラスを使いましょう。さらに増やしたい時は同じく
.sr-seq3
.sr-seq4
とナンバーを増やせばOKです。
設定項目については、.sr-seqの場合と同じです。
それぞれのグループの先頭の要素に、必要なクラスをつけましょう。
最後に。
今回のスクロールアニメーションは、クラス名だけで簡単に実装できるので、JSやjQueryにはまだあまり自信がないけれど、マイクロインタラクションやアニメーションを取り入れてみたいひとにオススメです。
表現の幅は広いので、自分だけのアニメーションスタイルを見つけましょう。
