# Stacking Cards Parallax > Scroll-stacked cards with parallax and subtle rotation on the previous layer — cinematic storytelling sections. **Definition:** Stacking Cards Parallax is a scroll UI animation from collections.html. It is built with HTML, CSS, JavaScript, and GSAP, ships with a live preview, and is free to copy into personal and commercial projects. ## Facts - Category: Scroll - Stack: HTML, CSS, JavaScript, and GSAP - Added: 2026-08-03 - Canonical page: https://html.bosconvertpro.com/collection/stacking-cards-parallax - Full-page preview: https://html.bosconvertpro.com/collection/stacking-cards-parallax/full - Live demo: https://html.bosconvertpro.com/demos/stacking-cards-parallax/index.html - Markdown mirror: https://html.bosconvertpro.com/collection/stacking-cards-parallax/index.md - License: https://html.bosconvertpro.com/terms ## How to use 1. Open https://html.bosconvertpro.com/collection/stacking-cards-parallax/full to preview the animation in full screen. 2. Copy index.html, styles.css, and script.js from the code tabs on https://html.bosconvertpro.com/collection/stacking-cards-parallax. 3. Paste the files into your project and adjust timing, easing, and content as needed. ## FAQ ### What is Stacking Cards Parallax? Stacking Cards Parallax is a scroll UI animation from collections.html. Scroll-stacked cards with parallax and subtle rotation on the previous layer — cinematic storytelling sections. ### What is Stacking Cards Parallax built with? Stacking Cards Parallax is built with HTML, CSS, JavaScript, and GSAP. The source for every file is shown on the animation page and can be copied straight into your project. ### How do I use Stacking Cards Parallax in my project? Open the animation page (https://html.bosconvertpro.com/collection/stacking-cards-parallax), preview it live, then copy index.html, styles.css, and script.js from the code tabs. Paste the files into your project and adjust timing, easing, and content as needed. A standalone demo runs at https://html.bosconvertpro.com/demos/stacking-cards-parallax/index.html. ### Is Stacking Cards Parallax free to use? Yes. The Stacking Cards Parallax demo code may be used in personal and commercial projects. You may not resell or redistribute the collection itself as a competing template pack. Full terms: https://html.bosconvertpro.com/terms. ## Source — index.html ````html Stacking Cards Parallax

obsidian
forged in silence

Abstract fluid art in deep tones
Materials 01 / 05

terracotta
earth held close

Handmade ceramic vessels
Materials 02 / 05

indigo
depth before dawn

Deep blue abstract texture
Materials 03 / 05

sagewood
growth without noise

Mountain landscape in soft light
Materials 04 / 05

champagne
light made solid

Soft abstract color wash
Materials 05 / 05
```` ## Source — styles.css ````css /* ============================================ Stacking Cards Parallax ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; min-height: 100%; color: #f2efe8; background-color: #0c0b10; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { vertical-align: middle; max-width: 100%; display: inline-block; border: 0; } /* ---------- Section ---------- */ .section-resource { justify-content: center; align-items: flex-start; min-height: 100vh; display: flex; } /* ---------- Collection / list ---------- */ .stacking-cards__collection { width: 100%; } .stacking-cards__list { flex-flow: column; display: flex; } .stacking-cards__item { color: #fff; border-top-left-radius: 1em; border-top-right-radius: 1em; flex-flow: column; justify-content: center; align-items: center; width: 100%; min-height: 100vh; margin-top: -1em; padding-top: 5em; padding-bottom: 5em; display: flex; position: relative; } /* Premium solid card tones */ .stacking-cards__item.is--green { background-color: #14352c; } .stacking-cards__item.is--purple { background-color: #3d2a4a; } .stacking-cards__item.is--blue { background-color: #1a2d4a; } .stacking-cards__item.is--brown { background-color: #3a2e1f; } .stacking-cards__item.is--red { background-color: #3a1f24; } /* ---------- Heading (exact metrics; system font instead of PP Neue Corp) ---------- */ .stacking-cards__item-h { text-align: center; text-transform: uppercase; margin-top: 0; margin-bottom: 0; font-family: Arial Black, Arial, Helvetica, sans-serif; font-size: 8vw; font-weight: 700; line-height: 0.8; letter-spacing: -0.02em; } .stacking-card__heading-faded { opacity: 0.5; } /* ---------- Image (exact metrics) ---------- */ .stacking-cards__item-img { aspect-ratio: 1; border-radius: 0.75em; width: 30vw; margin-top: -1vw; object-fit: cover; } /* ---------- Top labels (exact metrics) ---------- */ .stacking-cards__item-top { justify-content: space-between; align-items: center; display: flex; position: absolute; top: 2.5em; left: 2.5em; right: 2.5em; } .stacking-card__top-span { font-size: 1em; font-weight: 500; } ```` ## Source — script.js ````javascript /** * Stacking Cards Parallax * * Behaviour: * - Smooth scrolling via Lenis (synced with ScrollTrigger) * - Skip first card * - As each later card scrolls from bottom → top of viewport, * move the PREVIOUS card down (yPercent: 50) * and parallax/rotate its image (rotate: -5, yPercent: -25) */ gsap.registerPlugin(ScrollTrigger); let lenis = null; function initSmoothScroll() { if (typeof Lenis === "undefined") return; if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), smoothWheel: true, touchMultiplier: 1.15, }); // Keep ScrollTrigger in sync with smoothed scroll position lenis.on("scroll", ScrollTrigger.update); gsap.ticker.add((time) => { lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); } function initStackingCardsParallax() { const cards = document.querySelectorAll("[data-stacking-cards-item]"); if (cards.length < 2) return; cards.forEach((card, i) => { // Skip over the first section if (i === 0) return; // When current section is in view, target the PREVIOUS one const previousCard = cards[i - 1]; if (!previousCard) return; // Find any element inside the previous card const previousCardImage = previousCard.querySelector( "[data-stacking-cards-img]" ); let tl = gsap.timeline({ defaults: { ease: "none", duration: 1, }, scrollTrigger: { trigger: card, start: "top bottom", end: "top top", scrub: true, invalidateOnRefresh: true, }, }); tl.fromTo(previousCard, { yPercent: 0 }, { yPercent: 50 }).fromTo( previousCardImage, { rotate: 0, yPercent: 0 }, { rotate: -5, yPercent: -25 }, "<" ); }); } // Initialize document.addEventListener("DOMContentLoaded", () => { initSmoothScroll(); initStackingCardsParallax(); }); ````