Logo de survol animé utilisant Typescript, Tailwind et Framer Motion

Il transforme un logo statique en bouton, qui active une info-bulle vidéo qui suit le mouvement du curseur le long de l'axe du bouton à l'aide de valeurs de mouvement.

En y regardant de plus près, vous remarquerez que nous utilisons des micro-animations. Lorsque le logo est survolé, il diminue et disparaît progressivement, puis se transforme en un bouton qui s'agrandit avec un effet de fondu entrant. Le survol du bouton déclenche ensuite une info-bulle vidéo.

Démo

Code source

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>

importer { useState, useCallback } depuis "react" ;
importer { motion, AnimatePresence, useMotionValue } depuis "framer-motion" ;
importer { Play } depuis "lucide-react" ;

exporter la fonction par défaut LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

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

  retour (
    <div className="relative w-[100px] h-[80px] curseur-pointeur" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          //changez avec votre propre logo
          <motion.img src="/theo-logo.png" alt="Logo Wegic" className="absolute inset-0 w-full h-full object-contain" initial={{ opacité : 1, échelle : 1 } } exit={{ opacité : 0, échelle : 0,8 }} transition={{ durée : 0,2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justification-center w-full" initial={{ opacité : 0 }} animate={{ opacité : 1 }} exit={{ opacité : 0, échelle : 0,8 }} transition={{ durée : 0,2 }}>
            <bouton
              className="flex w-full items-center justification-center gap-2 bg-white border border-black h-10 py-2 arrondi-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo (vrai)}
              onMouseLeave={() => setShowVideo(faux)}
            >
              <Taille de lecture={16} fill="white" StrokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">regarder la vidéo</p>
            </bouton>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Info-bulle vidéo */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            initial={{ opacité : 0, y : 20, échelle : 0,6 }}
            animer={{
              opacité : 1,
              oui : 0,
              échelle: 1,
              transition: {
                rigidité : 260,
                amortissement : 10,
                durée : 0,3,
              },
              largeur : "200px",
              hauteur : "auto",
            }}
            exit={{ opacité : 0, y : 20, échelle : 0,6 }}
           >




          

            
        

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!