Posts Tagged ‘Sliding by translating the images (transitions and transforms)’


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)");
	});
});

.

Advertisements