アニメーションは、単純なウェブサイトを魅力的で忘れられない体験に変えるものです。ウェブサイトに個性とユニークさを与え、訪問者が全体の美学を称賛するようにします。
美しいものを好むのは人間の本性です。私たちはすべて、目に優しい見た目の商品を愛しています。
この記事では、Framer motionとReact-Router-Domを使って、ユーザーを感銘を受けさせるアニメーションを作成する方法を学びます。
前提条件
この記事で私たちの作業を追いかけるためには、React、Framer motion、React-Router-DOMについての知識があることが望ましいです。
Framer motionをよりよく学ぶために、彼らのドキュメントを学習してください。
Node.jsがシステムにインストールされていて、作業可能なコードエディターがあることです。私はVS Codeを使用します。
プロジェクトのセットアップ方法
私たちのプロジェクトをセットアップするためには、React開発環境をセットアップするためにViteを使用します。
-
VSCodeでターミナルを開きます。Ctrl + backtick(`)を使用できます。
-
ターミナルに以下のコマンドを入力します。
npm create vite@latest
-
指示に従ってプロジェクト名を指定し、お望みのフレームワークを選択してください。今回はReactを使用します。これはJavaScriptプロジェクトになります。
-
プロジェクトディレクトリに移り、ターミナルで
npm iを使用してください。 -
プロジェクトを開始するには
npm run devを使用してください。 -
App.jsのコードを削除し、
srcフォルダのCSSファイルを削除してプロジェクトを掃除してください。
Framer MotionとReact-Router-Domの初期化方法
- ターミナルを開いて、以下のコマンドを入力してFramer-motionをプロジェクトに追加してください。
npm i framer-motion
- ターミナルを開いて、以下のコマンドを入力してReact-Router-DOMをプロジェクトに追加してください。
npm i react-router-dom
React-Router-DOMを使用してコンポーネントを設定し、基本的なルーティングを行いましょう。
このプロジェクトで使用するコンポーネントと、それらに対応するページのルーティングを設定しましょう。
-
srcに、新しいcomponentsという名前のフォルダを作成してください。 -
このフォルダに4つのファイルを追加します。名前は
Home.jsx,About.jsx,Projects.jsxおよびNavbar.jsxです。 -
最初の3つの中で、Reactの機能的コンポーネントを作成します。各コンポーネントの
h1タグの内容を変更します。
const Home = () => {
return (
<div>
<h1>Home</h1>
</div>
)
}
export default Home
- Navbarには、React-Router-DOMから
Linkをインポートしてアンカー要素を作成する必要があります。その後、ロゴとナビゲーションリンクを含むコンテナを作成する必要があります。ロゴはインデックスページに飛び迂うためのポイントをリンクします。
import {Link} from "react-router-dom"
const Navbar () => {
return (
<div className="nav">
<div className="logo">
<Link className="nav-link" to="/">Lennythedev</Link>
</div>
<div>
<div className="nav-links">
<div className="nav-item">
<Link className="nav-link" to="/">Home</Link>
</div>
<div className="nav-item">
<Link className="nav-link" to="/">About</Link>
</div>
<div className="nav-item">
<Link className="nav-link" to="/">Projects</Link>
</div>
</div>
</div>
</div>
)
}
- 次に、
index.jsまたはmain.jsファイルに行きます。その目標は、BrowserRouterを整个のアプリを包んで、アプリ内での routingを可能にすることです。
import React from "react"
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/*' element={<App />} />
</Routes>
</Router>
</React.StrictMode>,
)
- 次に、
App.jsに行きます。そこで、設定の最後のステップを完了します。コンポーネントをインポートし、React-Router-DOMのいくつかの機能を使用して、コンポーネントを表示します。React-Router-DOMのuseLocation機能を使用して、現在のルートの位置を設定することができます。currentPathにキーを設定することで、現在のパスに基づいてルートの当前位置を設定します。
import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
function App() {
const location = useLocation();
return (
<>
<NavBar />
<AnimatePresence mode='wait'>
<Routes location={location} key={location.pathname}>
<Route index element={<Home />} />
<Route path='/projects' element={<Projects />}/>
<Route path='/about' element={<About />}/>
</Routes>
</AnimatePresence>
</>
)
}
export default App
- 次に、
App.cssにスタイリングを追加します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: "Fira Sans Condensed", sans-serif;
}
html,
body {
font-family: "Fira Sans Condensed", sans-serif;
background: rgb(0, 162, 255);
}
.nav {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
}
.nav-links {
display: flex;
cursor: pointer;
}
.logo, .nav-item {
margin: 2em;
font-weight: 400;
font-size: 1.5vw;
}
h1{
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-weight: 500;
font-size: 10vw;
line-height: 1;
text-transform: uppercase;
}
a {
text-decoration: none;
font-weight: 500;
}
- すべての手順を実行した後、アプリは以下のようになるはずです。
アニメーションなしのスタイル付きウェブページ
Framer Motionを使用してトランジションを作成する方法
最終的に、私たちのページ間の遷移のアニメーションを作成しましょう。
-
components フォルダに
Box.jsxというファイルを作成し、import motion from framer-motionを書いてください。 -
その後、
classNamesにslide-inとslide-outを持つ 2つの div を返すことができます。それぞれは、入りたましいとスライドアウトを行うためのものです。 -
framer-motion の帮助下でこれらの div にアニメーションを插入します。
import { motion } from "framer-motion"
export default function Box() {
return(
<div>
<motion.div
className="slide-in"
initial={{ scaleY: 0 }}
animate={{ scaleY: 0 }}
exit={{ scaleY: 1 }}
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
/>
<motion.div
className="slide-out"
initial={{ scaleY: 1 }}
animate={{ scaleY: 0 }}
exit={{ scaleY: 0 }}
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
/>
</div>
)
}
- 次に、App.css に
slide-inとslide-outの CSS スタイリングを追加します。
.slide-in {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #0f0f0f;
transform-origin: bottom;
}
.slide-out {
position: fixed;
top: 0;
left: 0;
height: 100vh;
background: #0f0f0f;
transform-origin: top;
}
- 最後の手順は、App.js ファイルで
AnimatePresenceを使用し、整个の App をAnimatePresenceに包み、モードを wait に設定します。AnimatePresenceについてもっと学ぶには、framer-motion 文書を参照してください。
import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
import { AnimatePresence } from 'framer-motion';
function App() {
const location = useLocation();
return (
<>
<NavBar />
<AnimatePresence mode='wait'>
<Routes location={location} key={location.pathname}>
<Route index element={<Home />} />
<Route path='/projects' element={<Projects />}/>
<Route path='/about' element={<About />}/>
</Routes>
</AnimatePresence>
</>
)
}
export default App
- 最後に、私たちの作業は以下の動画と同じになるべきです。
結論
Framer Motion と React-Router-Dom を使用して複数のページのアニメーションを作成することで、用户の経験を豊かにすることができます。smooth transitions を提供します。
この統合は、Framer Motionのアニメーション機能とReact-Router-Domのルーティング機能を活用して、動的でインタラクティブなWebアプリケーションを作成します。