画像が分割されて切り替わる、ループアニメーションが作りたい

Question

https://libre-1.co.jp/catarel-project/
このサイトのヘッダーで使われてるスライドアニメーションに似たモノが作りたいのですが、作り方がイマイチ分からず困っています。

一枚の画像を4分割し、それぞれにアニメーションを設定してる事は分かるのですが、その先が分からないのです。

一枚の画像を全画面表示してそのままカットインするのではなく、4分割した画像を隙間なく等分配置し時間指定でスライドさせ、
Aの画像の下からBの画像が出てきて、Bの画像の下からCの画像が出てきて、Cの画像の下からAの画像が出てきてループする方法を知りたいのですが、
なにか参考になるサイト等を教えて頂けましたら幸いです。


知りたいのは画像切り替えアニメーションの方法なので、画像スライドに応じて切り替わるロゴや、（右下にある）画像切り替えまでのローディングなどはスルーで構いません。

fujillin · Accepted Answer

---　No6の続き　--- ◇ DivideSlider.js ◇ （書きっぱなしのため、きれいではありませんがご容赦） ※ 表示後の画面リサイズや複数設置には対応していません。 /* Image Slider with Division */ const DivideSlider = (id, div, dur, intvl ) => { const el = document.getElementById(id); if(! el ) return; const imgs = el.querySelectorAll('img'); if( imgs.length < 2 ) return; imgs.forEach(e => { e.style.display = 'none' }); [div, dur, intvl] = [div, dur, intvl].map((e, i) => { const v = isNaN(parseFloat(e))?0:parseFloat(e); return v<[1, .1, .5][i]?[2, .5, 3][i]:v} ); div = div | 0; const ew = el.clientWidth, eh = el.clientHeight, dw = ew / div, ht1 = `

`, ht2 = '', path = (w, d) => '{ clip-path: path("' + [...new Array(div)].map((_, i) => `M${dw*i},0 h${w} v${eh} h-${w} z`).join(' ') + `"); left:${d}px; }`; document.querySelector('head').insertAdjacentHTML('beforeend', ``); el.insertAdjacentHTML('afterbegin', ht1 + ht2 + ht2 + '

'); const imgElms = el.querySelectorAll('div:first-child img'); const changeImage = () =>{ imgElms[0].src = imgs[idx].src; imgElms[1].style.animation = 'none'; idx = ++idx % imgs.length; setTimeout( () => { imgElms[1].src = imgs[idx].src; imgElms[1].style.animation = `${dur}s ease-in-out _divSlide`}, intvl*1000); }; let idx = 0; imgElms[1].addEventListener('animationend', changeImage); changeImage(); } /* End of Script */

fujillin · Answer

No4です。＞知りたいのは画像切り替えアニメーションの方法なので～というご質問でしたので、「方法」について回答をしていたのですが・・どうやら、方法の説明や例示では事足りない雰囲気のように感じました。多少一般化して, 　・画像枚数　・分割数　・スライド時間　・停止時間くらいを自由に設定できれば、一応はなんとかなるのではないかと・・・各種可変にする関係から、全体をスクリプトにしましたが、表示方法もこれまでの例示とは異なり全体を1枚の画像（＝）にしておいて、clip-pathで切り抜いてスライドさせるという方法に変えてあります。使い方は、　DivideSlider( 画像包含要素のID [, 分割数 [, スライド時間 [, 停止時間]]] ) という感じです。（時間指定の単位は秒）以下、設置例です。 ※ まとめて投稿するとエラーになるので、2分割で投稿します。（なぜか、分割すればエラーにならないみたい。）（Chrome、fx にて動作確認） Sample

gura_ · Answer

ebiebi56 さん　･････画像が分割されて切り替わる、ループアニメーションが作りたい･･････こんな感じですか。↓ ＊ enunokokoro さんの回答を参考にしました。

Slice 1 - Image 1 Slice 1 - Image 2 Slice 1 - Image 3 Slice 1 - Image 4

Slice 2 - Image 1 Slice 2 - Image 2 Slice 2 - Image 3 Slice 2 - Image 4

Slice 3 - Image 1 Slice 3 - Image 2 Slice 3 - Image 3 Slice 3 - Image 4

Slice 4 - Image 1 Slice 4 - Image 2 Slice 4 - Image 3 Slice 4 - Image 4

fujillin · Answer

No2です。＞そのループをホバー（オンマウス）などの手間をかけず自動再生にしたいのです。説明にも書きましたが、トリガーはわかりやすくするために設定してあるだけです。参考に挙げておいたサイトにも、自動で始まる例やループする例など様々な例が載せられていると思いますけれど・・・？いずれにしろ、なさりたいことを実装するには、コピペではなく応用をする必要があります。一から説明を書いているとメッチャ長くなり面倒なので、以下は自動でループする一例です。（関連解説はNo2で挙げたサイトに全てあります。） Sample

◇ CSS animation（3種画像）

enunokokoro · Answer

自動での無限ループは
　animation: change-img-anim 30s infinite;
のように全体を繰り返す時間指定とinfiniteを使うことで対応が
できるようです。
https://1-notes.com/css-replace-images-automatically-animation/
これらをどのように組み合わせるのかは、知識のある方からの
アドバイスを受けてください。

fujillin · Answer

こんにちは＞知りたいのは画像切り替えアニメーションの方法なので～ご質問のようなアニメーションの基本的な原理としては、2枚の画像を重ねておいて、上側の画像をスライドさせたりフェードアウトさせたりすればその効果を伴って下側の画像に切り替わったように見えます。（上側にスライドインしたりフェードインしたりしても同様です）アニメーションを実現する方法もいろいろありますが、大雑把に分けてCSSによる方法とjavascriptによる方法とが考えられます。以下に、代表的なCSSでのアニメーションの例を、原理の例として載せておきます。 transitionによる方法は、比較的単純なアニメーションに向いています。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_transitions/Using_CSS_transitions animeationによる方法の場合は、＠keyframesで時間経過とともに異なるアニメーションを定義することも可能なので、多少複雑なアニメーションを設定することも可能です。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations ※ animationによる方は、変化の例示としてスライドが複数段階で動くようにしてあります。 ※ いきなり開始しないように、以下の例では「画像へのホバー」で開始するようにしてあります。（画像urlは適当にお手持ちのものに入れ替えてください） Sample

◇ CSS transition

◇ CSS animation

※ CSSアニメーションでは画像を入れ替えることはできませんので、その部分だけjavascriptを併用するか、あるいは、事前に全部の画像を重ねておいて、CSSアニメーションでz-index等を制御して重なり順を制御するような工夫をすれば、複数の画像の入れ替わりをCSSだけで行うことも可能と思います。 ※ ご提示のサイトでは、一つの画像を短冊形に分割した画像を用意しておいて、それぞれを入れ替えているようですが、事前準備が少々面倒なように感じられます。 No1様がご提示のサイトでは、1枚の画像を表示上で分割して表示するようにしているようですので、CSS等の設定はやや複雑にはなりますが、沢山の画像を用意しなくてもよくなりますね。 ※ javascriptによる方法の場合は、アニメーションの一コマ一コマを時間経過とともに順次設定してゆくような方法になります。（いわゆるパラパラ漫画と同じ）質問者様がスクリプトを使えるのかどうか不明なので、例示は割愛しておきますが、以下あたりに基本的な考え方の説明がありますので、必要な場合にはご参考までにどうぞ。 https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Basic_animations

enunokokoro · Answer

この分野に詳しくないので、参考サイトだけですが。
https://ooigawa-bitter-sweet.hatenablog.com/entry/2015/04/27/230000
https://ooigawa-bitter-sweet.hatenablog.com/entry/2015/08/16/115757

画像が分割されて切り替わる、ループアニメーションが作りたい

--- No6の続き ---

No4です。

ebiebi56 さん

No2です。

自動での無限ループは

こんにちは

この分野に詳しくないので、参考サイトだけですが。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

---　No6の続き　---