- このトピックには20件の返信、3人の参加者があり、最後に
により3年、 4ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】Snow Monkey v11.7.2
【お使いのブラウザ】Chorome
【参考にさせていただいたサイトのURL】https://junglelabo.com/===
キタジマさん、いつもお世話になりっぱなしです！
ミートアップ最高でしたｗずっと温めてたんですがアニメーションに遅延時間的な機能を要望させていただきます。
理由は、現状アニメーションが多くなっている中、視線誘導もプラスしたいという事です。
先に「文章」を見せたい時や「写真」を載せたいとう時がございます。
イメージは以下の 画像です。
この場合、同時に表示されるより字→WORKS→写真と見せたい！絶対あったほうが良いと思いますのでご検討よろしくお願いいたします。
いいねをした人: 居ません今の Snow Monkey Editor は、アニメーション設定は各ブロック（各要素）で設定してると思うんですが、アニメーションの遅延になる場合のパターンは大体が下記ので設定する感じになると思います。
例) Intersection Observer などの交差法を使ったパターン：
セクションの中心が交差した（セクションの中央座標が表示された）
→ セクション内の各要素のアニメーションを順番に行う（遅延）で、各要素のアニメーションを連続化させる例えば… 字、WORKS、写真を順番にアニメーションさせたいとなると…
それらが入っている大基のセクションに対して、イベントを発火させなければ、
それぞれの要素のアニメーションは関係性が無いので繋がらず、綺麗な連続アニメーションにならない場合があります。ブロックエディターは、各ブロックに対してのバラバラなアニメーションは簡単に設定を作成する事は可能です。とは言え、各ブロック別にアニメーションが設定されていると、それぞれの要素（各ブロック）は関係性を持てず、トピックで想定している連続的なアニメーションにするとなった場合に、やや難しい or 複雑となる部分があると思えます。
Snow Monkey Editor の場合でも連続アニメーションなどをやる場合は、たとえばアニメーション用のセクションブロックを作り、その中の各ブロックは該当の親セクションブロックに準じさせた遅延設定にするなどをしないと難しいのではと。
…知らんけど（関西定番の後付け文句ネタは、こう言う時に使ってはいけまへんで…）いいねをした人: 居ませんケミさん
お世話になっております。機能はケミさんのGitHubWikiなど話題が盛りだくさんでしたね。
たしかに知らんけどの使いかたは、大阪とは違うと思いますｗすみません、文章での表現は非常に難しい内容かと思いますが、とても分かりやすいです。
単純に遅延機能を追加しても各々の関係性がないため、たとえば１→２→３の動作のうち１のみが発火しちゃうということですね。
確かにそのとおりだと思いました。私の考えの不足、知識の不足だと思います。
最初の意味（視線誘導）からズレてしまいますが、同じ高さの要素の場合でもアニメーションで変化を付けたら面白いと思いますがいかがでしょうか？
たとえばスライダーを導入しなくてもそれらしく見えたりすることができると思います。
いいねをした人: 居ませんこちらこそ世話になってます。
昨日のミートアップは知人や案件チームメンバーとYoutubeで見てました。
GitHub の フック一覧……は…今では（こういう風にまとめなきゃ良かった）って思う時とかも…色々あってですね…。と言っても「どうまとめるべきか」の答えは未だ見つかりませんが。北島さんと同じ悩みですねー。
「どう解らないのかがわからない」「どうマニュアル化すれば良いのか」と。
Happy Snow Monkeyなり、フック一覧を基に色々広がってる動きもあるのでそこは各自が広げてくれたら良いんじゃない？と思いますが。逆引きは面白そうなネタでしたね。（作る時間も金もないけど…）
単純に遅延機能を追加しても各々の関係性がないため、たとえば１→２→３の動作のうち１のみが発火しちゃうということですね。
スクロールと合わせた視線誘導アニメーションって結構難しくて…。
本来は文字と画像を出したいとなっても、画像が出ないとか…または画像を出しては駄目なスクロール量の場合にも連続して出てしまうとか色んなパターンが考えられそうです。また、最初の意味（視線誘導）をする場合で考えた返信なので。
知識不足と言う事も無いと思います。同じ高さの要素の場合でもアニメーションで変化を付けたら面白いと思いますがいかがでしょうか？
同じ高さの要素や、同一座標からのアニメーションは同時発動でもタイミングをズラすだけで変化が付くのでアリですよね。
視線誘導とはならないかもですが、このアニメーション遅延効果なら、CSS のanimation-delayとかtransition-delayとかを設定値に加えるだけなので、そんな難しくなさそうですね。アニメーションを考えると、Flashって良かったなあ…アクションスクリプトとか便利だったなあ…年末に消えちゃうの悲しいいいねをした人: 居ません一応いまアニメーション機能は Snow Monkey Editor にもたせているのですが、仕組み的にいうと、この機能は単純に CSS class を追加するだけなので、アニメーション自体も「ブロック自体をどう動かすか」という単純なものしか実現できません。
つまり今回書き込んでいただいたような、まずタイトルが動いて、次に画像が動いて…というものは Snow Monkey Editor ではできないので、やるとしたらそういう専用のブロックをつくるということになるんですけど、入力項目も動きも固定化しないといけないので、使い勝手的には結構微妙になるんじゃないかなと思います。
それよりも、既存のブロックを使って、制作者の方が自分でアニメーションをつけるほうが自由度は高くできると思います。
例えばセクションブロックの中にタイトルとボックスブロックと画像ブロックを入れたとして、タイトル → 画像 → ボックスの順番に出すみたいな。最近、最初はなにもないけどスクロールするとまずベタ塗りのマスクみたいなのがシュッとでてきて、その後にその上にコンテンツがシュッとでてくる（重なるのでベタ塗りは見えなくなる）というアニメーションもよく見ますよね。これは Snow Monkey Editor でも実現できるかなと思いました。
いいねをした人: 居ません最近、最初はなにもないけどスクロールするとまずベタ塗りのマスクみたいなのがシュッとでてきて、
あれ？？多分、ソレって…正確にはアニメーションじゃないやつ…では？
GatsbyJSとかだとsharp系のプラグインで設定すると、ほぼ自動でされるやつだと思う…。
ベタ塗りマスクはただのSVG、または超軽量なjpgで、ページ高速化の為に使われてます。
画像の読み込みが終わっている際に、スクロールに合わせた形でフワッと読み込んだ画像に切り替わるように出来るんです。
そう言う仕組みで、とりあえず軽い画像を差し込んでページ読み込みを軽量化するのにも役立ってます。本当にアニメーションとして、ブラー効果100%近くからスクロールなどに合わせてシャープになっていくアニメーションは、昔の流行で割とありましたけど…無駄にGPU使う負荷の高い効果なので最近のスマホサイトでは嫌われている傾向(海外パターン)があります。アニメーション効果としてはオススメできなくなりつつあるかと。
いいねをした人: 居ませんここまでリッチじゃないにしても下記のサイトの画像部分とかですね。
なるほど。リッチな遅延ロードとかのやつじゃなく…こう言うアニメーション効果でしたか。確かにこう言うのも増えましたね。
このパターンなら確かにそんな難しく考えなくても出来るので良さそうです。
調査してみると、コレはただ単にアニメーション…ですね(画像の遅延ロードとか関係なしの)
でも、軽量。今でも結構いろいろなサイトで見かける…
当然表示速度を気にするならアニメーション（的な表現）はしないほうが良い…
アニメーション的な表現は、遅延ロードの掛け合わせ技で表示速度を早めつつも、違和感なく切り替わるなどの為にも使われる場合を除いては、基本的に速度落とすので…確かに気にするならやらない方が良いかもですね。
ページ速度気にするのにリッチにしたいって人もWordPress案件の中で多かったので、バランス良くアニメーションを使わせるにはどうしたら良いのかとも、変に難しく考え過ぎてしまってますね。すみません。
いいねをした人: 居ませんケミさん、キタジマさんご丁寧にありがとうございます。
ちょっと技術的な話になりすぎて、ついていけていません。（ついていきたい気持ちはあります）
表示速度とアニメーションは切り離してほしいです。というのも私のクライアントさんは、速度にはこだわっていない人が多いからです。もちろんSEOや技術者的に考えたほうがよいというのも理解しています。
一応いまアニメーション機能は Snow Monkey Editor にもたせているのですが、仕組み的にいうと、この機能は単純に CSS class を追加するだけなので、アニメーション自体も「ブロック自体をどう動かすか」という単純なものしか実現できません。
要望としてケミさんと話を聞いて若干変更はございますが、CSSのClassを追加するタイミングを遅らせることは可能でしょうか？ということです。
イメージをいかに貼らせていただきました。
表現としてアニメーションと書いているだけですよ。具体的な実装方法までは調査していませんが、今でも結構いろいろなサイトで見かけるので、そこまで気にしなくても良いのではないですかね？ 当然表示速度を気にするならアニメーション（的な表現）はしないほうが良いし、機能も削ったほうが良いと思います。
別件として、この表現は柴田工務店様のようなベタがシュッとスライドする表現をしたいときは多々あります。CSSでやっていますが、SnowMonkey系で解決させたいという事は多々ございます。
いいねをした人: 居ません表示速度とアニメーションは切り離してほしいです。というのも私のクライアントさんは、速度にはこだわっていない人が多いからです。もちろんSEOや技術者的に考えたほうがよいというのも理解しています。
プラグインを入れすぎない、大きい画像を入れない、ということだけで、体感的にはそんなに激重になることはないので、僕もあんまり気にしないでほしいというのが本音ですが、まぁご意見も多いのでそうは言ってられないのが現状なので、なるべく重い処理は入れないようにバランスを取りながら慎重に機能追加するしかないのかなぁというところです…。
CSSのClassを追加するタイミングを遅らせることは可能でしょうか？ということです。
イメージをいかに貼らせていただきました。あー！これは良さそう！ これでも制作者が自分でつくるよりは制限はあるけど、かなり表現の幅は広がりそうですね。まだできるかどうかはわかりませんが、検討課題として issue に入れておきます！
いいねをした人: 居ませんキタジマさん、ケミさん、お忙しいところありがとうございます。
またsnow-monkey-editorのissueへ入れていただき重ねてお礼申し上げます。
私のクライアントさんは「速度」や「自分で操作したい」というかたとは正反対で、金額が短納期のほうが優先されています。
そういった部分でもお客さんの要望に早く簡単に対応できる価値があると思っています。
やはりバランスが一番大事だと思っています。
いつもお二人含む、SnowMonkeyに関わるかたには感謝してます！
いいねをした人: 居ません
- トピック「snow monkey editor アニメーションの遅延機能（グレードアップ！）」には新しい返信をつけることはできません。