ウェブサイトにタイピング効果をどうやって作り出せばいいのか、ずっと疑問に思っていたことはありませんか？私も疑問に思っていました。Reactで動的なタイピング効果を実装する方法を学びました。 react-typical ライブラリ。この効果は、特に訪問者を引き付ける上で重要な役割を果たすヒーロー セクションで、Web サイトのデザインを切り替えることができます。
前提条件
始める前に、React の基本的な知識があり、システムに Node がインストールされていることを確認してください。
React プロジェクトのセットアップも必要です。まだセットアップしていない場合は、Create React App を使用して作成できます。
スタイル設定には Tailwind CSS も使用します。
ステップ1: Reactプロジェクトをセットアップする
React プロジェクトがまだない場合は、Create React App を使用して簡単に設定できます。
使用 ピクセル:
npx create-react-app my-app
または糸に詳しい方。
使用 糸
yarn create react-app my-app
Reactアプリをインストールしたら、プロジェクトにcdして
cd my-app
ステップ2: react-typicalをインストールする
使用 ネプ
npm install react-typical --save
使用 糸
yarn add react-typical
ステップ3: Tailwind CSSをインストールする
npm または yarn 経由で tailwindcss をインストールし、tailwind.config.js ファイルを作成します。
使用 ネプ
npm install -D tailwindcss
npx tailwindcss init
使用 糸
yarn add tailwindcss --dev
npx tailwindcss init
ステップ4: テンプレートパスを構成する
tailwind.config.js ファイルにすべてのテンプレート ファイルへのパスを追加します。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ("./src/**/*.{html,js}"),
theme: {
extend: {},
},
plugins: (),
}
この手順では、Tailwind が指定されたファイル (HTML、JavaScript、React ファイルなど) をスキャンしてクラス名を検索するように設定します。これにより、Tailwind はそれらのファイルで使用されているクラスに基づいて必要なスタイルを生成できるため、CSS 出力の最適化、ファイル サイズの削減、実際に使用するスタイルのみが最終ビルドに含まれるようになります。
ステップ5: TailwindディレクティブをCSSに追加する
メインの CSS ファイルに、Tailwind の各レイヤーの @tailwind ディレクティブを追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
このステップでは、Tailwind CSSをプロジェクトに統合します。Tailwindのベース、コンポーネント、ユーティリティスタイルをCSSファイルに接続し、それがプロジェクトにリンクされます。 index.jsこの設定により、コード全体で Tailwind CSS クラスを柔軟に使用できるようになります。
ステップ6: タイピングアニメーション用のReactコンポーネントを開発する
あなたの src フォルダを作成 component コンポーネントを保存するときに使用するフォルダー。
あなたの component フォルダにファイルを作成し、名前を付けます TypingEffect.js。 輸入 React そして Typical タイピングアニメーションを作成するためのライブラリ。
import React from 'react';
import Typical from 'react-typical';
次に、次のコードを追加して TypingEffect コンポーネントを定義します。
import React from 'react';
import Typical from 'react-typical';
const TypingEffect = () => {
return (
);
};
export default TypingEffect;
の Typical コンポーネントはタイピングアニメーションを作成するために使用されます。 steps propは入力するテキストと、各テキストが変更されるまでの持続時間（2000ミリ秒）を定義します。 loop propは1に設定されており、アニメーションは1回再生されます。 wrapper propはアニメーションテキストを 要素。
ステップ 7: TypingEffect コンポーネントをインポートして使用する
開く App.js srcディレクトリにファイルを作成し、 TypingEffect コンポーネント内で使用してください。 App タイピング効果ヘッダーを表示するコンポーネント。
import TypingEffect from './component/TypingEffect';
function App() {
return (
);
}
export default App;
ステップ8: アプリケーションを実行する
最後に、React アプリケーションを起動して、入力効果が実際にどのようになっているかを確認します。
使用 ネプ
npm start
使用 糸
yarn start
私のブラウザではこのように見えます。
ステップ9: スタイルをカスタマイズする
コードをさらに向上させるために、カスタムアニメーションを組み込みました。 TypingEffect.jsプロセス全体を詳細に説明したステップバイステップのチュートリアルを私の YouTube チャンネルに記録しました。こちらからご覧いただけます: 包括的なガイドについては、ぜひご覧ください。
import React from 'react'
import Typical from 'react-typical'
import HeroImg from '../assets/img.jpeg'
const TypingEffect = () => {
return (
)
}
export default TypingEffect
結論
React タイピング効果は、重要なメッセージを動的に表示することで、ウェブサイトの可視性とエンゲージメントを高めることができます。ユーザーの注目を集めるインタラクティブな要素を追加し、コンテンツをより印象的で魅力的なものにします。この機能を実装すると、ユーザーエクスペリエンスが向上し、重要な情報が強調表示され、サイトにモダンでプロフェッショナルな外観を作成できます。説明されている手順に従うことで、React プロジェクトにタイピング効果を簡単に統合し、Web プレゼンスを際立たせることができます。私のリポジトリにアクセスするには、このリンク github repo をたどるだけです。
リソース