Typescript, Tailwind 및 Framer Motion을 사용한 애니메이션 호버 로고

정적 로고를 버튼으로 변환하여 모션 값을 사용하여 버튼 축을 따라 커서의 움직임을 따르는 비디오 툴팁을 활성화합니다.

자세히 살펴보면 마이크로 애니메이션을 사용하고 있음을 알 수 있습니다. 로고 위로 마우스를 가져가면 로고가 부드럽게 축소되고 페이드 아웃된 다음 페이드 인 효과로 확대되는 버튼으로 전환됩니다. 버튼 위로 마우스를 가져가면 비디오 도구 설명이 표시됩니다.

데모

소스 코드

logo-hover.tsx

<script> // Detect dark theme var iframe = document.getElementById('tweet-1878748540677283930-90'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878748540677283930&theme=dark" } </script>

"반응"에서 가져오기 { useState, useCallback };
"프레이머 모션"에서 { 모션, AnimatePresence, useMotionValue } 가져오기;
"lucide-react"에서 { Play }를 가져옵니다.

기본 함수 내보내기 LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handlerMouseMove = useCallback(
    (이벤트: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [엑스]
  );

  반품 (
    <div className="relative w-[100px] h-[80px] 커서 포인터" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          // 자신의 로고로 변경
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" 초기={{ 불투명도: 1, 크기: 1 } } 종료={{ 불투명도: 0, 크기: 0.8 }} 전환={{ 지속 시간: 0.2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" 초기={{ 불투명도: 0 }} animate={{ 불투명도: 1 }} 종료={{ 불투명도: 0, 크기 : 0.8 }} 전환={{ 기간: 0.2 }}>
            <버튼
              className="flex w-full items-center justify-center gap-2 bg-white border border-black h-10 py-2 rounded-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo(true)}
              onMouseLeave={() => setShowVideo(false)}
            >
              <재생 크기={16} fill="white" 스트로크Width={2} aria-hidden="true" />
              <p className="text-[10px] flexfont-semibold">동영상 보기</p>
            </버튼>
          </motion.div>
        )}
      </AnimatePresence>
      {/* 동영상 도움말 */}
      <AnimatePresence mode="popLayout">
        {쇼동영상 && (
          <motion.div
            초기={{ 불투명도: 0, y: 20, 배율: 0.6 }}
            애니메이션={{
              불투명도: 1,
              y: 0,
              규모: 1,
              이행: {
                강성: 260,
                댐핑: 10,
                지속시간: 0.3,
              },
              너비: "200px",
              높이: "자동",
            }}
            종료={{ 불투명도: 0, y: 20, 배율: 0.6 }}
           >




          

            
        

위 내용은 Typescript, Tailwind 및 Framer Motion을 사용한 애니메이션 호버 로고의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!