質問編集履歴
1
説明の簡略化
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
Reactを
|
|
3
|
+
現在htmlで書かれたWebページをReactで書き直すサイト模写課題（見た目・動きも同じものにする）を行っているのですが、画面を下にスクロールしていったときに出てくるアニメーションを、jQueryを使わずにReactで実装したいと思っています。
|
|
4
4
|
|
|
5
|
+
|
|
6
|
+
|
|
5
|
-
|
|
7
|
+
書き写している元サイト↓
|
|
6
8
|
|
|
7
9
|
https://taroken.org/portfolio/index.html
|
|
8
10
|
|
|
9
|
-
（
|
|
11
|
+
（About,Thoughtなどの見出し文字が出てくるアニメーション部分です。
|
|
12
|
+
|
|
13
|
+
→指定した要素が画面内に入ってきたときにopacity, font-sizeなどを設定した独自アニメーションを読み込みたい）
|
|
10
14
|
|
|
11
15
|
|
|
12
16
|
|
|
@@ -20,15 +24,21 @@
|
|
|
20
24
|
|
|
21
25
|
|
|
22
26
|
|
|
23
|
-
|
|
27
|
+
エラーは出ていないのですが、現段階では
|
|
24
28
|
|
|
25
|
-
|
|
29
|
+
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
|
|
26
30
|
|
|
27
|
-
|
|
31
|
+
</head>
|
|
32
|
+
|
|
33
|
+
で読み込んだAnimate.cssの定型アニメーションしか実装できないようです。
|
|
28
34
|
|
|
29
35
|
|
|
30
36
|
|
|
31
37
|
### 該当のソースコード
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
32
42
|
|
|
33
43
|
|
|
34
44
|
|
|
@@ -44,7 +54,7 @@
|
|
|
44
54
|
|
|
45
55
|
|
|
46
56
|
|
|
47
|
-
<ScrollAnimation animateIn>
|
|
57
|
+
<ScrollAnimation animateIn='fadeIn'>
|
|
48
58
|
|
|
49
59
|
<h2 className={classes.fadeinTxt}>
|
|
50
60
|
|
|
@@ -92,15 +102,7 @@
|
|
|
92
102
|
|
|
93
103
|
### 試したこと
|
|
94
104
|
|
|
95
|
-
|
|
105
|
+
jQueryを使わないという前提でいろいろ調べた結果、react-animate-on-scrollを使えば実装できそうだなという考えに至ったのですが、既成の定型アニメーションしか使えず現在に至ります。
|
|
96
|
-
|
|
97
|
-
https://www.npmjs.com/package/react-animate-on-scroll
|
|
98
|
-
|
|
99
|
-
上記コードの<ScrollAnimation>部分にanimateInプロパティを適用して、h2要素が画面内（Viewport）に入ったら自分で作成したanimate.min.css内のアニメーションを適用するという動きを作りたいのですが、サイトの情報を見る限りではanimateInからオリジナルのCSSアニメーションを適用する方法（書き方）が分かりませんでした。
|
|
100
|
-
|
|
101
|
-
この実装についての実現方法、またはもっと良い方法があるよという情報等ございましたら、ご教示願います。
|
|
102
|
-
|
|
103
|
-
よろしくお願い致します。
|
|
104
106
|
|
|
105
107
|
|
|
106
108
|
|