注意損壞的連結、帶有 Framer Motion、TailwindCSS 和 NextJs 的頁面-js教程-PHP中文網

Watch Out For Broken Links, Page With Framer Motion, TailwindCSS and NextJs

嘗試與眾不同並不容易。我們已經習慣了常用的應用程式、佈局和顏色，很難想到其他的東西。

無論如何，這是我對不同的 404 頁面設計的看法。我使用的工具始終相同：用於頁面的 React/Next.js、用於樣式的 Tailwind CSS、用於使其移動的 Framer Motion。

您想跳到最後嗎？ 您可以在我的網站上預覽它並準備好完整的程式碼。而且，還有很多設計！希望你喜歡。

要事第一

我假設您知道 React/Next.js 是什麼以及如何安裝必要的工具和函式庫。我將為 Next.js 撰寫文章。這是一個簡短的演練：

安裝NextJs或只是React
加TailwindCSS
最後，加上Framer Motion！

讓我們開始吧

在/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>
  );
}

登入後複製

如果我們只有一個文本，那麼成幀器運動有什麼意義呢？你是對的！讓我們擁有更多具有適當樣式和回應能力的文字。

**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：因鏈接損壞而死亡！-”副標題。

如您所見，我們為每個元素提供了用於製作動畫的 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，請不要忘記將其更改為下一個/連結:)

目前，就這些了。只是一個概念，提供了一種使用成幀器運動製作動畫的簡單好方法。 在這裡預覽，享受美好的一天！

以上是注意損壞的連結、帶有 Framer Motion、TailwindCSS 和 NextJs 的頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！