![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
https://libre-1.co.jp/catarel-project/
このサイトのヘッダーで使われてるスライドアニメーションに似たモノが作りたいのですが、作り方がイマイチ分からず困っています。
一枚の画像を4分割し、それぞれにアニメーションを設定してる事は分かるのですが、その先が分からないのです。
一枚の画像を全画面表示してそのままカットインするのではなく、4分割した画像を隙間なく等分配置し時間指定でスライドさせ、
Aの画像の下からBの画像が出てきて、Bの画像の下からCの画像が出てきて、Cの画像の下からAの画像が出てきてループする方法を知りたいのですが、
なにか参考になるサイト等を教えて頂けましたら幸いです。
知りたいのは画像切り替えアニメーションの方法なので、画像スライドに応じて切り替わるロゴや、(右下にある)画像切り替えまでのローディングなどはスルーで構いません。
No.7ベストアンサー
- 回答日時:
--- 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 = `<div style="width:${ew}px; height:${eh}px; position:relative; overflow:hidden;">`,
ht2 = '<img style="width:100%; height:100%; position:absolute; top:0; left:0;">',
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',
`<style>@keyframes _divSlide{from ${path(0, dw)} to ${path(dw, 0)}}</style>`);
el.insertAdjacentHTML('afterbegin', ht1 + ht2 + ht2 + '</div>');
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 */
遅ればせながらの返信で申し訳ありませんが、詳しい解説をコード付きでありがとうございます。
おかげさまで、やりたい事が見えてきた気がするので、少しずつ頑張って行こうかと思います!
No.6
- 回答日時:
No4です。
>知りたいのは画像切り替えアニメーションの方法なので~
というご質問でしたので、「方法」について回答をしていたのですが・・
どうやら、方法の説明や例示では事足りない雰囲気のように感じました。
多少一般化して,
・画像枚数
・分割数
・スライド時間
・停止時間
くらいを自由に設定できれば、一応はなんとかなるのではないかと・・・
各種可変にする関係から、全体をスクリプトにしましたが、表示方法もこれまでの例示とは異なり全体を1枚の画像(=<img>)にしておいて、clip-pathで切り抜いてスライドさせるという方法に変えてあります。
使い方は、
DivideSlider( 画像包含要素のID [, 分割数 [, スライド時間 [, 停止時間]]] )
という感じです。(時間指定の単位は 秒)
以下、設置例です。
※ まとめて投稿するとエラーになるので、2分割で投稿します。
(なぜか、分割すればエラーにならないみたい。)
(Chrome、fx にて動作確認)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#box { width: 800px; height: 500px; } /* サイズ指定は必須 */
</style>
<script src="./DivideSlider.js"></script>
<script>
window.onload = () => DivideSlider('box', 8); /* 8分割 */
</script>
</head>
<body>
<div id="box">
<img src="./img/photo01.jpg">
<img src="./img/photo02.jpg">
<img src="./img/photo03.jpg">
<img src="./img/photo04.jpg">
</div>
</body>
</html>
No.5
- 回答日時:
ebiebi56 さん
・・・・・画像が分割されて切り替わる、ループアニメーションが作りたい・・・・・・
こんな感じですか。↓
* enunokokoro さんの回答を参考にしました。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.cr-container{
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
border: 20px solid #dff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container input{
display: none;
}
.cr-bgimg{
width: 600px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
background-repeat: no-repeat;
background-position: 0 0;
}
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -150px;
z-index: 2;
text-indent: -9000px;
}
.cr-bgimg div span:nth-child(1){
background-image: url(https://oshiete.xgoo.jp/images/v2/common/profile …
background-size: 400% 100%;
}
.cr-bgimg div span:nth-child(2){
background-image: url(https://oshiete.xgoo.jp/images/v2/common/profile …
background-size: 400% 100%;
}
.cr-bgimg div span:nth-child(3){
background-image: url(https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
background-size: 400% 100%;
}
.cr-bgimg div span:nth-child(4){
background-image: url(https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
background-size: 400% 100%;
}
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}
.cr-container input:checked ~ .cr-bgimg div span{
animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
0%{ left: 0px; }
100%{ left: 150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4){
transition: left 0.5s ease-in-out;
animation: none;
left: 0px;
z-index: 10;
}
</style>
</head>
<body>
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1">
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2">
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3">
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4">
<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
</section>
<script>
let cnt = 0;
const arrsel =["select-img-1","select-img-2","select-img-3","select-img-4"];
document.getElementById("select-img-1").checked = true;
setInterval(function() {
cnt++ ;
cnt = cnt % 4 ;
document.getElementById( arrsel[cnt]).checked = true;
}, 4000); // スライド間隔
</script>
</body>
</html>
No.4
- 回答日時:
No2です。
>そのループをホバー(オンマウス)などの手間をかけず自動再生にしたいのです。
説明にも書きましたが、トリガーはわかりやすくするために設定してあるだけです。
参考に挙げておいたサイトにも、自動で始まる例やループする例など様々な例が載せられていると思いますけれど・・・?
いずれにしろ、なさりたいことを実装するには、コピペではなく応用をする必要があります。
一から説明を書いているとメッチャ長くなり面倒なので、以下は自動でループする一例です。
(関連解説はNo2で挙げたサイトに全てあります。)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#box3 {
width: 200px; height: 600px;
position: relative;
}
#box3 div {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: no-repeat 0/cover url("./img/photo01.jpg");
z-index: 3;
}
#box3 div:first-child {
animation: 15s 3s infinite slide;
}
#box3 div:nth-child(2) {
background: no-repeat 0/cover url("./img/photo02.jpg");
z-index: 2;
animation: 15s 8s infinite slide;
}
#box3 div:nth-child(3) {
background: no-repeat 0/cover url("./img/photo03.jpg");
z-index: 1;
animation: 15s 13s infinite slide;
}
@keyframes slide {
0%,100% { width: 100%; z-index:3; }
10% { width:0; z-index: 3; }
11% {width: 0; z-index: 1; }
63% {width: 100%; z-index: 1; }
64% { z-index: 2; }
90% { z-index: 3; }
}
</style>
</head>
<body>
<h3>◇ CSS animation(3種画像)</h3>
<div id="box3">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
No.3
- 回答日時:
自動での無限ループは
animation: change-img-anim 30s infinite;
のように全体を繰り返す時間指定とinfiniteを使うことで対応が
できるようです。
https://1-notes.com/css-replace-images-automatic …
これらをどのように組み合わせるのかは、知識のある方からの
アドバイスを受けてください。
No.2
- 回答日時:
こんにちは
>知りたいのは画像切り替えアニメーションの方法なので~
ご質問のようなアニメーションの基本的な原理としては、2枚の画像を重ねておいて、上側の画像をスライドさせたりフェードアウトさせたりすればその効果を伴って下側の画像に切り替わったように見えます。
(上側にスライドインしたりフェードインしたりしても同様です)
アニメーションを実現する方法もいろいろありますが、大雑把に分けてCSSによる方法とjavascriptによる方法とが考えられます。
以下に、代表的なCSSでのアニメーションの例を、原理の例として載せておきます。
transitionによる方法は、比較的単純なアニメーションに向いています。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
animeationによる方法の場合は、@keyframesで時間経過とともに異なるアニメーションを定義することも可能なので、多少複雑なアニメーションを設定することも可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …
※ animationによる方は、変化の例示としてスライドが複数段階で動くようにしてあります。
※ いきなり開始しないように、以下の例では「画像へのホバー」で開始するようにしてあります。
(画像urlは適当にお手持ちのものに入れ替えてください)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#box1, #box2 {
width: 150px; height: 350px;
background: no-repeat 0/cover url("./img/photo02.jpg");
margin-bottom: 3em;
}
#box1 div, #box2 div {
width: 100%; height: 100%;
background: no-repeat 0/cover url("./img/photo01.jpg");
}
/*アニメーション設定*/
#box1:hover div { transition: 2s; width: 0; }
#box2:hover div { animation: slide 2s; }
@keyframes slide {
0% { width: 100% }
40%{ width: 70%; opacity: 1; }
60% { width: 70%; opacity: .7; }
100% { width: 0; opacity: 0; }
}
</style>
</head>
<body>
<h3>◇ CSS transition</h3>
<div id="box1"><div></div></div>
<h3>◇ CSS animation</h3>
<div id="box2"><div></div></div>
</body>
</html>
※ CSSアニメーションでは画像を入れ替えることはできませんので、その部分だけjavascriptを併用するか、あるいは、事前に全部の画像を重ねておいて、CSSアニメーションでz-index等を制御して重なり順を制御するような工夫をすれば、複数の画像の入れ替わりをCSSだけで行うことも可能と思います。
※ ご提示のサイトでは、一つの画像を短冊形に分割した画像を用意しておいて、それぞれを入れ替えているようですが、事前準備が少々面倒なように感じられます。
No1様がご提示のサイトでは、1枚の画像を表示上で分割して表示するようにしているようですので、CSS等の設定はやや複雑にはなりますが、沢山の画像を用意しなくてもよくなりますね。
※ javascriptによる方法の場合は、アニメーションの一コマ一コマを時間経過とともに順次設定してゆくような方法になります。(いわゆるパラパラ漫画と同じ)
質問者様がスクリプトを使えるのかどうか不明なので、例示は割愛しておきますが、以下あたりに基本的な考え方の説明がありますので、必要な場合にはご参考までにどうぞ。
https://developer.mozilla.org/ja/docs/Web/API/Ca …
詳しい解説ありがとうございます。
参考コードだけでなく、アニメーションについての学習用URLまで…
>ご質問のようなアニメーションの基本的な原理としては、2枚の画像を重ねておいて、上側の画像をスライドさせたりフェードアウトさせたりすればその効果を伴って下側の画像に切り替わったように見えます。
正直、コレは分かるんです!
でも一枚目の画像が(フェードなりスライドなりで)消えて、二枚目の画像になった後、二枚目の画像が消えて再び一枚目が出てくるようなループの作り方が分からないのです。(切り替えアニメーションの動きを解説してるサイト等でも二枚目が出てきて終わりみたいなのが多くて…)
そしてNo1の方への返信でも書きましたが、そのループをホバー(オンマウス)などの手間をかけず自動再生にしたいのです。
色々と書いてくださったのに、役立てられずすみません
No.1
- 回答日時:
この分野に詳しくないので、参考サイトだけですが。
https://ooigawa-bitter-sweet.hatenablog.com/entr …
https://ooigawa-bitter-sweet.hatenablog.com/entr …
早速の返信ありがとうございます。
教えて頂いたサイトの動きは、かなりイメージに近いのですが、できればボタンや矢印(手動でアニメーション開始するの)ではなく、時間経過による自動アニメーションにしたいのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
uwcs のマクロで画像認識をして...
-
EXCEL VBA 複数のImageコントロ...
-
スマホでサイトの画像を長押し→...
-
背景画像の繰り返しについて
-
UWSC 画像認識で条件分岐
-
トリミングで表示した画像をク...
-
Jimdoで画像をポップアップ表示...
-
UWSCでループ処理がうまくいき...
-
ImageMagick 画像生成
-
VBA シート毎に画像挿入
-
HTMLで画像をポップアップで表...
-
UWSCについて
-
C#で画像を他の画像に貼り付け...
-
raspberry pi でプログラムを開...
-
画像のビット数を変更する方法
-
多角形を繋げるレイアウト
-
【EXCEL VBA】ユーザーファーム...
-
gif 画像上の ボタンに リン...
-
画像認識アルゴリズムについて
-
UWSCの色判定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLでこの画像を表示したいで...
-
背景画像の繰り返しについて
-
HTMLです。画像をHTMLで表した...
-
【EXCEL VBA】ダブルクリックで...
-
jqueryスライダーを2段でスライ...
-
UWSC 画像認識で条件分岐
-
EXCEL VBA 複数のImageコントロ...
-
UWSC 画像判定と条件分岐について
-
PowerPoint VBA で画像の鮮明度...
-
gif 画像上の ボタンに リン...
-
「using Windows」でエラーが出る
-
Excel ユーザーフォームで表示...
-
vb.net 画像の透過について
-
UWSC「画像が無い場合」
-
uwcs のマクロで画像認識をして...
-
UWSCの画像認識と条件分岐につ...
-
uwscの画像認識に失敗します。
-
画像処理したBitmapをピクチャ...
-
VBA シート毎に画像挿入
-
VBAのユーザーフォームのイメー...
おすすめ情報