끊어진 링크, Framer Motion이 포함된 페이지, TailwindCSS 및 NextJ를 조심하세요.

다르려고 노력하는 것은 쉽지 않습니다. 우리는 평소의 앱, 레이아웃, 색상에 너무 익숙해져서 다른 것을 생각하기 어렵습니다.

어쨌든 여기에 다른 404 페이지 디자인을 적용해 보겠습니다. 제가 사용하는 도구는 항상 동일합니다. 페이지용 React/Next.js, 스타일링용 Tailwind CSS, 페이지 이동용 Framer Motion입니다.

끝까지 건너뛰시겠습니까? 내 웹사이트에서 전체 코드를 미리보기할 수 있습니다. 그 외에도 다양한 디자인이 있어요! 마음에 드셨으면 좋겠습니다.

---

중요한 것부터 먼저

당신이 React/Next.js가 무엇인지, 필요한 도구와 라이브러리를 설치하는 방법을 알고 있다고 가정합니다. 저는 Next.js에 대해 글을 쓸 것입니다. 다음은 간단한 안내입니다.

1. NextJ를 설치하거나 반응하세요.
2. TailwindCSS 추가
3. 그리고 마지막으로 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>
  );
}

Dark Souls 같은 게임을 해본 적이 있나요? 실패하거나 죽으면 "게임 오버"(저희 경우에는 "You Died") ) 텍스트가 페이드되고 확대됩니다. 그 후 "게임 로드" 또는 "종료" 버튼이 일부 통계 또는 기타 관련 정보와 함께 나타납니다. 이것도 마찬가지일 거예요!

제목을 표시한 후 "다시 시작하려면 여기를 클릭하세요 ↻"라는 링크가 "- 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를 사용하는 것이 항상 더 좋습니다. 앵커 링크를 원하는 곳으로 변경하고 NextJ를 사용하는 경우 다음/링크로 전환하는 것을 잊지 마세요 :)

지금은 그게 전부입니다. 프레이머 모션으로 애니메이션을 만드는 멋지고 쉬운 방법을 담은 개념입니다. 여기에서 미리 확인하시고, 즐거운 하루 보내세요!

위 내용은 끊어진 링크, Framer Motion이 포함된 페이지, TailwindCSS 및 NextJ를 조심하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!