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