Berhati-hati Untuk Pautan Terputus, Halaman Dengan Framer Motion, TailwindCSS dan NextJs

Cuba untuk menjadi berbeza bukanlah mudah. Kami terlalu terbiasa dengan apl, reka letak dan warna biasa sehingga sukar untuk memikirkan sesuatu yang lain.

Walau apa pun, inilah pandangan saya tentang reka bentuk 404 halaman yang berbeza. Alat yang saya gunakan sentiasa sama: React/Next.js untuk halaman, Tailwind CSS untuk penggayaan dan Framer Motion untuk menjadikannya bergerak.

Adakah anda ingin melangkau ke penghujung? Anda boleh pratonton di tapak web saya dengan kod penuh sedia untuk direbut. Selain itu, terdapat banyak lagi reka bentuk! Harap anda suka.

---

Perkara Pertama Didahulukan

Saya menganggap anda tahu apa itu React/Next.js dan cara memasang alatan dan perpustakaan yang diperlukan. Saya akan menulis untuk Next.js. Berikut ialah panduan ringkas:

1. Pasang NextJs atau hanya React
2. Tambah TailwindCSS
3. Dan akhirnya, tambahkan Framer Motion!

Mari Mulakan

Buat fail di bawah direktori /pages dan namakannya 404.js. Tetapi anda tidak terhad kepada 404, sudah tentu. Anda boleh membaca tentang ralat tersuai lain di sini dan menukar nama halaman dengan kandungan di dalamnya dengan sewajarnya.

Selepas mencipta halaman, kami memerlukan fungsi.
**404.js**

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

Nama fungsi tidak penting, cuma namakan apa sahaja yang anda mahu.

Seperti yang anda lihat dalam imej muka depan, saya mempunyai teks di bahagian tengah skrin. Jadi kami memerlukan skrin dan teks!

**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>
  );
}

Apa gunanya mempunyai gerakan pembingkai jika kita akan mempunyai hanya satu teks? Anda betul! Jom dapatkan lebih banyak teks dengan gaya yang betul dan kebaikan responsif.

**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>
  );
}

Pernahkah anda bermain permainan seperti Dark Souls? Jika anda gagal atau mati, "Game Over" (atau dalam kes kami, "You Died" ) teks pudar dan berskala masuk. Selepas itu, butang "Muat Permainan" atau "Keluar" muncul bersama beberapa statistik atau maklumat lain yang berkaitan. Ini akan menjadi sama!

Kami akan menunjukkan tajuk dan selepas itu pautan dengan "Klik di sini untuk respawn ↻" teks akan muncul dengan "- 404: Death by broken link! -" subtitle .

Seperti yang anda lihat, kami mempunyai id untuk setiap elemen yang akan kami gunakan untuk membuat animasi. Untuk itu kami memerlukan cangkuk useAnimate() gerakan framer yang boleh anda baca tentangnya di sini.

Jom Animasikan

Penggunaan Cangkuk Animate Framer Motion dengan fungsi async membolehkan anda menyusun animasi dengan mudah dalam apa jua cara yang anda mahukan. Apa yang anda perlukan ialah skop untuk memberitahu Framer Motion tempat untuk melihat dan fungsi animasi untuk menentukan perkara yang perlu dilakukan. Lihat kod di bawah:

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

Semuanya di sini cukup jelas. Cipta fungsi tak segerak dengan nama yang betul dan dengan menunggu setiap animasi cipta satu urutan. Pilih id dan beritahu apa yang perlu dilakukan. Sangat mudah! Lihat kod akhir sekarang dan anda akan melihat apa yang dilakukannya. Saya juga menambah beberapa fungsi tambahan yang berguna untuk pembangunan.

**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>
  );
}

Di sini saya mempunyai skop/ref di div kontena. Adalah lebih baik untuk mempunyai div kontena untuk animasi dan bukannya keseluruhan skrin. Ingat untuk menukar pautan sauh ke mana-mana yang anda mahu dan jangan lupa untuk mengubahnya ke pautan seterusnya jika anda menggunakan NextJs :)

Buat masa ini, itu sahaja yang ada. Hanya satu konsep dengan cara yang bagus dan mudah untuk membuat animasi dengan gerakan pembingkai. Pratonton di sini, nikmati dan ceria!

Atas ialah kandungan terperinci Berhati-hati Untuk Pautan Terputus, Halaman Dengan Framer Motion, TailwindCSS dan NextJs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!