Simple CSS for a smooth subtle Parallax Effect for Images

If you use this CSS you can transform the total themes wpbakery „Image swap“ element into a nice cascading image set of two images with a subtle smooth parallax scrolling effect. Here is what it looks like. The effect is subtle but noticeable and looks smooth and clean and cool. A GIF tells more than words. Have a look. I have added a green background as a comparison:

Here is the CSS for the smooth parallax image effect when scrolling

To adjust the range for the effect and intensity or range of the movement, just change the marked values. I have added some comments to make things clearer. Also the CSS introduces two classes you can use in the WPBAKERY Image swap element. You can cascade a parallax secondary image element „bottom left“ [cascade-left] or „bottom right“ [cascade-right] of a primary background image. Just add the class in the elements setting and this CSS in the Child Themes style.css or Custom CSS area.

/*SUBTLE IMG ANIMATION*/
@keyframes scale-faster {
	 /* pos value is lower, neg value is higher */
	from {
		transform: translateY(0px); /*start Y position*/
	}
	to {
		transform: translateY(-120px); /*end Y position*/
	}
}
@keyframes scale-slower {
	 /* pos value is lower, neg value is higher */
	from {
		transform: translateY(0px); /*start Y position*/
	}
	to {
		transform: translateY(-50px); /*end Y position*/
	}
}
@media (prefers-reduced-motion: no-preference) {
	.cascading-right .vcex-image-swap-secondary,
	.cascading-left .vcex-image-swap-secondary {
		animation: scale-faster linear both; /*front image is faster*/
		animation-timeline: view();
		animation-range: 0vh 100vh; /*range where effect occurs*/
	}
	.cascading-right .vcex-image-swap-primary,
	.cascading-left .vcex-image-swap-primary {
		animation: scale-slower linear both; /*back image is slower*/
		animation-timeline: view();
		animation-range: 0vh 100vh; /*range where effect occurs*/
	}
}

/*BOTTOM IMAGE IS RIGHT*/
.cascading-right .vcex-image-swap-inner {
	overflow: visible;
}
.cascading-right .vcex-image-swap-primary {
	width: 75%;
	opacity: 1 !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14), 0 20px 70px rgba(0, 0, 0, 0.12);
}
.cascading-right .vcex-image-swap-secondary {
    width: 75%;
    opacity: 1 !important;
    position: absolute;
    /* top: 80%; */
    bottom: 5%; /*front image align bottom*/
    top: unset;
    left: 25%;
    /*-ms-transform: translateY(-50%) translateX(-0%);
     -webkit-transform: translateY(-50%) translateX(-0%); 
     transform: translateY(-50%) translateX(-0%); */
    box-shadow: 0 30px 80px rgba(0,0,0,0.14),0 20px 70px rgba(0,0,0,0.12);
}

/*BOTTOM IMAGE IS LEFT*/
.cascading-left .vcex-image-swap-inner {
	overflow: visible;
}
.cascading-left .vcex-image-swap-primary {
	width: 75%;
	margin-left: auto;
	opacity: 1 !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14), 0 20px 70px rgba(0, 0, 0, 0.12);
}
.cascading-left .vcex-image-swap-secondary {
	width: 75%;
	opacity: 1 !important;
	position: absolute;
	/*top: 80%;*/
	bottom: 5%;
	top: unset;
	right: 25%;
/*	-ms-transform: translateY(-50%) translateX(-0%);
	-webkit-transform: translateY(-50%) translateX(-0%);
	transform: translateY(-50%) translateX(-0%);*/
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14), 0 20px 70px rgba(0, 0, 0, 0.12);
}

Usage

Just add „cascading-left“ or „cascading-right“ to the image swap element and select two images as the front and back images. The swap effect will be overridden with the above CSS.