Create Stacked Card Scrolling Effect Animation in Elementor.

Create Stacked Card Scrolling Effect Animation in Elementor.

Introduction:

Hello, WebSensePro enthusiasts! Welcome back to another exciting tutorial video. In today’s session, we’ll explore how to add a sleek stacked card animation effect to your WordPress website using Elementor. If you’re a developer looking to enhance your website’s visual appeal, you’re in the right place. Follow along as we guide you through the steps to create an eye-catching stacked card animation that adds a touch of elegance to your site.

The Stacked Card Animation Effect:

Before we dive into the tutorial, let’s take a moment to appreciate the final result. As you scroll down, you’ll notice the cards gracefully ascending, and as you scroll up, they elegantly return to their original position. This dynamic stacked card animation not only enhances the user experience but also adds a touch of sophistication to your website.

Create a New Page:
Begin by adding a new page where you’ll implement the stacked card animation.

Set Up the Main Container:

• Add a container with a column direction.
• Adjust the width to full width and set the main height to viewport height (VH).
• Choose a stylish background color to set the tone for your design.

Adding Elements:

• Drag and drop heading widgets, icons, and any additional elements you want in your animation.
• Ensure proper alignment and styling to create a visually appealing header section.

Designing the Cards:

• Within the main container, add a nested container to hold your stacked cards.
• Configure the container’s width, height, and background color to create a visually appealing base.

Stacked Card Structure:

• Add individual cards within the container, specifying their dimensions and styling.
• Include text, buttons, and other elements to customize each card’s content.

Responsive Design:

• Optimize your design for various screen sizes by adjusting container dimensions and font sizes.
• Test responsiveness in tablet and mobile portrait modes to ensure a seamless user experience.

Implementing the Stacked Card Animation:

CSS Classes:

• Assign CSS classes to relevant containers:
  • mdw-stacked-card for individual cards.
  • mdw-stacked-card-area for the main container.

Custom Code:

• Utilize the Elementor custom code feature to inject the necessary CSS.
• Add the provided code snippets (available in the description) to enable the stacked card animation.

Copy Code

selector{
    --card-scroll-height: 400;
    --card-rotate: 12;
}
selector .mdw-active-card{
    transform: translateY(-100vh) rotate(-60deg) !important;
    transition:1s;
    visibility: hidden;
    transform-origin: bottom left;
}
selector > .e-con,
selector > .e-container,
selector > .e-con-inner > .e-con,
selector > .e-con-inner > .e-container{
    position: sticky;
    top:0;
}

Conditions (if applicable):

• If prompted, set conditions for the code snippet to target the specific page or section where the stacked card animation is implemented.

Conclusion:

Congratulations! You’ve successfully implemented a stunning stacked card animation on your WordPress website using Elementor. This dynamic design element adds a touch of sophistication and interactivity, making your website stand out.