Animiertes Hover-Logo mit Typescript, Tailwind und Framer Motion

Es verwandelt ein statisches Logo in eine Schaltfläche, die einen Video-Tooltip aktiviert, der die Bewegung des Cursors entlang der Achse der Schaltfläche mithilfe von Bewegungswerten verfolgt.

Bei näherer Betrachtung werden Sie feststellen, dass wir Mikroanimationen verwenden. Wenn Sie mit der Maus über das Logo fahren, wird es sanft verkleinert und ausgeblendet und geht dann in eine Schaltfläche über, die mit einem Einblendeffekt vergrößert wird. Wenn Sie mit der Maus über die Schaltfläche fahren, wird ein Video-Tooltip angezeigt.

Demo

Quellcode

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>

import { useState, useCallback } from „react“;
import { motion, AnimatePresence, useMotionValue } from „framer-motion“;
import { Play } from „lucide-react“;

Standardfunktion LogoHover() exportieren {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    (Ereignis: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [X]
  );

  zurückkehren (
    <div className="relative w-[100px] h-[80px] Cursorzeiger" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          // Ändern Sie mit Ihrem eigenen Logo
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" initial={{ opacity: 1, scale: 1 } } exit={{ Deckkraft: 0, Skalierung: 0,8 }} transit={{ Dauer: 0,2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, skalieren : 0,8 }} Transition={{ Dauer: 0,2 }}>
            <-Taste
              className="flex w-full items-center justify-center gap-2 bg-white border border-black h-10 py-2 abgerundet-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo(true)}
              onMouseLeave={() => setShowVideo(false)}
            >
              <Play size={16} fill="white" StrokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">Video ansehen</p>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Video-Tooltip */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            initial={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
            animieren={{
              Deckkraft: 1,
              y: 0,
              Maßstab: 1,
              Übergang: {
                Steifigkeit: 260,
                Dämpfung: 10,
                Dauer: 0,3,
              },
              Breite: „200px“,
              Höhe: „auto“,
            }}
            exit={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
           >




          

            
        

Das obige ist der detaillierte Inhalt vonAnimiertes Hover-Logo mit Typescript, Tailwind und Framer Motion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!