画像がじわじわと切り替わるスライダーを作りたい

実現したいこと

ズームアップで、5秒で次の画像に切り替わる。その際、前の画像の残像が残るようにじわじわと次の画像に切り替わるsliderにする。リンク内容 https://www.ginga999.co.jp/このサイトのslideは、画像が後退していますが、画像がじわじわと切り替わるイメージ。

発生している問題・分からないこと

sliderそのものは出来たが、画像の切り替えが早い。ボタンを切り替えるように変わってしまう。

該当のソースコード

html
1<body>
2<div class="top_fixed">    
3    <div class="headtop" id="headtop">
4        <div class="head_logo">
5            <a href="index.html"><img src="img/city-search_06.png" alt="logo"></a>
6        </div>
7        <div class="head_right">
8            <div class="headtext">text</div>
9            <div class="headtext2">text</div>
10        </div>
11    </div>
12</div>
13    <div class="header">
14        <div class="slide">
15            <ul>
16                <li>
17                    <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">text</div></a>
18                </li>            
19                <li>
20                    <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">text2</div></a>
21                </li>
22                <li>
23                    <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">text3</div></a>
24                </li>
25                <li>
26                    <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a>
27                </li>
28                <li>
29                    <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a>
30                </li>
31            </ul>
32        </div>
33    </div>
34    
35    <div class="contents">
36        <div class="kijibox">
37            <div class="kiji_link">
38                <span><a href="#">text</a><br/></span>
39                text<br/>
40                text<br/>
41                text<br/>
42            </div>
43
44        </div>
45        
46        <div class="kita_side_nav">
47            <div class="link">
48                <span><a href="#">text</a></span>
49            </div>
50        </div>
51    </div>
52    
53   
54</body>
55</html>

css
1.top_fixed {
2	width: 100%;
3    position: relative;
4    top: 0px;
5	background-color: #fff;/* 背景色を追加して潜り込みを防ぐ */
6	z-index: 9;
7}
8.headtop {
9    width: 100%;
10	display: flex;
11	position: fixed;
12    z-index: 11;
13    background-color: rgb(4 70 104);
14    padding: 10px 2%;
15    transition: height 0.3s ease, font-size 0.3s ease;
16	height: auto; 
17
18}
19
20.head_logo{
21	width:50%;
22	transition: height 0.3s ease;
23}
24
25.head_logo img{
26	max-width:35%;
27	transition: height 0.3s ease;
28	}
29	
30.head_right{
31	width:40%;
32	margin: 5px 0 0 0;
33}
34
35.headtext, .headtext2 {
36    color: #fff;
37    overflow: hidden;
38    transition: font-size 0.3s ease;
39}
40.headtext {
41	font-size: 22px;
42	font-weight: 400;
43	margin-top: 3%;
44}
45.headtext2 {
46	font-size: 16px;
47	margin: -5px 0 0 0;
48}
49.header{
50	width:100%;
51	overflow: hidden;
52	padding: 0;
53    margin: 0;
54}
55.contents{
56	width:100%;
57	overflow: hidden;
58	display: flex;
59	margin: 0px 0px 0px 0px;
60    padding: 0px 0px;
61}
62.main {
63    z-index: 2;
64    }
65
66.kijibox{
67	width:50%;
68	margin: 10px 10px 10px 10px;	
69}
70
71.kita_side_nav{
72	width:50%;
73	margin: 10px 10px 10px 10px;
74	border-left: 1px dotted;
75}
76
77.kiji_link span {
78	font-weight: bold;
79}
80.kiji_link a {
81	text-decoration: none;
82	color: black;
83}
84
85.link span {
86	font-weight: bold;
87}
88.link a{
89	text-decoration: none;
90	color: black;
91}
92
93
94
95      * {
96    margin: 0;
97    padding: 0;
98    box-sizing: border-box;
99}
100.slide {
101    display: flex;
102    overflow: hidden;
103    width: 100%;
104}
105
106.slide ul {
107    list-style-type: none;
108    margin: 0;
109    padding: 0;
110    width: 100%;
111}
112
113.slide li {
114    position: relative;
115    margin-right: 0px;
116    float: left;
117    display: block;
118    transform: scale(1); 
119}
120
121.slide li .active {
122    opacity: 1;
123    transform: scale(1.05);
124    height: auto;
125}
126
127.slide img {
128    display: block;
129    width: 100%;
130    height: 0px;
131    opacity: 0;
132    transition: opacity 1s ease-in-out, transform 6s ease-out;
133    object-fit: contain; 
134}
135
136.text-overlay {
137    position: absolute;
138    bottom: 40%;
139    left: 50%;
140    transform: translate(-50%, -50%); 
141    color: white;
142    font-size: 24px;
143    text-align: center; 
144    max-width: 90%; 
145    white-space: nowrap; 
146    letter-spacing: 0.4em;
147    line-height: 2.3em;
148    font-family: serif;
149    font-weight: bold;
150}
151
152@media screen and (max-width:800px){
153     .text-overlay {
154        font-size: 20px;
155    }
156}
157@media screen and (max-width:700px){
158    .text-overlay {
159        font-size: 18px;
160    }
161}
162@media screen and (max-width:600px){
163    .text-overlay {
164        font-size: 14px;
165    }
166}
167@media screen and (max-width:450px){
168    .text-overlay {
169        font-size: 12px;
170    }
171
172}
173@media screen and (max-width:400px){
174.text-overlay {
175    font-size: 9px;
176}
177}
178@media screen and (max-width:300px){
179.text-overlay {
180    font-size: 7px;
181}
182}
183

js
1    let dsp1;
2    let dsp2;
3    
4    window.addEventListener('load', function () {
5        viewSlide('.slide img');
6        console.log("viewSlide function called");
7        initSlide();
8    });
9    
10    function viewSlide(className, slideNo = -1) {
11        let imgArray = document.querySelectorAll(className);
12        if (slideNo >= 0) {
13            imgArray[slideNo].classList.remove('active');
14        }
15        slideNo++;
16        if (slideNo >= imgArray.length) {
17            slideNo = 0;
18        }
19        imgArray[slideNo].classList.add('active');
20        setTimeout(function () { viewSlide(className, slideNo); }, 5000);
21    }
22    
23    function initSlide() {
24        let elems = document.getElementsByTagName("p");
25        for (let i = 0; i < elems.length; i++) {
26            elems[i].className = "before";
27        }
28        dsp1 = false;
29        dsp2 = false;
30    }

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

cssのtransition: opacity 1s ease-in-out, transform 6s ease-out;の設定を変えても変化なし。

補足

特になし

kei344

2024/06/02 13:40

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

naaS

2024/06/02 14:34

コメントありがとうございます。⚪︎⚪︎を試したところ問題が解決しました！ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

kei344

2024/06/02 14:45

hatena19 さんの回答にベストアンサーをつけましょう。

行動規範の内容に同意します

回答1件

ベストアンサー

「前の画像の残像が残るようにじわじわと次の画像に切り替わ」らない原因は下記です。

imgのheightを 0 と auto で切り替えてますが、これはアニメーションが効きません。表示時は 0→auto で瞬時に切り替わります。opacity は0→1はアニメーションで表示されますのでフェイドインします。非表示時は、auto→0と瞬時に切り替わりますでの、アニメーションする間がないです。

対策として、下記のような手法をとります。

imgのheightはautoにしておいて、親のli要素を position: absolute;で固定配置して、各li要素を重ねます。

position: absolute;にすると他要素からは高さ0と扱われますので、親のul要素に高さを設定します。画像のアスペクト比に合わせるのなら、CSSのaspect-ratioを使うといいでしょう。

オーバーレイテキストもアニメーションで表示/非表示させる必要がありますので、
transitionはimg要素ではなく共通の親のa要素に設定します。

JSのviewSlideの対象も'.slide img'ではなく'.slide li'にして、li要素にactiveクラスを付与するようにします。

li要素を重ねているので、最後のli要素以外はリンクが無効になりますので、activeのli要素をz-indexで前面に移動させます。

コード例

CSSの .slide 以降のコードを下記のように修正します。

css
1.slide {
2  overflow: hidden;
3  width: 100%;
4}
5.slide ul {
6  list-style-type: none;
7  margin: 0;
8  padding: 0;
9  aspect-ratio: 2 / 1; /* 画像のアスペクト比に合わせる */
10}
11.slide li {
12  position: absolute;
13  margin-right: 0;
14}
15.slide li.active {
16  z-index: 3;
17}
18.slide li a {
19  opacity: 0;
20  transform: scale(1);
21  transition: opacity 1s ease-in-out;  
22}
23.slide li.active a {
24  opacity: 1;
25}
26.slide li img {
27  display: block;
28  width: 100%;
29  object-fit: cover; 
30  transform: scale(1);
31  transition: transform 6s ease-out;
32}
33.slide li.active a img {
34  transform: scale(1.05);
35}

js
1    window.addEventListener('load', function () {
2        viewSlide('.slide li');
3        console.log("viewSlide function called");
4        initSlide();
5    });