Posts Tagged ‘One image to another’


3D card flipping : Flipping a simple image to a div (transitions and 3d transforms)
Plan
  1. Put an image on top of a div inside a container.
  2. Put that in another container with perspective defined.

When hovering on the outside container, add a rotate around the Y axis to the inside container

Code

First, the markup.

<div id="f1_container">
	<div id="f1_card">
		<div>
			<img src="/images/Stones.jpg"/>
		</div>
		<div>
			<p>This is nice for exposing more information about an image.</p>
			<p>Any content can go here.</p>
		</div>
 		</div>
</div>

Then the CSS, stripped of the vendor prefixes to keep it clean.

#f1_container {
	position: relative;
	margin: 10px auto;
	width: 450px;
	height: 281px;
	z-index: 1;
}
.face.back {
	display: none;
}

#f1_container {
	perspective: 1000;				
}
#f1_card {
	width: 100%;
	height: 100%;	
	transform-style: preserve-3d;
	transition: all 1.0s linear;	
}
#f1_container:hover #f1_card {
	transform: rotateY(180deg);
	box-shadow: -5px 5px 5px #aaa;
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.face.back {
	display: block;
	transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	color: white;
	text-align: center;
	background-color: #aaa;
}

.

Advertisements

Sliding with transfoms : Sliding by translating the images (transitions and transforms)

Note: Animating by transitioning transforms is hardware accelerated on iPhone OS, making this a good option there.

Plan
  1. Create a container with overflow set to hidden.
  2. Inside that container, create another container with width equal to the width of all the images added together.
  3. Inside that, float the images left with no padding or margin.

When clicking a control, translate the second container to show the required image

Code

Exactly the same as Demo 1, but the JS looks like this: (times 4 for the vendor specific markup)

$(document).ready(function() {
	$("#slide2-1").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(0px, 0px)");
	});
	$("#slide2-2").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-450px, 0)");
	});
	$("#slide2-3").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-900px, 0)");
	});
	$("#slide2-4").click(function() {
		$("#slide2_images").css("-webkit-transform","translate(-1350px, 0)");
	});
});

.


Cross fading images : One image to another with a timer (Webkit/Firefox 5/IE10 only, transitions and animations)
Plan

You could implement this by using Javascript to toggle classes with a delay – that would allow older browsers to still have the images change. As we are looking forward though, we’ll use CSS keyframes.

  1. Start with demo 1
  2. Use CSS keyframes to define two states, one with top image transparent, one with it opaque.
  3. Set the animations number of iterations to infinite
Code

Everything’s the same as Demo 1, but I’ve added this to the CSS and removed the hover selector

@keyframes cf3FadeInOut {
	0% {
		opacity:1;
	}
	45% {
		opacity:1;
	}
	55% {
		opacity:0;
	}
	100% {
		opacity:0;
	}
}

#cf3 img.top {
	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
}

To make sense of that, I’ve defined 4 keyframes, specified that whatever has this animation attached will be opaque for the first 45%, then transparent for the last 45%. The animation will repeat forever, will last 10 seconds, and will run forward then backwards. In other words, image 1 will be visible for 4.5 seconds, followed by a 1 second fade, followed by 4.5 seconds of image 2 being visible. Then it will reverse, meaning that image 1 and 2 will both be visible for 9 (4.5 x 2) seconds each time.

Demo with multiple images

This time I’ve created an animation that goes from 0 to 1 opacity, then staggered the animations so only one is visible at once. It’s not great, but it is maybe a start. Any suggestions on how to make this better would be gladly received!

	#cf4a img:nth-of-type(1) {
 		animation-delay: 0;		
	}
	#cf4a img:nth-of-type(2) {
 		animation-delay: 2s;		
	}
	#cf4a img:nth-of-type(3) {
 		animation-delay: 4s;		
	}
	#cf4a img:nth-of-type(4) {
 		animation-delay: 6s;		
	}

Cross fading images One image to another, when a button is pressed (transitions)
Code

First up, the HTML markup. Again, with no CSS enabled, you just get two images.

<div id="cf2">
	<img src="/tests/images/Stones.jpg" />
	<img src="/tests/images/Summit.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>

Then the CSS. I’ve added a class with the opacity value.

#cf2 {
	position:relative;
	height:281px;
	width:450px;
	margin:0 auto;
}
#cf2 img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;	
	transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
	opacity:0;
}
#cf_onclick {
	cursor:pointer;
}

Then the extremely short JS. Note that the browser is smart enough to realise that it can animate to the new properties, I didn’t have to set them in javascript (thought that works too).

$(document).ready(function() {
	$("#cf_onclick").click(function() {
		$("#cf2 img.top").toggleClass("transparent");
	});
});

Cross fading images
One image to another, on hover (transitions)
Code

First up, the HTML markup. Without CSS enabled, you just get two images. Remember to add alt text for production use.

<div id="cf"> <img src="img1.jpg" /> <img src="img2.jpg" /> </div>

Then the CSS:

#cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover { opacity:0; }