2019年10月8日(火)
スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」
スクロールしてビューポートに要素が入る際に、さまざまなアニメーションを適用するためのReactコンポーネントを紹介します。Appleのプロダクトページなどで見かけるようなアニメーションが揃っています。
react-genie -GitHub
react-genieの特徴
react-genieは、ビューポートにスクロールする要素をアニメーション化するためのReactコンポーネントです。SizzyやReact Academyの@thekitze氏の新しいプロジェクトで、Sizzyにもこのreact-genieが使用されています。
Sizzy
タイミングをずらして表示させたり、非表示の要素を表示させたり、右・左から表示させたり、フェードインさせたり、さまざまなアニメーションが実装されています。
依存関係
- styled-components
- layout-styled-components
- react-animations
- react-intersection-observer<...
0
126
23
69author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
商用利用無料！カリグラフィ、ラインアートなど、さまざまなインクの質感で描けるPhotoshopのブラシ素材
NEXT ›
Markdown用のオープンソースのWYSIWYGエディタ・「Markdown Editor」
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『スクロールしてビューポートに要素が入る際に、アニメーションを適用するReactコンポーネント「react-genie」』についてまとめています。
この記事は特にアニメーション・SEO・twitterについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
