質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

5211閲覧

React.jsでのスクロールに反応(要素が画面内に入ったら)するアニメーションの適用

rin1026

総合スコア6

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/09/10 12:25

編集2019/09/14 04:22

前提・実現したいこと

現在htmlで書かれたWebページをReactで書き直すサイト模写課題(見た目・動きも同じものにする)を行っているのですが、画面を下にスクロールしていったときに出てくるアニメーションを、jQueryを使わずにReactで実装したいと思っています。

書き写している元サイト↓
https://taroken.org/portfolio/index.html
(About,Thoughtなどの見出し文字が出てくるアニメーション部分です。
→指定した要素が画面内に入ってきたときにopacity, font-sizeなどを設定した独自アニメーションを読み込みたい)

発生している問題・エラーメッセージ

エラーは出ていないのですが、現段階では

<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> で読み込んだAnimate.cssの定型アニメーションしか実装できないようです。

該当のソースコード

React

1return ( 2 <div className={classes.about + " " + classes.parallax1}> 3 <div className={classes.aboutWrapper}> 4 <div className={classes.aboutContents}> 5 6 <ScrollAnimation animateIn='fadeIn'> 7 <h2 className={classes.fadeinTxt}> 8 <span>A</span> 9 <span>B</span> 10 <span>O</span> 11 <span>U</span> 12 <span>T</span> 13 </h2> 14 </ScrollAnimation> 15 16 <Article 17 article1={articles.article1} 18 article2={articles.article2} 19 /> 20 21 <LinkButton/> 22 23 </div> 24 </div> 25 </div> 26 );

試したこと

jQueryを使わないという前提でいろいろ調べた結果、react-animate-on-scrollを使えば実装できそうだなという考えに至ったのですが、既成の定型アニメーションしか使えず現在に至ります。

補足情報(FW/ツールのバージョンなど)

npm -v 6.10.2
node -v 10.16.2
上記サイトを参考に、作業中のプロジェクトにnpm install react-animate-on-scroll --saveコマンドでインストール済みで、上記コードのJSファイル内でanimate.min.cssをimportしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

8zca

2019/09/20 15:05

スクロールして画面内に要素が入るとアニメーションするという目的はreact-animate-on-scrollを導入することで解決されていると思いますが、やりたいことはお手本サイトのようにABOUTを1文字ずつ順番に出すようなアニメーションを作りたいということでしょうか?
rin1026

2019/09/20 16:27

はい、同じ動きを実装したいので、CSSでopacity・transition-delayなどを設定したアニメーションを使用したいと考えています。
guest

回答1

0

ベストアンサー

ScrollAnimationを使って1文字ずつアニメーションさせるやり方が簡単そうですね。(delayは調整してください)

<ScrollAnimation animateIn='fadeIn' delay={1000} style={{display: 'inline-block'}}> <span>A</span> </ScrollAnimation> <ScrollAnimation animateIn='fadeIn' delay={1500} style={{display: 'inline-block'}}> <span>B</span> </ScrollAnimation>

投稿2019/09/21 02:08

8zca

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rin1026

2019/09/22 15:58

なるほど、シンプルが故にこの発想は思い浮かびませんでした。 全く同じ動きのアニメーションとまではいかずとも、この方法においては最も近い動きを作ることができたと思うのでひとまずは解決とさせていただきます! ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問