Posts Tagged ‘transitions’


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

Sliding by changing position : Sliding by adding padding (transitions)
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, change the left position of the second container to show the required image.
Code

Firstly, the mark up:

<div id="slide1_container">
	<div id="slide1_images">
		<img src="img1.jpg" />
		<img src="img2.jpg" />
		<img src="img3.jpg" />
		<img src="img4.jpg" />		
	</div>
</div>
<p id="slide1_controls">
	<span id="slide1-1">Image 1</span>
	<span id="slide1-2">Image 2</span>
	<span id="slide1-3">Image 3</span>
	<span id="slide1-4">Image 4</span>
</p>

The CSS:

#slide1_controls span {
	padding-right:2em;
	cursor:pointer;
}
#slide1_container {
	width:450px;
	height:281px;
	overflow:hidden;
	position:relative;
}
#slide1_images {
	position:absolute;
	left:0px;
	width:1800px;
	-webkit-transition:all 1.0s ease-in-out;
	-moz-transition:all 1.0s ease-in-out;
	-o-transition:all 1.0s ease-in-out;
	-ms-transition:all 1.0s ease-in-out;	
	transition:all 1.0s ease-in-out;
}
#slide1_images img {
	padding:0;
	margin:0;
	float:left;
}

Again, I’m using javascript to bind events to the clickable controls. This time I’m adding the number of pixels to slide into the js, though I could have defined classes for this.

$(document).ready(function() {
	$("#slide1-1").click(function() {
		$("#slide1_images").css("left","0");
	});
	$("#slide1-2").click(function() {
		$("#slide1_images").css("left","-450px");
	});
	$("#slide1-3").click(function() {
		$("#slide1_images").css("left","-900px");
	});
	$("#slide1-4").click(function() {
		$("#slide1_images").css("left","-1350px");
	});
});

This code could be abstracted and improved, but we are looking to keep it simple here.


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

How to use CSS3 transitions

If you haven’t used transitions before, here’s a very brief introduction.

On the element you want to have animate, add the following CSS:

#id_of_element {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

There is a lot of duplication due to vendor prefixes – until the specification if finalised, this is likely to stay the same. If this bothers you, there are various tools such as CSS Scaffold or SASS that allow you to define mixins to avoid repetitive code.

The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. The options for the timing function are shown below.

Whenever any property changes, then it will animate instead of changing directly. This can be due to a different set of properties set on a pseudo class such as hover, or a new class or properties set by javascript. The example below uses :hover to change the properties – no javascript is needed.

In addition to the built in timing functions, you can also specify your own. The excellent Ceaser CSS Easing Tool makes this very easy.

Regarding the properties you can animate, the best way is to experiment. The Mozilla Developer Network maintain a list of properties that can be animated on their CSS Transitions page. These include everything from background-color and box-shadow to column width and box-flex. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. In addition, iOS hardware accelerates animations that don’t require repaints, namely opacity and transforms.

To find out more, read through the W3C specification.


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