Share:

Looking to create a stunning yet simple scroll effect? In this tutorial, I’ll guide you through building a sleek, responsive stacked card animation with Elementor and minimal CSS—no extra plugins or heavy code required. This method solves the common problem of stacked cards shifting position when they reach the bottom of their container.

/* --------------- CODE FOR IMAGES ---------------- */
/* ----------- KEEP ROTATIONS ON MOBILE ----------- */

selector {
  --offset-space: 25px; /* CHANGE TO YOUR MOBILE OFFSET SPACING */
}
selector img {
  transition: transform 300ms ease-in-out 20ms;
}
/* CARD 1 */
selector .elementor-sticky--active:nth-of-type(1) img {
  margin-bottom: calc(var(--offset-space) * 3);
}
/* CARD 2 */
selector .elementor-sticky--active:nth-of-type(3) img {
  margin-bottom: calc(var(--offset-space) * 2);
  transform: rotate(3deg);
}
/* CARD 3 */
selector .elementor-sticky--active:nth-of-type(5) img {
  margin-bottom: var(--offset-space);
  transform: rotate(6deg);
}
/* CARD 4 */
selector .elementor-sticky--active:nth-of-type(7) img {
  transform: rotate(9deg);
}
@media (min-width: 768px) {
  selector {
    --offset-space: 50px; /* CHANGE TO YOUR OFFSET SPACING */
  }
}

/* --------------- CODE FOR IMAGES ---------------- */
/* --------- REMOVE ROTATIONS FROM MOBILE --------- */

selector {
  --offset-space: 25px; /* CHANGE TO YOUR MOBILE OFFSET SPACING */
}

/* CARD 1 */
selector .elementor-sticky--active:nth-of-type(1) img {
  margin-bottom: calc(var(--offset-space) * 3);
}
/* CARD 2 */
selector .elementor-sticky--active:nth-of-type(3) img {
  margin-bottom: calc(var(--offset-space) * 2);
}
/* CARD 3 */
selector .elementor-sticky--active:nth-of-type(5) img {
  margin-bottom: var(--offset-space);
}

@media (min-width: 768px) {
  selector {
    --offset-space: 50px; /* CHANGE TO YOUR OFFSET SPACING */
  }
  selector img {
    transition: transform 300ms ease-in-out 20ms;
  }
  /* CARD 2 */
  selector .elementor-sticky--active:nth-of-type(3) img {
    transform: rotate(3deg);
  }
  /* CARD 3 */
  selector .elementor-sticky--active:nth-of-type(5) img {
    transform: rotate(6deg);
  }
  /* CARD 4 */
  selector .elementor-sticky--active:nth-of-type(7) img {
    transform: rotate(9deg);
  }
}


/* ------------- CODE FOR CONTAINERS -------------- */
/* ----------- KEEP ROTATIONS ON MOBILE ----------- */

selector {
  --offset-space: 25px; /* CHANGE TO YOUR MOBILE OFFSET SPACING */
}
selector .elementor-sticky > div {
  transition: transform 300ms ease-in-out 20ms;
}
/* CARD 1 */
selector .elementor-sticky--active:nth-of-type(1) > div {
  margin-bottom: calc(var(--offset-space) * 3);
}
/* CARD 2 */
selector .elementor-sticky--active:nth-of-type(3) > div {
  margin-bottom: calc(var(--offset-space) * 2);
  transform: rotate(3deg);
}
/* CARD 3 */
selector .elementor-sticky--active:nth-of-type(5) > div {
  margin-bottom: var(--offset-space);
  transform: rotate(6deg);
}
/* CARD 4 */
selector .elementor-sticky--active:nth-of-type(7) > div {
  transform: rotate(9deg);
}
@media (min-width: 768px) {
  selector {
    --offset-space: 50px; /* CHANGE TO YOUR OFFSET SPACING */
  }
}

/* ------------- CODE FOR CONTAINERS -------------- */
/* --------- REMOVE ROTATIONS FROM MOBILE --------- */

selector {
  --offset-space: 25px; /* CHANGE TO YOUR MOBILE OFFSET SPACING */
}

/* CARD 1 */
selector .elementor-sticky--active:nth-of-type(1) > div {
  margin-bottom: calc(var(--offset-space) * 3);
}
/* CARD 2 */
selector .elementor-sticky--active:nth-of-type(3) > div {
  margin-bottom: calc(var(--offset-space) * 2);
}
/* CARD 3 */
selector .elementor-sticky--active:nth-of-type(5) > div {
  margin-bottom: var(--offset-space);
}

@media (min-width: 768px) {
  selector {
    --offset-space: 50px; /* CHANGE TO YOUR OFFSET SPACING */
  }
  selector .elementor-sticky > div {
    transition: transform 300ms ease-in-out 20ms;
  }
  /* CARD 2 */
  selector .elementor-sticky--active:nth-of-type(3) > div {
    transform: rotate(3deg);
  }
  /* CARD 3 */
  selector .elementor-sticky--active:nth-of-type(5) > div {
    transform: rotate(6deg);
  }
  /* CARD 4 */
  selector .elementor-sticky--active:nth-of-type(7) > div {
    transform: rotate(9deg);
  }
}
CSS

Kamal Hosen

I began my WordPress journey in 2013 by editing themes, sparking my passion for web development. By 2016, I had transitioned into a professional WordPress developer role. Over the years, I've worked with various companies and on numerous projects, eventually leading development teams and guiding projects from conception to completion. As a WordPress enthusiast, I am dedicated to building innovative solutions and contributing to the WordPress community.

Twitter Facebook LinkedIn