About this demo

In this demo, the images in the carousel slide across as they enter/exit the scrollport, creating a parallax/window effect.

The images are sourced from https://picsum.photos.

The Code / Explanation

Base layout

The images are all square and are laid out into a wrapper that’s a bit more narrow. To prevent then from getting squeezed and to position them, the object-* properties are used.

.slide > img {
	object-fit: cover;
	object-position: 100% 0;
}

With this code, the image gets clipped a bit, with only the the right part entirely in view.

The animation adjusts the object position so that the other side of the image becomes visible. This animation is linked to a View Timeline that tracks the image on the x axis.

@keyframes adjust-image {
	0% {
		object-position: 100% 0;
	}
	100% {
		object-position: 0 0;
	}
}

.slide > img {
	animation: adjust-image linear both;
	animation-timeline: view(x);
}