[GSAP] Ứng hover khối làm website (ok)

Example 1


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodePen - GSAP Accordion - KK</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(circle at center, #0f0f0f 0%, #000000 100%);
      overflow-x: hidden;
      color: #fff;
    }
    .products {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      padding: 2rem;
    }
    .product-card {
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid #00ffff;
      border-radius: 15px;
      padding: 1.5rem;
      text-align: center;
      position: relative;
      transition: 0.5s;
      overflow: hidden;
    }
    .product-card:hover {
      transform: perspective(800px) rotateY(10deg) rotateX(10deg);
      border-color: #ff00ff;
      box-shadow: 0 0 30px #ff00ff;
    }
    .product-image {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: #ff00ff;
      text-shadow: 0 0 10px #ff00ff;
    }
    .neon-footer {
      text-align: center;
      padding: 2rem;
      border-top: 2px solid rgba(0,255,255,0.2);
      font-size: 0.9rem;
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <!-- partial:index.partial.html -->
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <section class="products">
      <div class="product-card" data-hover="Vue 3D">
        <div class="product-image">X-FLUX</div>
        <h3>Veste Holographique</h3>
        <p>Régulation thermique quantique</p>
      </div>
      <div class="product-card" data-hover="Vue 3D">
        <div class="product-image">GRAV-BOOST</div>
        <h3>Chaussures Antigravité</h3>
        <p>Adaptation gravitationnelle instantanée</p>
      </div>
      <div class="product-card" data-hover="Vue 3D">
        <div class="product-image">NEURAL-X</div>
        <h3>Gants Neuro-Connectés</h3>
        <p>Interface cerveau-machine intégrée</p>
      </div>
    </section>
  </body>
  <!-- partial -->
  <script>
  gsap.registerPlugin(ScrollTrigger);
  gsap.utils.toArray('.product-card').forEach(card => {
    card.addEventListener('mouseenter', () => {
      gsap.to(card, {
        duration: 0.3,
        boxShadow: "0 0 20px #ff00ff",
        scale: 1.05,
        ease: "power2.out"
      });
    });
    card.addEventListener('mouseleave', () => {
      gsap.to(card, {
        duration: 0.3,
        boxShadow: "none",
        scale: 1,
        ease: "power2.out"
      });
    });
  });
  </script>
</body>
</html>
PreviousSự khác biệt giữa scrollTrigger trong gsap.to() và ScrollSmoother.create() (ok)NextScrollTrigger.create khác gì so với và scrollTrigger trong gsap.to (ok)

Last updated

Was this helpful?