質問編集履歴
2
markdown追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -59,7 +59,46 @@
|
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
```CSS keyframe
|
|
62
|
+
@keyframes fadeInUp {
|
|
63
|
+
0% {
|
|
64
|
+
transform: translateY(30px);
|
|
65
|
+
opacity:0;
|
|
66
|
+
}
|
|
67
|
+
50% {
|
|
68
|
+
transform: translateY(15px);
|
|
69
|
+
opacity:0.5;
|
|
70
|
+
}
|
|
71
|
+
100% {
|
|
72
|
+
transform: translateY(0px);
|
|
73
|
+
opacity:1;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
@keyframes blend {
|
|
77
|
+
0% {
|
|
78
|
+
left:0%;
|
|
79
|
+
opacity:0;
|
|
80
|
+
}
|
|
81
|
+
50% {
|
|
82
|
+
left:0%;
|
|
83
|
+
opacity:1;
|
|
84
|
+
}
|
|
85
|
+
100% {
|
|
86
|
+
left:0%;
|
|
87
|
+
opacity:0;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
62
90
|
|
|
91
|
+
.fadeInUp {
|
|
92
|
+
animation-name: fadeInUp;
|
|
93
|
+
animation-duration: 1s;
|
|
94
|
+
animation-delay: 2s;
|
|
95
|
+
animation-timing-function: ease;
|
|
96
|
+
animation-fill-mode: both;
|
|
97
|
+
}
|
|
98
|
+
@keyframes showMe {
|
|
99
|
+
0%{opacity: 0;}
|
|
100
|
+
100%{opacity: 1;}
|
|
101
|
+
}
|
|
63
102
|
```
|
|
64
103
|
### 試したこと
|
|
65
104
|
|
1
markdown
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
3枚のpng画像を重ねてfadeinし、その後ろにjpg背景を固定したい。
|
|
3
|
+
3枚のpng画像を重ねてfadeinし、その後ろにjpg背景を固定したい。(4枚画像同一サイズ)
|
|
4
4
|
背景はfadeinなしで最初から表示されるようにしたい。
|
|
5
|
+
背景の固定はfixではなくスクロールには連動させたい。
|
|
5
6
|
|
|
6
7
|
|
|
7
8
|
|
|
@@ -13,14 +14,14 @@
|
|
|
13
14
|
|
|
14
15
|
### 該当のソースコード
|
|
15
16
|
|
|
16
|
-
HTML
|
|
17
|
+
```HTML
|
|
17
18
|
<div class="motion2">
|
|
18
19
|
<img src="/static/1.png" alt="" width="800" height="" id="01"/>
|
|
19
20
|
<img src="/static/2.png" alt="" width="800" height="" id="01"/>
|
|
20
21
|
<img src=""/static/3.png" alt="" width="800" height="" id="01"/>
|
|
21
22
|
</div>
|
|
22
|
-
|
|
23
|
+
```
|
|
23
|
-
CSS
|
|
24
|
+
```CSS
|
|
24
25
|
.pi_image .motion2 {
|
|
25
26
|
position: relative;
|
|
26
27
|
max-width: 800px;
|
|
@@ -54,7 +55,12 @@
|
|
|
54
55
|
}
|
|
55
56
|
（同様にimg:nth-child(3)）
|
|
56
57
|
|
|
58
|
+
コード
|
|
59
|
+
```
|
|
57
60
|
|
|
61
|
+
```CSS keyframe
|
|
62
|
+
|
|
63
|
+
```
|
|
58
64
|
### 試したこと
|
|
59
65
|
|
|
60
66
|
・<div class="motion2">にjpgを付け足し時間差で調整する、うまくいきませんでした。
|