Demo 2 - Sliding by translating the images (transitions and transforms)

Note: Animating by transitioning transforms is hardware accelerated on iOS, 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.
4. When clicking a control, translate the second container to show the required image.

Demo

Image 1Image 2Image 3Image 4

Code

Exactly the same as Demo 1, but the JS looks like this: (times 5 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)");
	});
});

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

Contents

1. How to use transitions
2. How to use transforms
3. How to use animations
4. Cross fading images
1. On hover
2. On button press
3. With timer
4. More than just fades
5. Animating the background-image property
5. Sliding content
1. Sliding by transitions
2. Sliding by transitions + translations
6. 3D Flipping content
7. Animated Accordions
8. Notes on browser support
9. How will it look in legacy browsers?
10. Further Reading