Posts Tagged ‘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

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

How to use CSS3  transforms

There are two categories of transform – 2D transforms and 3D transforms. As of May 2010, 3D transforms only work in Safari (both desktop and mobile). 2D transforms are more widely supported.

2D examples

#skew {
	transform:skew(35deg);
}
#scale {
	transform:scale(1,0.5);
}
#rotate {
	transform:rotate(45deg);
}
#translate {
	transform:translate(10px, 20px);
}
#rotate-skew-scale-translate {
	transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
}

3D Examples

3D transforms are similar to 2D transforms. The basic properties are translate3d, scale3d, rotateX, rotateY and rotateZ. Translate3d and scale3d take three arguments for x,y and z, whereas the rotates just take an angle. Here are some examples:

#transDemo4 div {
	transition:all 2s ease-in-out;
	perspective: 800;
	perspective-origin: 50% 100px;
}
#transDemo4:hover #rotateX {
	transform:rotateX(180deg);
}
#transDemo4:hover #rotateY {
	transform:rotateY(180deg);
}
#transDemo4:hover #rotateZ {
	transform:rotateZ(180deg);
}

For more information read both the Webkit blog entry from when this was first implemented, and David Desandro’s awesome examples.


Using CSS3 Transitions, Transforms and Animation

Accordions

Plan

  1. Mark up a few sections with a title and content
  2. Set the height to all but the first to 0, and overflow to hidden on all of them
  3. Bind click events on the titles to change the height

Not sure if the use/abuse of Unicode is really a good idea, but you can see that it’s pretty easy to get a simple accordion working.

I’m using classes again here to define different states, then using jQuery to turn them on and off. As always, I could use the :target pseudo selector, but I’d want to use preventDefault() onClick anyway to prevent the page skipping up and down, so I might as well just do it all in jQuery.

The Code

HTML:

<div id="accordion">
	<section id="item1">
		<p>▶</p><h1><a href="#">A long paragraph</a></h1>
		<p>Pellentesque habitant... </p>
	</section>
	<section id="item2">
		<p>▶</p><h1><a href="#">A medium paragraph</a></h1>
		<p>Pellentesque habitant... </p>
	</section>
	<section id="item3">
		<p>▶</p><h1><a href="#">Two short paragraphs</a></h1>
		<p>Pellentesque habitant... </p>
		<p>Pellentesque habitant... </p>
	</section>
</div>

CSS:

#accordion section,	#accordion .pointer, #accordion h1, #accordion p {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#accordion {
	margin-bottom:30px;
}
#accordion h1 {
	font-size:20px;
	background-color:rgba(255,0,0,0.3);
	margin:0;
	padding: 10px 10px 10px 30px;
}

#accordion h1 a {
	color:black;
}
#accordion section {
	overflow:hidden;
	height:220px;
	border:1px #333 solid;
}
#accordion p {
	padding:0 10px;
	color:black;
}
#accordion section.ac_hidden p:not(.pointer) {
	color:#fff;
}

#accordion section.ac_hidden {
	height:44px;
}
#accordion .pointer {
	padding:0;
	margin:10px 0 0 6px;
	line-height:20px;
	width:13px;
	position:absolute;
}
#accordion section:not(.ac_hidden) h1 {
	background-color:rgba(255,0,0,0.7);
}

#accordion section:not(.ac_hidden) .pointer {
	display:block;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	padding:0;
}

Plus a bit of javascript to turn the classes on and off.

$(document).ready(function() {
	$("#accordion section h1").click(function(e) {
		$(this).parents().siblings("section").addClass("ac_hidden");
		$(this).parents("section").removeClass("ac_hidden");

		e.preventDefault();
	});
});