【javascript】イメージスライダー javascriptを使って、HTML生成、CSS制御、レスポンシブ対応
以前にCSSだけでつくったスライダーを紹介しましたが、 今回は、javascriptでhtmlを生成し、レスポンシブ対応させたいと思います。
CSSだけで作ったスライダーは、HTML17行、CSS528行でしたが、
javascriptで作ると、HTML1行、CSS186行、javascript86行 で、作ることができました。
参考
CSSだけで作るスライダーは以下参照
【CSS】レスポンシブ対応 アニメーションスライダーの作り方
javascriptなし
HTML
今回は、javascriptでhtmlを生成するので、HTMLは一行だけです。
<div class="wrapper"></div>CSS
CSSのカスタムプロパティを使って変数を定義します。
:root {
--transform1: translate3d(360px, -50%, -460px) rotate3d(0, 1, 0, -30deg);
--transform2: translate3d(50px, -50%, -110px) rotate3d(0, 1, 0, -15deg);
--transform3: translate3d(-50%, -50%, 0) scale(1.3);
--transform4: translate3d(-390px, -50%, -110px) rotate3d(0, 1, 0, 15deg);
--transform5: translate3d(-710px, -50%, -460px) rotate3d(0, 1, 0, 30deg);
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
max-height: 430px;
background: #333;
perspective: 600px;
margin: 100px auto;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 225px;
object-fit: contain;
box-shadow: 0px 15px 10px #fff;
}
.box:nth-of-type(1) {
transform: var(--transform1);
z-index: 80;
animation: box1 15s ease-in infinite;
}
.box:nth-of-type(2) {
transform: var(--transform2);
z-index: 90;
animation: box2 15s ease-in infinite;
}
.box:nth-of-type(3) {
transform: var(--transform3);
z-index: 100;
animation: box3 15s ease-in infinite;
}
.box:nth-of-type(4) {
transform: var(--transform4);
z-index: 90;
animation: box4 15s ease-in infinite;
}
.box:nth-of-type(5) {
transform: var(--transform5);
z-index: 80;
animation: box5 15s ease-in infinite;
}
@keyframes box1 {
3%,
20% {
transform: var(--transform2);
z-index: 90;
}
23%,
40% {
transform: var(--transform3);
z-index: 100;
}
43%,
60% {
transform: var(--transform4);
z-index: 90;
}
63%,
80% {
transform: var(--transform5);
z-index: 80;
}
83%,
100% {
transform: var(--transform1);
z-index: 80;
}
}
@keyframes box2 {
3%,
20% {
transform: var(--transform3);
z-index: 100;
}
23%,
40% {
transform: var(--transform4);
z-index: 90;
}
43%,
60% {
transform: var(--transform5);
z-index: 80;
}
63%,
80% {
transform: var(--transform1);
z-index: 80;
}
83%,
100% {
transform: var(--transform2);
z-index: 90;
}
}
@keyframes box3 {
3%,
20% {
transform: var(--transform4);
z-index: 90;
}
23%,
40% {
transform: var(--transform5);
z-index: 80;
}
43%,
60% {
transform: var(--transform1);
z-index: 80;
}
63%,
80% {
transform: var(--transform2);
z-index: 90;
}
83%,
100% {
transform: var(--transform3);
z-index: 100;
}
}
@keyframes box4 {
3%,
20% {
transform: var(--transform5);
z-index: 80;
}
23%,
40% {
transform: var(--transform1);
z-index: 80;
}
43%,
60% {
transform: var(--transform2);
z-index: 90;
}
63%,
80% {
transform: var(--transform3);
z-index: 100;
}
83%,
100% {
transform: var(--transform4);
z-index: 90;
}
}
@keyframes box5 {
3%,
20% {
transform: var(--transform1);
z-index: 80;
}
23%,
40% {
transform: var(--transform2);
z-index: 90;
}
43%,
60% {
transform: var(--transform3);
z-index: 100;
}
63%,
80% {
transform: var(--transform4);
z-index: 90;
}
83%,
100% {
transform: var(--transform5);
z-index: 80;
}
}javascript
CSSで定義した変数をjavascriptで制御します。
const imgArr = [ // 画像のパスを配列へ
"../../images/blog/202110/1 (1).JPG",
"../../images/blog/202110/1 (2).JPG",
"../../images/blog/202110/1 (3).JPG",
"../../images/blog/202110/1 (4).JPG",
"../../images/blog/202110/1 (5).JPG",
];
const wrapper = document.querySelector(".wrapper"); // この要素内にHTMLを生成
const wrapperWidth = wrapper.clientWidth; // 横幅取得
if (wrapperWidth > 500 && wrapperWidth < 850) { // 500px以上850px未満の時の処理
for (let i = 0; i < imgArr.length; i++) {
const element = imgArr[i];
const box = document.createElement("div");
const img = document.createElement("img");
box.classList.add("box");
box.style = "width: 200px; height: 120px;";
img.src = element;
document.documentElement.style.setProperty(
"--transform1",
"translate3d(235px, -50%, -460px) rotate3d(0, 1, 0, -50deg)"
);
document.documentElement.style.setProperty(
"--transform2",
"translate3d(55px, -50%, -110px) rotate3d(0, 1, 0, -45deg)"
);
document.documentElement.style.setProperty(
"--transform3",
"translate3d(-50%, -50%, 0) scale(1.3)"
);
document.documentElement.style.setProperty(
"--transform4",
"translate3d(-245px, -50%, -110px) rotate3d(0, 1, 0, 45deg)"
);
document.documentElement.style.setProperty(
"--transform5",
"translate3d(-435px, -50%, -460px) rotate3d(0, 1, 0, 50deg)"
);
wrapper.appendChild(box);
box.appendChild(img);
wrapper.style.height = "300px";
}
} else if (wrapperWidth < 500) { // 500px未満の時の処理
for (let i = 0; i < imgArr.length; i++) {
const element = imgArr[i];
const box = document.createElement("div");
const img = document.createElement("img");
box.classList.add("box");
box.style = "width: 140px; height: 80px;";
img.src = element;
document.documentElement.style.setProperty(
"--transform1",
"translate3d(170px, -50%, -460px) rotate3d(0, 1, 0, -50deg)"
);
document.documentElement.style.setProperty(
"--transform2",
"translate3d(35px, -50%, -110px) rotate3d(0, 1, 0, -45deg)"
);
document.documentElement.style.setProperty(
"--transform3",
"translate3d(-50%, -50%, 0) scale(1.3);"
);
document.documentElement.style.setProperty(
"--transform4",
"translate3d(-175px, -50%, -110px) rotate3d(0, 1, 0, 45deg)"
);
document.documentElement.style.setProperty(
"--transform5",
"translate3d(-310px, -50%, -460px) rotate3d(0, 1, 0, 50deg)"
);
wrapper.appendChild(box);
box.appendChild(img);
wrapper.style.height = "230px";
}
} else { // 850px以上の時の処理
for (let i = 0; i < imgArr.length; i++) {
const element = imgArr[i];
const box = document.createElement("div");
const img = document.createElement("img");
box.classList.add("box");
img.src = element;
wrapper.appendChild(box);
box.appendChild(img);
}
} 
画像のパスを配列に
CSSのカスタムプロパティで画像5枚分のtransformを定義する。
javascriptで、横幅に合わせてCSSを制御し、レスポンシブに対応させる。
