回答編集履歴
2
コメントで指摘された不具合を修正
test
CHANGED
|
@@ -11,7 +11,9 @@
|
|
|
11
11
|
オーバーレイテキストもアニメーションで表示/非表示させる必要がありますので、
|
|
12
12
|
transitionはimg要素ではなく共通の親のa要素に設定します。
|
|
13
13
|
|
|
14
|
-
JSのviewSlideの対象も'.slide img'ではなく'.slide li
|
|
14
|
+
JSのviewSlideの対象も'.slide img'ではなく'.slide li'にして、li要素にactiveクラスを付与するようにします。
|
|
15
|
+
|
|
16
|
+
li要素を重ねているので、最後のli要素以外はリンクが無効になりますので、activeのli要素をz-indexで前面に移動させます。
|
|
15
17
|
|
|
16
18
|
コード例
|
|
17
19
|
---
|
|
@@ -32,12 +34,15 @@
|
|
|
32
34
|
position: absolute;
|
|
33
35
|
margin-right: 0;
|
|
34
36
|
}
|
|
37
|
+
.slide li.active {
|
|
38
|
+
z-index: 3;
|
|
39
|
+
}
|
|
35
40
|
.slide li a {
|
|
36
41
|
opacity: 0;
|
|
37
42
|
transform: scale(1);
|
|
38
43
|
transition: opacity 1s ease-in-out;
|
|
39
44
|
}
|
|
40
|
-
.slide li
|
|
45
|
+
.slide li.active a {
|
|
41
46
|
opacity: 1;
|
|
42
47
|
}
|
|
43
48
|
.slide li img {
|
|
@@ -47,14 +52,14 @@
|
|
|
47
52
|
transform: scale(1);
|
|
48
53
|
transition: transform 6s ease-out;
|
|
49
54
|
}
|
|
50
|
-
.slide li
|
|
55
|
+
.slide li.active a img {
|
|
51
56
|
transform: scale(1.05);
|
|
52
57
|
}
|
|
53
58
|
```
|
|
54
59
|
|
|
55
60
|
```js
|
|
56
61
|
window.addEventListener('load', function () {
|
|
57
|
-
viewSlide('.slide li
|
|
62
|
+
viewSlide('.slide li');
|
|
58
63
|
console.log("viewSlide function called");
|
|
59
64
|
initSlide();
|
|
60
65
|
});
|
1
コード修正
test
CHANGED
|
@@ -35,16 +35,20 @@
|
|
|
35
35
|
.slide li a {
|
|
36
36
|
opacity: 0;
|
|
37
37
|
transform: scale(1);
|
|
38
|
-
transition: opacity 1s ease-in-out
|
|
38
|
+
transition: opacity 1s ease-in-out;
|
|
39
39
|
}
|
|
40
40
|
.slide li a.active {
|
|
41
41
|
opacity: 1;
|
|
42
|
-
transform: scale(1.05);
|
|
43
42
|
}
|
|
44
43
|
.slide li img {
|
|
45
44
|
display: block;
|
|
46
45
|
width: 100%;
|
|
47
|
-
object-fit: cover;
|
|
46
|
+
object-fit: cover;
|
|
47
|
+
transform: scale(1);
|
|
48
|
+
transition: transform 6s ease-out;
|
|
49
|
+
}
|
|
50
|
+
.slide li a.active img {
|
|
51
|
+
transform: scale(1.05);
|
|
48
52
|
}
|
|
49
53
|
```
|
|
50
54
|
|