I needed to create a repeating animation to use as a background for a website, so I set up a few test files. I ended using jQuery’s animate() function’s callback, called “step,” to create a rudimentary kickass timeline. Here’s how I got there:

0. Setting the stage

The jQuery Plugin, Background Position, is used to animate backgrounds in the first example. Otherwise, it’s just jQuery.

1. Creating a repeating background animation

In this example we have rows of triangles are animating at different speeds. Because the triangle pattern repeats nicely, the background-position is set to animate left in the amount of one triangle width over a period of a few seconds. Odd rows move at one speed, even at another. jQuery is set to take care of the adding/subtracting of rows when the window is resized.

Example code used to animate all of the even rows:

$('.pattern:even').css('background-position', '0 0');
$('.pattern:even').animate(
	{backgroundPosition:'(-100px 0)'}, 3000, 'linear'
});

The problem with this is when the height of the window is increased, the newly added rows are stationary until the animate function is called again.

2. Creating a makeshift timeline using jQuery

To make sure all elements are in motion from the moment they come into view we’ll use the Step callback from jQuery’s animate function to call a function that updates the position of every element.

To create a pseudo-timeline we’re going to animate a dummy div element, “#timeline.” The sample code below shows that over the course of 5 seconds the text-indent property is animated from 0 to 100, and then reset to 0. Since the element doesn’t contain any text there won’t be any noticeable action, instead we’ll get a value that we can use as a percentage. And every time the step callback is fired, we’ll call a function (updateElements) that uses that percentage to reposition the rows of triangles.

Example code using step callback to determine percentage:

$('#timeline').css('text-indent', 0);
$('#timeline').animate(
		{textIndent:100},
		{duration:5000,
		 easing:'linear',
		 step:function(now){
			updateElements(Math.round(now)/100);
			}
		});

3. Constructing a simple scene with an intro animation

Here’s an example of a repeating scene that could be animated with this technique.

4. References

Ben Nadel’s article, Using jQuery’s Animate Step Callback Function to Create Custom Animations, was a great help. I recommend giving it a read.

One of the key steps in creating a responsive web layout is defining how it will look on mobile devices. While media-queries allow us to define alternate CSS for the positioning and scaling of elements, the viewport meta tag defines the width and scale of the “page” itself.

Here’s an example of a tag that will force the browser to resize a website based on the device’s viewport:

<meta name=”viewport” content=”width=device-width”>

So, what does this mean?

Most mobile web browsers will scale web pages down so the entire width of a page fits neatly. Which is great, especially for sites that haven’t been optimized for small displays. The caveat is, the browser doesn’t scale pages up in size to fit the screen, even if the width of the page is set to device’s resolution. Enter the meta tag.

By adding the viewport meta tag we can force the browser to use its display resolution (or any specified number) as the base width for a website. A few other parameters can be added as well to further handle user/browser scaling.

Here are a couple articles to add to your Instapaper:

• Using the viewport meta tag to control layout on mobile browsers
• Configuring the Viewport