- このトピックには6件の返信、3人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】 17.2.5
【お使いの Snow Monkey Blocks のバージョン】16.0.6
【お使いの Snow Monkey Editor のバージョン】8.0.2
【お使いのブラウザ】chrome
【当該サイトのURL】ローカルいつもお世話になっております。
現在「コンテンツスライダー」ブロックを使用して、スライダー内に文字（キャッチコピー）が載っているスライドをファーストビューに設置しております。
構造としては、
コンテンツスライダー ＞ セクション（背景画像／動画）＞ 段落
といった形で、「セクション（背景画像／動画）」でスライドの画像を設定、「段落」でキャッチコピーを作成、文字色や背景色、文字サイズなど設定しています。スライドは3枚です。
上記の構成で概ね表示したい内容は表示できているのですが、ここからさらにキャッチコピーに当たる段落にアニメーションを設定したいと思っております。
しかし、snow monkeyの機能で段落にアニメーションを設定すると、1枚目のスライドでは正常にアニメーションが再生されるのですが、2枚目、3枚目はアニメーションが再生されません。また「blocks animation」プラグインのアニメーション機能でも結果は同様でした。
上記から、恐らく原因としては、コンテンツスライダーの読み込みとアニメーションの再生タイミングの兼ね合いかと考えております。
コンテンツスライダー内では設定した全てのアニメーションの遅延タイミングが、最初のスライダーを読み来んだ時点からカウントされているのか、たとえばスライダーの自動再生間隔を5秒にすると、アニメーションの遅延も最大で5秒のために、2枚目以降のスライドが表示される時点ですでに全てのアニメーションの再生が終わっており、2枚目以降は段落のアニメーションがうまく再生されないように見える…という形です。
これを解決するにはアニメーションの読み込みタイミングがそれぞれのスライドが表示された時点にするか、アニメーションの最大遅延時間を5秒以上自由に設定できるようにするかかと思うのですが…後者のほうが簡単でしょうか？
また、スライダーは3枚目の表示が終わった後1枚目に戻るわけですが、このときにまた段落のアニメーションも再度表示させたいので、アニメーションの繰り返しや再生タイミングの間隔なども再生出来たら嬉しいのですが…
・2枚目以降のスライドに適用したアニメーションも正常に再生させたい（遅延時間の延長か？読み込みタイミングの調整か？）
・最後のスライドから最初のスライドに戻ったとき、アニメーションも繰り返したい上記を解決する方法ありましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。
いいねをした人: 居ませんSnow Monkey Editor のアニメーションは、その対象のブロックが画面に入ってきた（＆入ってくる直前の）段階で発火します。
こちらの環境でコンテンツスライダーブロックの中に2つのスライドを用意し、その中にそれぞれ Snow Monkey のブロックパターン「ヘッダー」のものを適当にいれて、その中の段落にアニメーションを設定して試してみたところ、1枚目のスライドの段落は画面表示時に、2枚目のスライドの段落はスライドをスクロールしたタイミングでアニメーションが発火しました。もし2枚目以降のアニメーションを設定している段落が画面端に近い部分にあるのであれば、画面表示時に発火してしまう可能性はあります。
・最後のスライドから最初のスライドに戻ったとき、アニメーションも繰り返したい
上記については Snow Monkey Editor のアニメーション機能では実現できません。対応しているプラグインを探すか、自分でベストな挙動になるようにコードを書いてみるのが確実かもしれません。
いいねをした人: 居ません＞キタジマさん
返信ありがとうございます。
こちらの環境でコンテンツスライダーブロックの中に2つのスライドを用意し、その中にそれぞれ Snow Monkey のブロックパターン「ヘッダー」のものを適当にいれて、その中の段落にアニメーションを設定して試してみたところ、1枚目のスライドの段落は画面表示時に、2枚目のスライドの段落はスライドをスクロールしたタイミングでアニメーションが発火しました。
こちら試してみたところ、私の環境でも再現できました。
違いを探してみたのですが、どうもスライドに「フェード」の効果を付けると、1枚目のスライド表示時にアニメーションが発火してしまっているようです。
「フェード」の状態でもそれぞれのスライド表示時にアニメーションを発火するようにはできないでしょうか？
上記については Snow Monkey Editor のアニメーション機能では実現できません。対応しているプラグインを探すか、自分でベストな挙動になるようにコードを書いてみるのが確実かもしれません。
こちらかしこまりました。
プラグインで対応は難しそうなので、コードで検討してみます。
いいねをした人: 居ません「フェード」の状態でもそれぞれのスライド表示時にアニメーションを発火するようにはできないでしょうか？
あーなるほど。フェードだとスライドを重ねた状態にしておく必要があり、つまりすべてのスライドが画面上にあるという状態になるので、すべてのスライドのアニメーションが発火してしまいますね…。
ちょっとこれは仕様上対応が難しいと思うので、例えばスライドを切り替えボタンをクリックした瞬間にアニメーションを発火するようなコードを書くとか、そのスライダーの要件にあったコードを独自に書くしか無いのではないかなぁと思います。
いいねをした人: 居ません＞キタジマさん
ご返信ありがとうございます。
あーなるほど。フェードだとスライドを重ねた状態にしておく必要があり、つまりすべてのスライドが画面上にあるという状態になるので、すべてのスライドのアニメーションが発火してしまいますね…。
なるほど、フェードの仕様上の問題だったのですね。
1枚目からアニメーション再生時間が計算されるとなるとやはり一番な簡易な対応としてはアニメーションの開始を遅延させることかと思うのですが…こちらはanimation-delayで書く感じでしょうか？
snow monkeyのアニメーション時間を選ぶ項目でもう少し長いものが選べたり、任意の時間を設定できるようになると嬉しいなと思います。
後々検討していただけますと幸いです。
いいねをした人: 居ません横から失礼します。
@shone さん
別のプラグイン（XO Slider）を使うことになりますが、比較的簡単に似たようなことができますので、良かったら参考にしてください。
わたしのデモページで再現、解説しています。いいねをした人:
- トピック「コンテンツスライダーとアニメーションの再生タイミングについて」には新しい返信をつけることはできません。