質問編集履歴
2
実現したいことにアニメーションの挙動を追加・問題に現状の画像を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
3
|
|
|
4
|
+
オープニングアニメーションの作成
|
|
5
|
+
・ロゴとテキストの画像を2枚配置
|
|
4
|
-
レスポンシブ対応で画像
|
|
6
|
+
・レスポンシブ対応で画像が重ならないようにしたい。
|
|
7
|
+
・アニメーションの挙動について
|
|
8
|
+
→はじめはロゴのみ中心からふわっと出る その後画像の位置（左）へ移動
|
|
9
|
+
テキストはロゴが左に移動する時に左から右に向かってふわっと出現するようにする
|
|
5
10
|
|
|
6
11
|
### 前提
|
|
7
12
|
|
|
@@ -15,6 +20,8 @@
|
|
|
15
20
|
min-widthを設定したことにより画像が重なってしまう。
|
|
16
21
|
absoluteの位置指定を％で行ったが、1100pxほどで画像同士が重なってしまう。
|
|
17
22
|
なるべく記述をすっきりさせたいのですが、メディアクエリで調節するしかないのでしょうか？
|
|
23
|
+
現状の重なっている画像を添付します
|
|
24
|
+
|
|
18
25
|
|
|
19
26
|
### 該当のソースコード
|
|
20
27
|
|
1
調査したことを追加・cssを修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
|
|
11
11
|
### 発生している問題・エラーメッセージ
|
|
12
12
|
|
|
13
|
+
画像の幅をwidthの設定だけだと画像が被ることはないが、
|
|
14
|
+
sp時に画像のサイズが小さくなり過ぎてしまうため、min-widthを設定。
|
|
15
|
+
min-widthを設定したことにより画像が重なってしまう。
|
|
13
16
|
absoluteの位置指定を％で行ったが、1100pxほどで画像同士が重なってしまう。
|
|
14
17
|
なるべく記述をすっきりさせたいのですが、メディアクエリで調節するしかないのでしょうか？
|
|
15
18
|
|
|
@@ -22,11 +25,13 @@
|
|
|
22
25
|
</div>
|
|
23
26
|
```
|
|
24
27
|
```css
|
|
28
|
+
|
|
25
29
|
.logo {
|
|
26
30
|
width: 100%;
|
|
27
31
|
height: 100%;
|
|
28
32
|
position: relative;
|
|
29
33
|
}
|
|
34
|
+
/*ロゴ1がふわっと浮き出る*/
|
|
30
35
|
.logo1 {
|
|
31
36
|
width: 3%;
|
|
32
37
|
min-width: 30px;
|
|
@@ -35,7 +40,27 @@
|
|
|
35
40
|
top: 50%;
|
|
36
41
|
left: 50%;
|
|
37
42
|
transform: translate(-50%,-50%);
|
|
43
|
+
animation: fadeUp 1.5s forwards,moveLeft 1.5s forwards 2s;
|
|
44
|
+
opacity: 0;
|
|
45
|
+
object-fit: contain;
|
|
38
46
|
}
|
|
47
|
+
|
|
48
|
+
@keyframes fadeUp {
|
|
49
|
+
from {
|
|
50
|
+
opacity: 0;
|
|
51
|
+
}
|
|
52
|
+
to {
|
|
53
|
+
opacity: 1;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
@keyframes moveLeft {
|
|
57
|
+
0% {
|
|
58
|
+
}
|
|
59
|
+
100% {
|
|
60
|
+
left: 40%;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
39
64
|
.text {
|
|
40
65
|
width: 15%;
|
|
41
66
|
min-width: 200px;
|
|
@@ -44,6 +69,23 @@
|
|
|
44
69
|
top: 51%;
|
|
45
70
|
left: 45%;
|
|
46
71
|
transform: translate(-50%,-50%);
|
|
72
|
+
opacity: 0; /* 最初は非表示に設定 */
|
|
73
|
+
animation: fadeInAndMove 2s forwards 2s; /* アニメーションの適用 */
|
|
74
|
+
object-fit: contain;
|
|
75
|
+
}
|
|
76
|
+
@keyframes fadeInAndMove {
|
|
77
|
+
0% {
|
|
78
|
+
opacity: 0;
|
|
79
|
+
}
|
|
80
|
+
100% {
|
|
81
|
+
opacity: 1;
|
|
82
|
+
left: 50%;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
47
85
|
}
|
|
48
86
|
```
|
|
49
87
|
|
|
88
|
+
### 調査したこと
|
|
89
|
+
画像の配置、サイズ調整について調査
|
|
90
|
+
absolute時の配置の単位を色々変えてみましたが、重なってしまうのは調整できませんでした。
|
|
91
|
+
|