質問編集履歴
4
新たな問題が起こったため追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
|
|
19
19
|
```html
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
<div class="wrap">
|
|
22
|
+
|
|
23
|
+
<div class="inner">
|
|
22
24
|
|
|
23
25
|
<span class="mask">テキスト</span><br>
|
|
24
26
|
|
|
@@ -26,7 +28,7 @@
|
|
|
26
28
|
|
|
27
29
|
</div>
|
|
28
30
|
|
|
29
|
-
|
|
31
|
+
</div>
|
|
30
32
|
|
|
31
33
|
```
|
|
32
34
|
|
|
@@ -34,7 +36,45 @@
|
|
|
34
36
|
|
|
35
37
|
```CSS
|
|
36
38
|
|
|
39
|
+
/*----追記---*/
|
|
40
|
+
|
|
41
|
+
.wrap{
|
|
42
|
+
|
|
43
|
+
position: relative;
|
|
44
|
+
|
|
45
|
+
background-image: url("../img/bg.jpg");
|
|
46
|
+
|
|
47
|
+
background-size: cover;
|
|
48
|
+
|
|
49
|
+
background-position: center;
|
|
50
|
+
|
|
51
|
+
height: 84vh;
|
|
52
|
+
|
|
53
|
+
font-family: 'Noto Sans JP',sans-serif;
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.inner{
|
|
58
|
+
|
|
59
|
+
position: absolute;
|
|
60
|
+
|
|
61
|
+
top: 50%;
|
|
62
|
+
|
|
63
|
+
right: 16%;
|
|
64
|
+
|
|
65
|
+
-webkit-transform: translateY(-50%);
|
|
66
|
+
|
|
67
|
+
transform: translateY(-50%);
|
|
68
|
+
|
|
69
|
+
text-align: right;
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/*----追記ここまで---*/
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
37
|
-
div span{
|
|
77
|
+
.inner div span{
|
|
38
78
|
|
|
39
79
|
display: inline-block;
|
|
40
80
|
|
|
@@ -50,7 +90,7 @@
|
|
|
50
90
|
|
|
51
91
|
}
|
|
52
92
|
|
|
53
|
-
.mask
|
|
93
|
+
.mask-wrap{
|
|
54
94
|
|
|
55
95
|
display: table;
|
|
56
96
|
|
3
自分なりの予想を盛り込みました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
背景色の後に文字が表示されるアニメーションのjQueryの
|
|
1
|
+
背景色の後に文字が表示されるアニメーションのjQueryの発火条件の変更
|
test
CHANGED
|
@@ -4,17 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
写真ではなく、アニメーションの後に文字を表示させたいと考えています。
|
|
6
6
|
|
|
7
|
-
また、スクロール後に表示ではなくてサイトを開くと同時に,2つのテキストを時間差で動かしたいと考えています。
|
|
8
|
-
|
|
9
7
|
|
|
10
8
|
|
|
11
9
|
https://web.runland.co.jp/blog_cate0/post-2944
|
|
12
10
|
|
|
13
|
-
このサイトを参考に書いているのですが、
|
|
11
|
+
このサイトを参考に書いているのですが、アニメーションが正しく動きません。
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
アニメーションさせるテキストの位置が、ページを読み込んだ時にあらかじめ表示されているため、発火条件を変えれば動くのではないかと考えています。
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
|
2
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
背景色の後に文字が表示されるアニメーション
|
|
1
|
+
背景色の後に文字が表示されるアニメーションのjQueryの書き方について
|
test
CHANGED
|
File without changes
|
1
書き忘れを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -35,6 +35,22 @@
|
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
```CSS
|
|
38
|
+
|
|
39
|
+
div span{
|
|
40
|
+
|
|
41
|
+
display: inline-block;
|
|
42
|
+
|
|
43
|
+
font-size: 2.8rem;
|
|
44
|
+
|
|
45
|
+
color: #fff;
|
|
46
|
+
|
|
47
|
+
background-color: #000;
|
|
48
|
+
|
|
49
|
+
margin-bottom: 20px;
|
|
50
|
+
|
|
51
|
+
padding: 6px 10px;
|
|
52
|
+
|
|
53
|
+
}
|
|
38
54
|
|
|
39
55
|
.mask_wrap{
|
|
40
56
|
|