Achten Sie auf defekte Links, Page With Framer Motion, TailwindCSS und NextJs

Der Versuch, anders zu sein, ist nicht einfach. Wir gewöhnen uns so sehr an die üblichen Apps, Layouts und Farben, dass es schwerfällt, an etwas anderes zu denken.

Auf jeden Fall ist hier meine Meinung zu einem anderen 404-Seiten-Design. Die Tools, die ich verwende, sind immer die gleichen: React/Next.js für die Seite, Tailwind CSS für das Styling und Framer Motion, um sie zu bewegen.

Möchten Sie zum Ende springen?Sie können es auf meiner Website in der Vorschau ansehen, wobei der vollständige Code zum Herunterladen bereitsteht. Außerdem gibt es noch viele weitere Designs! Ich hoffe, es gefällt euch.

---

Das Wichtigste zuerst

Ich gehe davon aus, dass Sie wissen, was React/Next.js ist und wie Sie die erforderlichen Tools und Bibliotheken installieren. Ich werde für Next.js schreiben. Hier ist eine kurze Anleitung:

1. Installieren Sie NextJs oder Reagieren Sie einfach
2. Fügen Sie TailwindCSS hinzu
3. Und schließlich fügen Sie Framer Motion! hinzu

Fangen wir an

Erstellen Sie eine Datei im Verzeichnis /pages und nennen Sie sie 404.js. Aber Sie sind natürlich nicht auf 404 beschränkt. Weitere benutzerdefinierte Fehler können Sie hier nachlesen und den Seitennamen mit den darin enthaltenen Inhalten entsprechend ändern.

Nachdem wir die Seite erstellt haben, benötigen wir eine Funktion.
**404.js**

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

Der Name der Funktion spielt keine Rolle, benennen Sie sie einfach nach Ihren Wünschen.

Wie Sie im Titelbild sehen können, habe ich einen Text in der Mitte des Bildschirms. Wir brauchen also einen Bildschirm und einen Text!

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

Welchen Sinn hat die Framer-Bewegung, wenn wir nur einen einzigen Text haben wollen? Du hast Recht! Lassen Sie uns mehr Text mit dem richtigen Stil und reaktionsschneller Güte haben.

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

Haben Sie jemals ein Dark Souls-ähnliches Spiel gespielt? Wenn Sie scheitern oder sterben, wird das „Game Over“ (oder in unserem Fall „You Died“) angezeigt. ) Text wird ausgeblendet und skaliert. Danach erscheint eine Schaltfläche „Spiel laden“ oder „Beenden“ zusammen mit einigen Statistiken oder anderen relevanten Informationen. Das wird das Gleiche sein!

Wir zeigen den Titel und danach erscheint ein Link mit dem Text „Klicken Sie hier, um zu respawnen ↻“ mit einem Untertitel “- 404: Tod durch defekten Link! -“ .

Wie Sie sehen können, haben wir IDs für jedes Element, die wir zum Erstellen der Animationen verwenden werden. Dafür benötigen wir den useAnimate()-Hook von Framer Motion, den Sie hier darüber lesen können.

Lass uns animieren

Mit dem useAnimate-Hook von Framer Motion mit asynchronen Funktionen können Sie Animationen ganz einfach nach Ihren Wünschen sequenzieren. Sie benötigen lediglich einen Bereich, um Framer Motion mitzuteilen, wo gesucht werden soll, und eine Animationsfunktion, um anzugeben, was zu tun ist. Schauen Sie sich den Code unten an:

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

Alles hier ist ziemlich selbsterklärend. Erstellen Sie eine asynchrone Funktion mit einem richtigen Namen und erstellen Sie durch Abwarten jeder einzelnen Animation eine Sequenz. Wählen Sie eine ID aus und sagen Sie ihr, was sie tun soll. Erstaunlich einfach! Schauen Sie sich jetzt den endgültigen Code an und Sie werden sehen, was er bewirkt. Ich habe auch einige zusätzliche Funktionen hinzugefügt, die für die Entwicklung nützlich sein werden.

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

Hier habe ich den Scope/Ref im Container-Div. Es ist immer besser, Container-Divs für die Animationen anstelle des gesamten Bildschirms zu haben. Denken Sie daran, den Ankerlink an eine beliebige Stelle zu ändern und vergessen Sie nicht, ihn in einen Next/Link umzuwandeln, wenn Sie NextJs verwenden :)

Im Moment ist das alles. Nur ein Konzept mit einer schönen und einfachen Möglichkeit, Animationen mit Framer-Motion zu erstellen. Vorschau hier, viel Spaß und einen schönen Tag!

Das obige ist der detaillierte Inhalt vonAchten Sie auf defekte Links, Page With Framer Motion, TailwindCSS und NextJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!