Я пытаюсь реализовать эффект прокрутки липкой карты ⇐ CSS

[Anonymous]

Я пытаюсь реализовать эффект прокрутки липкой карты, но я сталкиваюсь с некоторыми проблемами и до сих пор не повезло. Вот скриншот

ни один из карт рабочих потоков или анимированных - они остаются статическими на странице. Ниже приведен фрагмент кода моей текущей реализации (HTML, CSS и JS). < /P>
Я бы очень признателен за какое -либо руководство, или если кто -то мог бы поделиться рабочей версией такого рода эффекта прокрутки, это было бы невероятно полезно. < /P>





Infinite Masta LLC - Launch Your Dream App








Our Workflow







First
Discovery & Planning
Through in-depth discussions with stakeholders and thorough analysis, we gather all necessary requirements, conduct feasibility study, and clearly define the project scope to set a solid foundation for successful project execution.







Then
Design & Development
Our team of expert designers and developers work together to create a user-friendly, visually appealing, and functional product that meets your specific business needs.







And
Testing & Deployment
Before launching your product, we conduct rigorous testing to ensure that it performs flawlessly. Once everything is in order, we deploy the product and provide ongoing support to ensure its success.







Finally
Support & Maintenance
Our commitment doesn't end with the launch. We provide continuous support and maintenance to keep your project up-to-date, secure, and optimized. You can count on us as your reliable IT partner.







© 2025 Infinite Masta LLC. All rights reserved.






< /code>
Вот код CSS: < /p>
.workflow {
position: relative;
padding: 80px 20px;
background: #0F0F1A;
color: #fff;
text-align: center;
min-height: 100vh;
display: flex;
flex-direction: column;
}

.workflow h2 {
font-size: 42px;
color: #00FFFF;
margin-bottom: 40px;
position: sticky;
top: 120px;
z-index: 10;
background: linear-gradient(180deg, #0F0F1A 80%, rgba(15, 15, 26, 0));
padding: 20px 0 40px;
margin-top: -20px;
transition: all 0.3s ease;
}

.workflow h2.scrolled-past {
position: relative;
top: auto;
background: transparent;
}

/* Sticky Scroll Container */
.workflow-sticky-container {
position: relative;
width: 100%;
height: 400vh; /* 4x viewport height for 4 cards */
}

.workflow-sticky-content {
position: sticky;
top: 220px; /* Adjusted to account for sticky header and heading */
height: calc(100vh - 220px);
display: flex;
flex-direction: column;
justify-content: center;
}

/* Original Workflow Cards */
.workflow-card {
position: absolute;
top: 0;
left: 50%;
width: 90%;
max-width: 800px;
background: linear-gradient(145deg, #1A1A2E, #141421);
padding: 30px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
display: flex;
transform: translateX(-50%) translateY(110%);
opacity: 0;
pointer-events: none;
transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
will-change: transform, opacity;
z-index: 1;
}

.workflow-card.active {
transform: translateX(-50%) translateY(0%);
opacity: 1;
pointer-events: auto;
z-index: 2;
}

.workflow-card .left-section {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
border-right: 1px solid #2a2a42;
}

.workflow-card .icon {
font-size: 100px;
color: #00FFFF;
margin-bottom: 20px;
}

.workflow-card .label {
font-size: 18px;
color: #FF00C7;
font-weight: bold;
text-transform: uppercase;
}

.workflow-card .right-section {
width: 50%;
padding: 20px;
text-align: left;
}

.workflow-card h3 {
font-size: 28px;
margin: 15 0 15px;
color: white;
}

.workflow-card p {
font-size: 18px;
color: #b9b9b9;
line-height: 1.6;
margin: 0;
}

.workflow-card:hover {
transform: translateX(-50%) translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.workflow-card.active:hover {
transform: translateX(-50%) translateY(-5px);
}
< /code>
Вот код JS < /p>
// Sticky Card Scroll Effect for Workflow Section
document.addEventListener("DOMContentLoaded", function () {
const workflowSection = document.querySelector("#workflow");
const workflowHeading = document.querySelector(".workflow h2");
const stickyContainer = document.querySelector(".workflow-sticky-container");
const stickyContent = document.querySelector(".workflow-sticky-content");
const cards = Array.from(document.querySelectorAll(".workflow-card"));

// Set the height of the sticky container based on number of cards
stickyContainer.style.height = `${cards.length * 100}vh`;

// Initialize the first card as active
cards.forEach((card, index) => {
if (index === 0) {
card.classList.add("active");
} else {
card.classList.remove("active");
}
});

// Scroll event listener for the sticky effect
window.addEventListener("scroll", function () {
const workflowTop = workflowSection.offsetTop;
const workflowHeight = workflowSection.offsetHeight;
const scrollPosition = window.scrollY;
const viewportHeight = window.innerHeight;

// Check if we're in the workflow section
if (scrollPosition >= workflowTop && scrollPosition {
if (index === activeIndex) {
card.classList.add("active");
} else {
card.classList.remove("active");
}
});

// Check if we've scrolled past the last card
if (scrollPosition >= workflowTop + workflowHeight - viewportHeight * 0.8) {
workflowHeading.classList.add("scrolled-past");
} else {
workflowHeading.classList.remove("scrolled-past");
}
} else {
// Reset when not in workflow section
workflowHeading.classList.remove("scrolled-past");
}
});
});


Подробнее здесь: https://stackoverflow.com/questions/796 ... oll-effect