壊れたリンク、フレーマー モーションを含むページ、TailwindCSS、NextJs に注意してください

他と違うことをしようとするのは簡単ではありません。私たちは通常のアプリ、レイアウト、色に慣れてしまっているため、他のものを考えるのが難しくなります。

いずれにせよ、これは別の 404 ページのデザインに対する私の見解です。私が使用するツールは常に同じです。ページには React/Next.js、スタイルには Tailwind CSS、動きには Framer Motion を使用します。

最後までスキップしますか? 私の Web サイトで完全なコードをすぐに プレビューできます。この他にもたくさんのデザインがあります！気に入っていただければ幸いです。

---

まず最初のこと

React/Next.js とは何か、そして必要なツールやライブラリをインストールする方法はご存知だと思います。 Next.js 用に書いていきます。以下に簡単な手順を示します:

1. NextJs をインストールするか、単に React をインストールします
2. TailwindCSS を追加します
3. そして最後に、フレーマー モーション!を追加します。

始めましょう

/pages ディレクトリの下にファイルを作成し、404.js という名前を付けます。ただし、もちろん 404 に限定されるわけではありません。ここで他のカスタム エラーについて読み、それに応じて内容を含むページ名を変更できます。

ページを作成した後、関数が必要になります。
**404.js**

export default function YouDiedErrorPage() {
 return(...)
}

関数の名前は重要ではありません。好きな名前を付けてください。

カバー画像にあるように、画面の中央にテキストを配置しています。したがって、画面とテキストが必要です!

**404.js**

export default function YouDiedErrorPage() {
  return (
    // Div as the screen
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      {/* A container for the text which is centered */}
      <div className="relative whitespace-nowrap">
        {/* And a text with an id of title */}
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
      </div>
    </div>
  );
}

テキストが 1 つだけある場合、フレーマー モーションを使用する意味は何でしょうか?あなたが正しいです！適切なスタイルと優れた応答性を備えたテキストをもっと増やしましょう。

**404.js**

export default function YouDiedErrorPage() {
  return (
    // Div as the screen
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      {/* A container for the text */}
      <div className="relative whitespace-nowrap">
        {/* And a text with an id of title */}
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
        <a
          href="#you-died-go-home"
          id="respawnText"
          className="absolute inset-0 flex items-center justify-center text-2xl text-neutral-400 opacity-0 transition-colors duration-300 hover:text-red-500 md:text-3xl"
        >
          Click here to respawn ↻
        </a>
        <p
          id="reasonOfDeath"
          className="absolute inset-0 mt-6 flex items-center justify-center text-neutral-500/80 opacity-0 md:mt-8"
        >
          - 404: Death by broken link! -
        </p>
      </div>
    </div>
  );
}

ダークソウルのようなゲームをプレイしたことがありますか? 失敗するか死亡すると、「ゲームオーバー」 (または、私たちの場合、「死亡しました」) ) テキストがフェードしてスケールインします。その後、「ゲームのロード」 または 「終了」 ボタンが統計やその他の関連情報とともに表示されます。これも同じです!

タイトルが表示され、その後に 「ここをクリックして復活します ↻」 テキストが "- 404: Death by Broken link! -" サブタイトルとともに表示されます。 。

ご覧のとおり、アニメーションの作成に使用する各要素の ID があります。そのためには、フレーマー モーションの useAnimate() フックが必要です。こちらで読むことができます。

アニメートしてみましょう

Framer Motion の非同期関数を備えた useAnimate フックを使用すると、アニメーションを任意の方法で簡単にシーケンスできます。必要なのは、Framer Motion にどこを見るかを指示するスコープと、何を行うかを指定するアニメーション関数だけです。以下のコードをチェックしてください:

  const [scope, animate] = useAnimate();

  async function killThem() {
    await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 });
    await animate("#title", { opacity: 0 }, { duration: 1 });
    await animate("#respawnText", { opacity: 1 }, { duration: 1 });
    await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 });
  }

ここで説明した内容はすべて一目瞭然です。 適切な 名を使用して非同期関数を作成し、すべてのアニメーションを待機してシーケンスを作成します。 ID を選択して、何をするかを指示します。驚くほどシンプル！最終的なコードを見れば、それが何をするかがわかります。開発に役立つ追加機能もいくつか追加しました。

**404.js**

import { useAnimate } from "framer-motion";
import { useEffect } from "react";

export default function YouDiedErrorPage() {
  const [scope, animate] = useAnimate();

  async function killHim() {
    await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 });
    await animate("#title", { opacity: 0 }, { duration: 1 });
    await animate("#respawnText", { opacity: 1 }, { duration: 1 });
    await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 });
  }
  // With this we are starting the animation, you can also call the function in anywhere you like!
  useEffect(() => {
    killHim();
  }, []);

  // Function to refresh the page for development and demonstration purposes.
  function handleRespawnClick() {
    window.location.reload();
  }

  return (
    <div className="grid h-screen w-screen place-items-center overflow-hidden bg-black text-center font-serif">
      <div ref={scope} className="relative whitespace-nowrap">
        <h1
          id="title"
          className="absolute inset-0 flex items-center justify-center text-5xl text-red-500/40 opacity-0 will-change-transform md:text-7xl"
        >
          YOU <br className="inline-flex md:hidden" />
          DIED
        </h1>
        <a
          onClick={handleRespawnClick} // For development, remove later.
          href="#you-died-go-home"
          id="respawnText"
          className="absolute inset-0 flex items-center justify-center text-2xl text-neutral-400 opacity-0 transition-colors duration-300 hover:text-red-500 md:text-3xl"
        >
          Click here to respawn ↻
        </a>
        <p
          id="reasonOfDeath"
          className="absolute inset-0 mt-6 flex items-center justify-center text-neutral-500/80 opacity-0 md:mt-8"
        >
          - 404: Death by broken link! -
        </p>
      </div>
    </div>
  );
}

ここでは、コンテナ div にスコープ/参照があります。画面全体ではなく、アニメーション用のコンテナ div を用意することをお勧めします。アンカー リンクを任意の場所に変更することを忘れないでください。NextJs を使用している場合は、それを next/link に変えることを忘れないでください :)

今のところ、これですべてです。フレーマー モーションを使用してアニメーションを作成する簡単な方法のコンセプトです。 こちらでプレビューして、楽しんで良い一日をお過ごしください!

以上が壊れたリンク、フレーマー モーションを含むページ、TailwindCSS、NextJs に注意してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。