Smart Sliderで利用出来る『レイヤーアニメーション(Events)』について解説しています。Pro版の機能も含めて解説しているので、すでにPro版ユーザーの方、または、これからPro版を使い始める方にとって有益になるよう構成しています。
また、無料版ユーザーの方にとっても基本操作の理解が深まるように記述しており、合わせて『Pro版アップグレードで可能になること』のイメージも明確になると思います。
本記事は、パソコンの画面から見ていただくことを推奨します。
Eventsアニメーション
Smart Slider Proの「レイヤーアニメーション」機能では、自動的に発動するアニメーションだけでなく、何かしらの特定の条件のときだけに発動するアニメーションを設定することが出来ます。
その何らかの「条件」や「きっかけ」のことを『Events』と呼んでいます。
以下のスライドは、マウスカーソルがスライド領域に入った時だけ、タイトルが表示(フェードイン)され、カーソルが領域から外れると非表示(フェードアウト)になるように設定されています。
それでは、『見出し』レイヤーに、「フェードイン」「フェードアウト」の２つのアニメーションを設定し、それらをマウスイベントによって発動させる設定の流れを解説していきます。
定義済みアニメーションのイベント設定
フェードイン・アウトを設定
まず『見出し』レイヤーを選択して、『レイヤーウィンドウ』の『アニメーション』タブから、『フェード』→『フェード』をクリックします。
以下のように表示が切り替わり、『見出し』レイヤーに「フェードイン」のアニメーションが適用されました。ここでは、数値設定はこのままとします。
同様に、『見出し』レイヤーに対して『OUT』→『フェード』と選択して「フェードアウト」のアニメーションを適用します。
「OUT」→「フェード」
「フェードアウト」が適用される
イベントを設定する
そして『EVENTS』タブで、「IN」と「OUT」２つのアニメーションを発動させる条件をそれぞれ設定していきます。
『いつ再生する』の項目は、日本語訳が少し間違ってますが、
本来は『Plays In When』=「Incomingアニメーションをいつ再生させるか」の項目です。
・Plays In When：イベントが発生した時にIncomingアニメーションを再生
・Plays Out When：イベントが発生した時にOutgoingアニメーションを再生
・Plays Loop When：イベントが発生した時にLoopアニメーションを再生
・Pauses Loop When：イベントが発生した時にLoopアニメーションを一時停止
・Stops Loop When：イベントが発生した時にLoopアニメーションを停止
プルダウンを開き、定義済みのイベントの中からイベントを選択できます。ここでは「SlideMouseEnter」(マウスカーソルがスライド領域に入ったとき) を選択します。
「SlideMouseEnter」を選択
設定されました
同様に「Plays Out When」にもイベントを設定します。こちらは「SlideMouseLeave」(マウスカーソルがスライド領域を離れたとき) を選択します。
設定されました
[定義済みイベント]
・layerAnimationPlayIn：レイヤーアニメーションが開始される際に
・layerAnimationPlayLoop：スライドが読み込まれる際に
・LayerClick：レイヤーがクリックされた際に
・LayerMouseEnter：カーソルがレイヤー領域に入った際に
・LayerMouseLeave：カーソルがレイヤー領域を離れた際に
・SlideClick：スライドがクリックされたときに
・SlideMouseEnter：カーソルがスライド領域に入ったときに
・SlideMouseLeave:：カーソルがスライド領域から離れたときに
・SliderClick:：スライダーがクリックされたときに
・SliderMouseEnter:：カーソルがスライダー領域に入ったときに
・SliderMouseLeave:：カーソルがスライダー領域から離れたときに
・InstantOut:：Outアニメーションを即座に再生
・OutForced:：カスタムアニメーション時とスライド切替え時の両方でOutアニメーションを再生
最後に、『繰り返し可能』をオンにしておきます。オフのままですと、アニメーションの再生が１回のみに限定されてしまいます。
・繰り返し可能 (オン)：IncomingとOutgoingのアニメーションを繰り返し再生
・Start delay：Incomingアニメーションが再生されるまでの待機時間
・End delay：Outgoingアニメーションが終了した後の待機時間
・Repeat loop only (オン)：Loopアニメーションを繰り返し再生
以上が、定義済みのイベントを、レイヤーアニメーションに適用する基本的な流れとなります。覚えてしまうととても簡単に設定できるのではないかと思います。
カスタムイベントを設定
上記の「定義済みイベント」では、アニメーションを発生させるレイヤー自体にイベントを設定しましたが、別のレイヤーにイベントを設定することも可能です。
例えば以下のスライダーですが、黄色と黒のカラーボックスにマウスカーソルを合わせると、サムネ画像がスライドイン、カーソルが離れるとスライドアウト、という設定がされています。
Santa Marina is an uber-luxe retreat for explorers and collectors of the world’s island idyll experiences. Set overlooking the exquisite and iconic Ornos Bay,
Santa Marina is an uber-luxe retreat for explorers and collectors of the world’s island idyll experiences. Set overlooking the exquisite and iconic Ornos Bay, Santa Marina crucially commands the only private beach on Mykonos.
これには、以下のような設定が必要になってきます。
・サムネ画像に「スライドイン」と「スライドアウト」のアニメーションを設定
・サムネ画像に「カスタムイベント名」を設定
・カラーボックスにマウスオーバーイベントを設定
設定の流れを順番に見ていきましょう。
まず、サムネ画像を背景表示している『列』レイヤーに「IN」と「OUT」のアニメーションを設定していきます。
スライドイン・スライドアウトを設定
アニメーションタブの『IN』から、『移動』→『右』を選択します。
これで、右に400pxの位置からスライドインする動きが設定されました。
「移動」→「右」
設定されました。
「Durarion」「オフセット」の値はこのままとしますが、もし支障があれば自由に調整してください。
続いて「OUT」の動きの設定ですが、「OUT」には「移動→左」という選択肢がないので、いったん「フェード」を選択します。アニメーション設定画面に切り替わったら値を変更していきます。
「OUT」→「フェード」
不透明度: 100%、オフセット: 400px
以下のように変更することで「右スライドアウト」の動きを設置します。
・不透明度：0％ → 100％
・オフセット：0px → 400px
カスタムイベント名を設定
『列』レイヤーに「IN」と「OUT」のアニメーションを設定できたので、次はイベントを定義していきます。
『EVENTS』タブの以下の２箇所に、イベントを定義する訳ですが、ここはプルダウンから「定義済みイベント」を選択する以外に、「カスタムイベント名」を設定することも出来ます。
以下のように「カスタムイベント名」を直接タイプ入力します。
ここでは、それぞれ「nextin」「nextout」というイベント名を設定してみます。
「繰り返し可能」はオンにしておきます
カスタムイベントのトリガーを設定
カスタムイベント名が設定できたので、今度は、カラーボックス(黄色)の方にもイベントのトリガー設定をしていきます。
カラーボックス(列レイヤー)を選択した状態で、『EVENTS』タブの一番下の方を確認すると、
『TRIGGER CUSTOM EVENT ON』という項目があります。
ここで先ほど「IN」と「OUT」のアニメーションで設定したカスタムイベント名「nextin」「nextout」をそれぞれ、『Mouse Enter』と『Mouse Leave』に入力します。
・Mouse Enter：マウスカーソルがレイヤー領域に入ったとき「nextin」が発動
・Mouse Leave：マウスカーソルがレイヤー領域から離れたとき「nextout」が発動
以上で、黄色のカラーボックスにマウスオーバーで画像がスライドイン。離れるとスライドアウト、という一連の動きを設定することが出来ました。
あとは、下の段についても同様に設定できます。
・画像のレイヤー：「左イン」「左アウト」設定。
→ カスタムイベント名「previn」「prevout」などと設定。
・黒色カラーボックス：「Mouse Enter」「Mouse Leave」にトリガー設定。
ちなみに、トリガーを「マウスオーバー時」ではなく、「クリックした時」に設定することも出来ます。
以下のようにカンマで区切って、イベント名を入れることで、最初のクリックで最初のイベントがトリガーされ、2回目のクリックで2番目のイベントがトリガーされます。
このように、カスタムイベントを使用することで、何かをクリックしたり、マウスオーバーした際に、別のレイヤーを表示させたり、動かしたり、変形や回転をさせたりすることが可能になります。
レイヤーアニメーションの機能の中でも、是非とも覚えておきたい機能となります。
まとめ
今回は、Smart Slider3 Proの『レイヤーアニメーション(Events)』設定の流れについて解説いたしました。
定義済みアニメーションのイベント設定のほか、カスタムイベントの設定の流れまで、ご理解いただけたのではないでしょうか。
アイデア次第で、さまざまな表現が可能になりますし、スライダーやWebページ上で、出来ることの範囲が格段に広がります。Smart Slider Pro版でのみ提供しているレイヤーアニメーションの機能は、是非、体験してみる価値があると思います。
Pro版を使ってみる
本記事を読んで『Pro版を使ってみたい』『興味が湧いた』と思われた方は、以下の記事で導入方法を詳しく解説しております🚀
Pro版の機能を含めた使い方については、詳しく解説した記事を少しずつ追加しておりますので、こちらもぜひご覧ください👇👇👇
コメント