Perspective Mockup Slideshow

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:

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:

• Free PSD Mockups Vol.2
• Morning Device Mockups
• Line Icons by Jonas Nullens for PixelBuddha

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

• 6 MacBook in the house mockups
• Author’s Website: Made by Vadim
• Vadim Sherbakov’s Creative Market Shop