Méfiez-vous des liens brisés, des pages avec Framer Motion, TailwindCSS et NextJs

Essayer d'être différent n'est pas facile. Nous sommes tellement habitués aux applications, mises en page et couleurs habituelles qu'il est difficile de penser à autre chose.

En tout cas, voici mon point de vue sur un design différent de 404 pages. Les outils que j'utilise sont toujours les mêmes : React/Next.js pour la page, Tailwind CSS pour le style et Framer Motion pour la faire bouger.

Voulez-vous passer à la fin ? Vous pouvez le prévisualiser sur mon site Web avec le code complet prêt à être récupéré. Il existe également de nombreux autres modèles ! J'espère que ça vous plaira.

---

Les premières choses d'abord

Je suppose que vous savez ce qu'est React/Next.js et comment installer les outils et bibliothèques nécessaires. J'écrirai pour Next.js. Voici une brève présentation :

1. Installez NextJs ou simplement React
2. Ajouter TailwindCSS
3. Et enfin, ajoutez Framer Motion !

Commençons

Créez un fichier dans le répertoire /pages et nommez-le 404.js. Mais vous n’êtes bien sûr pas limité au 404. Vous pouvez en savoir plus sur d'autres erreurs personnalisées ici et modifier le nom de la page avec son contenu en conséquence.

Après avoir créé la page, nous avons besoin d'une fonction.
**404.js**

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

Le nom de la fonction n'a pas d'importance, nommez-le simplement comme vous le souhaitez.

Comme vous pouvez le voir sur l'image de couverture, j'ai un texte au centre de l'écran. Il nous faut donc un écran et un texte !

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

À quoi sert d'avoir un mouvement de cadrage si nous voulons n'avoir qu'un seul texte ? Tu as raison! Ayons plus de texte avec un style approprié et une bonté réactive.

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

Avez-vous déjà joué à un jeu de type Dark Souls ? Si vous échouez ou mourez, le "Game Over" (ou dans notre cas, "You Died" ) le texte s'estompe et s'agrandit. Après cela, un bouton "Charger le jeu" ou "Quitter" apparaît avec des statistiques ou d'autres informations pertinentes. Ce sera pareil !

Nous afficherons le titre et après cela un lien avec "Cliquez ici pour réapparaître ↻" le texte apparaîtra avec un "- 404 : Mort par lien brisé ! -" sous-titre .

Comme vous pouvez le voir, nous avons des identifiants pour chaque élément que nous utiliserons pour réaliser les animations. Pour cela, nous avons besoin du hook useAnimate() de Framer Motion que vous pouvez lire à ce sujet ici.

Animons

Le hook useAnimate de Framer Motion avec des fonctions asynchrones vous permet de séquencer facilement des animations comme vous le souhaitez. Tout ce dont vous avez besoin est une portée pour indiquer à Framer Motion où chercher et une fonction d'animation pour spécifier quoi faire. Consultez le code ci-dessous :

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

Tout ici est assez explicite. Créez une fonction asynchrone avec un nom propre et en attendant chaque animation, créez une séquence. Choisissez un identifiant et dites-lui quoi faire. Étonnamment simple ! Regardez le code final maintenant et vous verrez ce qu'il fait. J'ai également ajouté quelques fonctions supplémentaires qui seront utiles pour le développement.

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

Ici, j'ai la portée/référence au niveau du conteneur div. Il est toujours préférable d'avoir des div de conteneur pour les animations plutôt que pour l'écran entier. N'oubliez pas de changer le lien d'ancrage où vous le souhaitez et n'oubliez pas de le transformer en next/link si vous utilisez NextJs :)

Pour l'instant, c'est tout ce qu'il y a. Juste un concept avec une manière simple et agréable de créer des animations avec framer-motion. Prévisualisez-le ici, profitez-en et bonne journée !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!