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

Disables the password reset notification email that gets sent to users.

To disable the admin notifications, see this snippet instead.

add_action( 'init', function() {

	add_filter( 'send_password_change_email', '__return_false' );

} );

Disables the password reset notification emails that go to the site admin.

add_filter( 'wp_password_change_notification_email', function( $args ) {

	// Skip For Site Admin Only
	if( $args['to'] == get_bloginfo( 'admin_email' ) ) {
		$args['to'] = '';
	}

	// Return
	return $args;

} );
PHP
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('scroll', function() {
        let y = window.scrollY;
        let scroll = document.getElementById('scroll');
        if (y > 150) { /* change this value here to make it show up at your desired scroll location. */
            scroll.classList.add('headershow');
        } else {
            scroll.classList.remove('headershow');
        }
    });
});
script>

<style>
.elementor-nav-menu__container {
    top: 0px !important;
}

#scroll.headershow {
    transform: translateY(0);
}

#scroll {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transition: transform 0.34s ease;
    transition: transform 0.34s ease;
    transform: translateY(-200px); /* adjust this value to the height of your header */
}
style>