Animaciones Web Medio

Parallax Depth Card Grid

Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.

Abrir en Lab

gsap scrolltrigger css-3d perspective lenis

Targets: JS HTML

Código

:root {
  --bg: #070a12;
  --text: #f0f4fb;
  --panel: #121a2b;
  --border: #263249;
  --accent: #86e8ff;
  --muted: #8a95a8;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(134, 232, 255, 0.05) 0%, rgba(174, 82, 255, 0.05) 100%);
}

.hero .content {
  max-width: 600px;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.subtitle {
  font-size: 1.1rem;
  color: var(--muted);
}

/* Cards Container with Perspective */
.cards-container {
  padding: 6rem 2rem;
  background: rgba(18, 26, 43, 0.5);
  perspective: 1200px;
}

.cards-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  perspective-origin: center center;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card:hover {
  border-color: var(--accent);
  background: rgba(134, 232, 255, 0.08);
}

.card-inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.card-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--accent);
  opacity: 0.8;
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.7;
}

/* Details Section */
.details {
  max-width: 800px;
  margin: 4rem auto;
  padding: 4rem 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(18, 26, 43, 0.8);
}

.details .content {
  max-width: 800px;
  margin: 0 auto;
}

.details h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.details h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  color: var(--accent);
}

.details p {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.details ul {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.details li {
  color: var(--muted);
  margin-bottom: 0.8rem;
  line-height: 1.7;
}

.details li strong {
  color: var(--accent);
}

code {
  background: rgba(134, 232, 255, 0.1);
  color: var(--accent);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-family: "Monaco", "Courier New", monospace;
  font-size: 0.9rem;
}

.btn-back {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.8rem 1.5rem;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back:hover {
  background: rgba(134, 232, 255, 0.8);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .card {
    padding: 1.5rem;
  }

  .details {
    margin: 2rem auto;
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card-icon {
    font-size: 2.5rem;
  }

  .card h3 {
    font-size: 1.1rem;
  }
}

html.reduced-motion .card,
html.reduced-motion .hero {
  animation: none !important;
}

html.reduced-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";

gsap.registerPlugin(ScrollTrigger);

initDemoShell({
  title: "Parallax Depth Card Grid",
  category: "scroll",
  tech: ["gsap", "scrolltrigger", "css-3d-transforms"],
});

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add("reduced-motion");

// Intro animation
if (!reduced) {
  gsap.set(".hero .eyebrow", { opacity: 0, y: 20 });
  gsap.set(".hero h1", { opacity: 0, y: 40 });
  gsap.set(".hero .subtitle", { opacity: 0, y: 25 });

  gsap
    .timeline({ defaults: { ease: "expo.out" } })
    .to(".hero .eyebrow", { opacity: 1, y: 0, duration: 0.7, delay: 0.3 })
    .to(".hero h1", { opacity: 1, y: 0, duration: 0.9 }, "-=0.4")
    .to(".hero .subtitle", { opacity: 1, y: 0, duration: 0.7 }, "-=0.5");
}

// Card entrance animations with depth stagger
const cards = document.querySelectorAll(".card");
cards.forEach((card) => {
  const depth = parseFloat(card.style.getPropertyValue("--depth")) || 0.5;
  const index = parseInt(card.style.getPropertyValue("--index"), 10) || 0;

  // Initial state
  gsap.set(card, {
    opacity: 0,
    y: 80,
    scale: 0.8,
    rotationY: -15,
    rotationX: 10,
  });

  if (!reduced) {
    // Entrance animation with depth-based delay
    gsap.to(card, {
      opacity: 1,
      y: 0,
      scale: 1,
      rotationY: 0,
      rotationX: 0,
      duration: 1,
      ease: "expo.out",
      delay: depth * 0.3, // Depth determines stagger
      scrollTrigger: {
        trigger: ".cards-container",
        start: "top 70%",
        toggleActions: "play none none reverse",
      },
    });

    // Hover lift effect
    card.addEventListener("mouseenter", () => {
      gsap.to(card, {
        y: -20,
        boxShadow: "0 30px 60px rgba(134, 232, 255, 0.2)",
        duration: 0.4,
        overwrite: "auto",
      });
    });

    card.addEventListener("mouseleave", () => {
      gsap.to(card, {
        y: 0,
        boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
        duration: 0.4,
        overwrite: "auto",
      });
    });
  }
});

// Parallax depth during scroll
if (!reduced) {
  gsap.to(".cards-grid", {
    scrollTrigger: {
      trigger: ".cards-container",
      start: "top center",
      end: "bottom center",
      scrub: 1,
      onUpdate: (self) => {
        cards.forEach((card, i) => {
          const depth = parseFloat(card.style.getPropertyValue("--depth")) || 0.5;
          const offset = self.progress * depth * 50; // Parallax amount
          gsap.set(card, { y: offset, overwrite: "auto" });
        });
      },
    },
  });
}

// Details section reveals
document.querySelectorAll(".details h2, .details h3, .details p, .details ul").forEach((el) => {
  if (!reduced) {
    gsap.set(el, { opacity: 0, y: 30 });
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.7,
      ease: "expo.out",
      scrollTrigger: {
        trigger: el,
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  }
});

// List items
document.querySelectorAll(".details ul li").forEach((li, i) => {
  if (!reduced) {
    gsap.set(li, { opacity: 0, x: -20 });
    gsap.to(li, {
      opacity: 1,
      x: 0,
      duration: 0.6,
      ease: "expo.out",
      delay: 0.05 * i,
      scrollTrigger: {
        trigger: li,
        start: "top 75%",
        toggleActions: "play none none reverse",
      },
    });
  }
});

// Motion preference listener
window.addEventListener("motion-preference", (e) => {
  if (e.detail.reduced) {
    gsap.globalTimeline.paused(true);
  } else {
    gsap.globalTimeline.paused(false);
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parallax Depth Card Grid — stealthisdesign</title>
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"https://esm.sh/[email protected]","gsap/ScrollTrigger":"https://esm.sh/[email protected]/ScrollTrigger","gsap/SplitText":"https://esm.sh/[email protected]/SplitText","gsap/Flip":"https://esm.sh/[email protected]/Flip","gsap/ScrambleTextPlugin":"https://esm.sh/[email protected]/ScrambleTextPlugin","gsap/TextPlugin":"https://esm.sh/[email protected]/TextPlugin","gsap/all":"https://esm.sh/[email protected]/all","gsap/":"https://esm.sh/[email protected]/","lenis":"https://esm.sh/[email protected]/dist/lenis.mjs","three":"https://esm.sh/[email protected]","three/addons/":"https://esm.sh/[email protected]/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>
  <section class="hero">
    <div class="content">
      <span class="eyebrow">Demo 38</span>
      <h1>Parallax Depth Card Grid</h1>
      <p class="subtitle">Cards positioned at different depth layers, staggered entrance with perspective. Creates a cinematic 3D effect without using WebGL.</p>
    </div>
  </section>

  <section class="cards-container">
    <div class="cards-grid">
      <div class="card" style="--depth: 0.8; --index: 0;">
        <div class="card-inner">
          <div class="card-icon">◆</div>
          <h3>Strategic Vision</h3>
          <p>Cards recede into the distance with layered transforms, creating depth.</p>
        </div>
      </div>

      <div class="card" style="--depth: 0.6; --index: 1;">
        <div class="card-inner">
          <div class="card-icon">▲</div>
          <h3>Cinematic Feel</h3>
          <p>Rotation and scale based on depth position for premium impression.</p>
        </div>
      </div>

      <div class="card" style="--depth: 0.4; --index: 2;">
        <div class="card-inner">
          <div class="card-icon">●</div>
          <h3>Smooth Stagger</h3>
          <p>Each card enters in sequence with customized delay and easing.</p>
        </div>
      </div>

      <div class="card" style="--depth: 0.7; --index: 3;">
        <div class="card-inner">
          <div class="card-icon">■</div>
          <h3>Responsive</h3>
          <p>Parallax depth scales gracefully on mobile without performance hit.</p>
        </div>
      </div>

      <div class="card" style="--depth: 0.5; --index: 4;">
        <div class="card-inner">
          <div class="card-icon">✦</div>
          <h3>Hover Interaction</h3>
          <p>Cards lift forward on hover, responding to mouse position.</p>
        </div>
      </div>

      <div class="card" style="--depth: 0.9; --index: 5;">
        <div class="card-inner">
          <div class="card-icon">◈</div>
          <h3>CSS 3D Transforms</h3>
          <p>Pure CSS perspective without JavaScript for depth effects.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="details">
    <div class="content">
      <h2>How It Works</h2>
      <p>Each card has a <code>--depth</code> CSS variable that controls its position in 3D space. GSAP animates:</p>
      <ul>
        <li><strong>Transform:</strong> scaleZ, translateZ for depth positioning</li>
        <li><strong>Opacity:</strong> Cards closer to viewer are more opaque</li>
        <li><strong>Blur:</strong> Optional blur increases with distance (atmospheric perspective)</li>
        <li><strong>Delay:</strong> Each card stagger is calculated from its depth value</li>
      </ul>

      <h3>Technique Stack</h3>
      <p>This uses CSS 3D transforms with <code>perspective</code> container, GSAP for entrance choreography, and ScrollTrigger for scroll-based reveal. Hover states add interactivity.</p>

      <a href="/" class="btn-back">Back to Showcase</a>
    </div>
  </section>

  <script type="module" src="script.js"></script>
</body>
</html>

Parallax Depth Card Grid

Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.

Source

Repository: libs-genclaude
Original demo id: 38-parallax-depth-cards

Notes

Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.