戻る

画像のフェードイン・フェードアウト

画像を切り替えるたび、フェードイン・フェードアウトをする方法

<img id="image" src="" width=300px>
copy

#image {
	animation :imagefade 4s infinite;
	opacity: 0;
}

@keyframes imagefade 
{
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

imgタグのCSSを準備します。
imgタグのidに対してCSSを設定するため「#タグのid」とするため「#image」として設定します。
CSSの一括指定プロパティです。
スタイル間のアニメーションを適用します。
(例)

imagefade	keyframesを実行する名前
4s	4秒間
inifinite	無限ループ

keyframesはアニメーション開始から終了まで、どのようなアニメーションを実行するかを指定するCSSの文法です。
opacity:要素の不透明度を設定します。

copy

let index = 0;
const path = "ここに画像までのパスを設定します。";
let aryImage = ["soco-st_sample1.png", "soco-st_sample2.png", "soco-st_sample3.png", "soco-st_sample4.png", "soco-st_sample5.png"];
let image = document.getElementById("image");
changeImage();
function changeImage() 
{
	//画像枚数を超える場合はインデックスを0にします
	if (index == aryImage.length) index = 0;
	//画像の場所にパス + 画像ファイル名を設定します
	image.src = path + aryImage[index];
	//秒数を指定
	setTimeout("changeImage()", 4000);
	//次のインデックスにインクリメントします
	index++;
}

(例)
ルート/img/soco-st_sample1.png
ルート/sample.html
sample.htmlから画像を取得するパスは
const path = "img/";
となります。

使用する画像を配列に格納しています。
「aryImage.length」は画像配列の個数で、このサンプルでは5を返します。
indexは0から始まる配列要素を指定するために使用しているインデックスの値です。
indexの値は0から始まるため、「4」が5個目の画像を指します。
そのためindexの値が5になったら先頭の0にリセットします。

getElementByIdで取得したオブジェクトの画像プロパティに画像情報を設定します。

タイマーで4秒後にchangeImageを実行します

画像のサンプルとして「ソコスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]ソコスト

URL[https://soco-st.com][クリックすると開きます])

戻る

back

Fade in and out images

How to fade in and out every time you switch images

<img id="image" src="" width=300px>
copy

#image {
	animation :imagefade 4s infinite;
	opacity: 0;
}

@keyframes imagefade 
{
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

Prepare CSS for the img tag.
To set CSS for the img tag's id, set it as "#tagid" and "#image".
a shorthand property for CSS.
applies animation between styles.
ex.)

imagefade	Name to execute keyframes
4s	4seconds
inifinite	Infinite Loop

keyframes is a CSS grammar that specifies what kind of animation to perform from the start to the end of the animation.
opacity:Set the opacity of an element.


copy

let index = 0;
const path = "This is where put the path to image.";
let aryImage = ["soco-st_sample1.png", "soco-st_sample2.png", "soco-st_sample3.png", "soco-st_sample4.png", "soco-st_sample5.png"];
let image = document.getElementById("image");
changeImage();
function changeImage() 
{
	//If the number of images is exceeded, set the index to 0.
	if (index == aryImage.length) index = 0;
	//Set the path to the image location + image filename
	image.src = path + aryImage[index];
	//Specify the number of seconds
	setTimeout("changeImage()", 4000);
	//Increment to the next index
	index++;
}

ex.)
ROOT/img/soco-st_sample1.png
ROOT/sample.html
Path to get image from sample.html
const path = "img/";

The images to be used are stored in an array.

"aryImage.length" is the number of elements in the image array.
In this sample, it returns 5.
index is the index value used to specify the array element, starting from 0.
Since the index value starts from 0, "4" refers to the fifth image.
Therefore, when the index value becomes 5,
it is reset to the begining 0.

Set image information to the image property of the object obtained with getElementById.

timer will execute changeImage method after 4 seconds.


image sample used are from "illustration by soco-st.com"
Thank you very much.

[URL]soco-st.com

URL[https://soco-st.com][click to open the homepage])

back