Perspective Mockup Slideshow

An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.

A while back, Franklin Ta wrote an article and made a really useful script for transforming an element in 3D in order to fit in a perspective mockup. In his article, he describes how the helper script can be used to create a 3D matrix transformation for embedding an iframe into a mockup image. We thought that it must be really interesting to add a slideshow in order to showcase ones work.

So we’ve used Franklin’s script to create the transformed elements and added a slideshow inside. In order to make the whole thing responsive (the transformation is based on pixels), we scale the main mockup in order to fit into its parent container. The nice thing of using the 3D matrix transforms is that we can use the “real” size for the images in the slideshow (i.e. based on the devices we display). Head over to Franklin’s article to learn how his script works in detail and in order to understand the interesting Math behind it.

In summary, the script can be executed using the console of your dev tools. The corners of the selected element can then be dragged into position and the transform value can be copied (if you inspect your element, you’ll see the value) and pasted into the respective class of the screen element.

Here is an example how we’ve added the transforms to one of our mockup screens (demo 1):

.mobile {
	overflow: hidden;
	position: absolute;
	z-index: 100;
	background: #333;
	width: 320px;
	height: 480px;
	top: 200px;
	left: 500px;
	outline: 1px solid transparent; /* For Firefox (jagged edges bug) */
	transform-origin: 0 0 0;
	transform: matrix3d(0.846234173238242, 0.251585817964749, 0, 0.000085171934399447, -0.115203182108559, 0.800700357116676, 0, -0.000214263459947427, 0, 0, 1, 0, 23, 14, 0, 1);
}

Don’t forget to add the -webkit- prefix for support in Safari, iOS Safari and Android browsers.

The simple slideshow plugin uses CSS animations to show and hide the slides. We’ve used some custom animations, but you can plug in any animation from Daniel Eden’s animate.css.

The styles for the slideshow are the following:

.slideshow {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	list-style-type: none;
}

.slideshow__item {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
	transform: translate3d(-100%, 0, 0);
}

.slideshow__item.current{
	pointer-events: auto;
	z-index: 100;
	transform: translate3d(0, 0, 0);
}

.slideshow img {
	width: 100%;
}

We “hide” the slides by translating them to the left (instead of using opacity, for example). The current item will get the class “current”.

An example for the animation classes is the following (demo 2):

.slideshow__item.in--next {
	animation: inNext 0.5s forwards;
}

.slideshow__item.out--next {
	animation: outNext 0.5s forwards;
}

.slideshow__item.in--prev {
	animation: inPrev 0.5s forwards;
}

.slideshow__item.out--prev {
	animation: outPrev 0.5s forwards;
}

@keyframes inPrev {
	0% {
		transform: translate3d(0, 100%, 0);
	}
	100% {
		transform: none;
	}
}

@keyframes inNext {
	0% {
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		transform: none;
	}
}

@keyframes outPrev {
	100% {
		transform: scale3d(0.5, 0.5, 1);
	}
}

@keyframes outNext {
	100% {
		transform: translate3d(0, 100%, 0);
	}
}

Here you can check out some different examples:

MockupSlideshow01

MockupSlideshow02

MockupSlideshow03

MockupSlideshow04

In this last example we have two slideshows running at different times. This might be an interesting idea to showcase responsive works.

We hope you like this little idea and find it useful!

A big thank you to the authors of the fantastic resources used in the demos:

Demo 2 image copyright by Vadim Sherbakov with granted permission to be used in our demo:

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.