質問編集履歴
1
コードの一部を参考サイト様と同じように揃えました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,16 +10,6 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
### 参考コードから変更した箇所
|
|
14
|
-
|
|
15
|
-
<figure class="image" style="background-image: url(img1.jpg);"></figure>
|
|
16
|
-
|
|
17
|
-
とあるところを、
|
|
18
|
-
|
|
19
|
-
<img style="background-image: url(images/img01.jpg);">に変更。それに伴い、該当のcssにも手を加えました。
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
13
|
### 試してみたこと
|
|
24
14
|
|
|
25
15
|
フェード要素にしている#slick-main .slideobjectとフェード設定要素の#slick-main .slick-continue .slideobjectのopacityの値をそれぞれ変えてみたりしましたが、変化が見られませんでした。
|
|
@@ -66,31 +56,29 @@
|
|
|
66
56
|
|
|
67
57
|
<div class="slideobject">
|
|
68
58
|
|
|
69
|
-
<img style="background-image: url(images/img01.jpg);">
|
|
59
|
+
<figure class="image" style="background-image: url(images/img01.jpg);"></figure>
|
|
70
|
-
|
|
60
|
+
|
|
71
|
-
<p class="text">
|
|
61
|
+
<p class="text">Slide01</p>
|
|
72
62
|
|
|
73
63
|
</div>
|
|
74
64
|
|
|
75
65
|
<div class="slideobject">
|
|
76
66
|
|
|
77
|
-
<img style="background-image: url(images/img02.jpg);">
|
|
67
|
+
<figure class="image" style="background-image: url(images/img02.jpg);"></figure>
|
|
78
|
-
|
|
68
|
+
|
|
79
|
-
<p class="text">
|
|
69
|
+
<p class="text">Slide02</p>
|
|
80
70
|
|
|
81
71
|
</div>
|
|
82
72
|
|
|
83
73
|
<div class="slideobject">
|
|
84
74
|
|
|
85
|
-
<img style="background-image: url(images/main_visual.jpg);">
|
|
75
|
+
<figure class="image" style="background-image: url(images/main_visual.jpg);"></figure>
|
|
86
|
-
|
|
76
|
+
|
|
87
|
-
<p class="text">
|
|
77
|
+
<p class="text">Slide03</p>
|
|
88
78
|
|
|
89
79
|
</div>
|
|
90
80
|
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
</body>
|
|
81
|
+
</div>/body>
|
|
94
82
|
|
|
95
83
|
</html>
|
|
96
84
|
|
|
@@ -110,11 +98,11 @@
|
|
|
110
98
|
|
|
111
99
|
#slick-main .slick-continue .slideobject{ /* エフェクトの継続用に付与したslick-continueのフェード設定 *//* [重要]slick側の設定と同じdurationを取る */ opacity: 0; transition: ease 5.0s; }
|
|
112
100
|
|
|
113
|
-
#slick-main img{ /* 画像 ズーム要素の初期設定 */ transform: scale(1.0, 1.0); transition: 0s; }
|
|
101
|
+
#slick-main .image{ /* 画像 ズーム要素の初期設定 */ transform: scale(1.0, 1.0); transition: 0s; }
|
|
114
|
-
|
|
102
|
+
|
|
115
|
-
#slick-main .slick-active img{ /* 画像 slick-active(効果開始) *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.2, 1.2); transition: ease 10.0s; }
|
|
103
|
+
#slick-main .slick-active .image{ /* 画像 slick-active(効果開始) *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.2, 1.2); transition: ease 10.0s; }
|
|
116
|
-
|
|
104
|
+
|
|
117
|
-
#slick-main .slick-continue img{ /* 画像 slick-continue *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.4, 1.4); transition: ease 10.0s; }
|
|
105
|
+
#slick-main .slick-continue .image{ /* 画像 slick-continue *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.4, 1.4); transition: ease 10.0s; }
|
|
118
106
|
|
|
119
107
|
#slick-main p.text{ /* テキスト 初期設定 */ opacity: 0; transition: 0s; }
|
|
120
108
|
|
|
@@ -128,9 +116,9 @@
|
|
|
128
116
|
|
|
129
117
|
.slideobject{ margin-top: 100px; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; }
|
|
130
118
|
|
|
131
|
-
.slideobject img{background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; }
|
|
132
|
-
|
|
133
|
-
.slideobject p.text{ font-size: 20px; line-height: 1.5em; width: 10.0em; height: 3.0em; margin: auto; position: absolute; z-index: 20; top: 0; left: 0; right: 0; bottom: 0; color: #fff; font-weight: bold; text-align: center; overflow: hidden; }
|
|
119
|
+
.slideobject .image {background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; }
|
|
120
|
+
|
|
121
|
+
.slideobject p.text{ font-size: 20px; line-height: 1.5em; width: 10.0em; height: 3.0em; margin: auto; position: absolute; z-index: 20; top: 0; left: 0; right: 0; bottom: 0; color: #fff; font-weight: bold; text-align: center; overflow: hidden; font-family: sofia-pro, sans-serif; font-weight: 700; font-style: normal; }
|
|
134
122
|
|
|
135
123
|
```
|
|
136
124
|
|