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

Facebook has made it easier than ever to create a custom page tab. No more installing Static FBML apps, now it’s as easy creating an app as a developer.

I built this childish Facebook page tab as an example, and I have to say it’s probably the dumbest tab I’ve ever seen. I love it.

Install the Pull My FInger page tab.

The holidays serve as an annual reminder of what’s important. And it isn’t the mountains of gifts piled high under the tree. Sorry, Big-box-store, it’s that time of year to focus on what really matters.

Having trouble viewing posts from a new custom post type? Are you only seeing “Nothing found” or your 404 page?

Try re-saving your Permalinks structure.

This has come up a few times when I’ve used a custom structure for my permalinks (/%postname%). For whatever reason, re-saving your permalinks settings allows posts from all post types to show up at their proper urls.

Need help setting up custom post types? This article from Smashing Magazine will get you started: How To Build A Media Site On WordPress ]]> http://jongerla.ch/wordpress-custom-post-types-throwing-a-404/feed 0 http://jongerla.ch/delicious-gradients-in-cinema4d http://jongerla.ch/delicious-gradients-in-cinema4d#comments Wed, 16 Nov 2011 06:58:07 +0000 jongerlach http://jongerla.ch/?p=331

These images were created in Cinema4D using platonics and an x-ray shader.

While prepping a bunch of videos for HTML5, I found that my go-to video conversion software didn’t offer OGG support, which is essential for cross browser playability. After searching the googs and trying a bunch of different options I found (using John Gruber’s article as a solid recommendation) ffmpeg2theora.

It’s great. Not only does it work on Mac/PC/Linux, it’s really easy to use. I was able to crank out some great looking OGG videos in no time, even with my limited exposure to command-line computing.

Here’s a quick and simplified overview of how to get started with ffmpeg2theora on a mac, from a non-expert. OK, let’s go!

Getting started with ffmpeg2theora

Now go ahead and change a few more of the options until your video is the size and quality you like. And since we’re working in Terminal, you can open up multiple windows and convert multiple videos at the same time.

&#38; is the ascii equivalent of the ampersand, which is the perfect symbol to describe the devigner. Someone who does this & that, someone who is both creative and analytical.

Above is a first round execution exploring one possibility for a mark that sums up the designer/developer types.