If you do any programing in CSS and haven’t heard about LESS, then go check out lesscss.org right now! LESS is a great way to simplify your CSS and speedify your web design process. In this tutorial, I show you how to add cross-browser support for many CSS3 properties using this wonderful CSS compiler.

Meet LESS

There are a whole bunch of ways to simplify your CSS stylesheets, but my personal favorite is LESS. It’s simple documentation, ease of use, versatility, and Bryan Jones’s kick-ass mac plugin make it one of the core additions to my design workflow.

LESS works by compiling your .less files into usable CSS stylesheets. While full documentation can be found on the LESS website, here’s a quick rundown of some of the basic syntax:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 	---Variables---
 * Variables are defined by inserting
 * '@' in front of the defined variable name
 */
 
@favorite-color: #7c180d;
@border-size: 3px;
 
#cool-box {
	border-left: @border-size, solid, @favorite-color;
}
 
/*	---Output---	*/
 
#cool-box {
	border-left: 3px, solid, #7c180d;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* 	---Mixins---
 * Mixins allow you to insert one class into another selector
 * They help keep your code DRY
 */
 
.alert {
	border: 3px dotted #fbc2c4;
	color: #8a1f11;
	background-color: #fbe3e4;
}
 
#important-message {
	.alert;
	font-size: 3em;
	text-decoration: underline;
}
 
/*	---Output---	*/
#important-message {
	border: 3px dotted #fbc2c4;
	color: #8a1f11;
	background-color: #fbe3e4;
	font-size: 3em;
	text-decoration: underline;
}

LESS also has support for nested rules, operations, and a whole bunch of other options, but we’ll just be using the variables and mixins for our cross browser support.

Rounded Corners

rounds street corners as well!

Rounded corners have been one of the most sought-after ‘Web 2.0′ style effects. LESS makes their implementation beyond easy. Plus, if any new browser-specific declarations come out (I’m looking at you IE) then you only need to add them to one rule.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.border_radius(@radius:5px) { /* 5px is the default */
	-khtml-border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
 
/*	---Usage---	*/
 
.roundish-header {
	...
	.border_radius(15px);
	...
}

Works in:

Text & Box Shadow

shady, isn't it?

Text and box shadows are IMHO, two of the most underused CSS3 properties. Not only can you make traditional shadows with them, they can also be used to make inset and glow effects. Just brows around this site to get an idea of the opportunities.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.text_shadow (@x:0, @y:0, @blur:0, @color:transparent) {
	-moz-text-shadow: @x @y @blur @color;
	-webkit-text-shadow: @x @y @blur @color;
	-khtml-text-shadow: @x @y @blur @color;
	-o-text-shadow: @x @y @blur @color;
	text-shadow: @x @y @blur @color;
}
.box_shadow (@x:0, @y:0, @blur:0, @color:transparent) {
	-moz-box-shadow: @x @y @blur @color;
	-webkit-box-shadow: @x @y @blur @color;
	box-shadow: @x @y @blur @color;
}
/*	---Usage---	*/
 
.shady-text {
	...
	.text_shadow(2px, 2px, 5px, #404040);
	.box_shadow(0, 1px, 15px, #3a76d1);
	...
}

Works in:

Gradients

make your very own sunset

This one’s pretty neat! Cross browser native CSS gradients. There are two gotchas though: 1) it doesn’t work in Opera yet and 2) the IE values are rejected by the LESS compiler. The LESS developers are working on sorting out #2 (so I hear).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.vert_gradient(@from:#fff, @to:#000) {
	background-color: @from;
	background-image: -moz-linear-gradient(100% 100% 90deg, @to, @from);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@from), to(@to));
	/* filter: progid:DXImageTransform.Microsoft.gradient(GradeintType=0, startColorstr=@from, endColorstr=@to); */
	/* -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradeintType=0, startColorstr=@from, endColorstr=@to); */
}
/*	---Usage---	*/
 
.sunset {
	...
	.vert_gradient(@from:#ff8901, @to:#b1cbcc)
	...
}

Works in:

Opacity

see? through!

Can you say cross browser? I sure hope so! Because this opacity rule works in everything! Yup!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.opacity(@value:1) {
	@ievalue: @value*100; /* special value for IE*/
	filter: alpha(opacity=@ievalue); 
	-khtml-opacity: @value;
	-moz-opacity: @value;
	opacity: @value;
}
 
/*	---Usage---	*/
 
.see-through {
	...
	.opacity(0.75);
	...
}

Works in:

Phew!

Those are the properties I use, but this is infinitely extendable to other CSS3 properties and their new LESSifications. I’ve included a complete .less file for you to download and use in your projects.

Download Source

If you’ve ever heard an elderly person refer to “The Google” or gotten a blank stare when using the term “Internet Browser,” then you have met a victim of Internet Ignorance. While mocking these uneducated computer users has become 4chan comedy gold, perhaps it is time to take steps to counter this growing phenomenon.

Good grief, Google!

As the Onion so brilliantly spoofed, many internet users (especially those older than the internet) have a poor concept of what Google actually is. This misconception was hilariously illustrated by an article on ReadWriteWeb.com. As you may have heard, the article became the number one hit for the search term facebook login on Google and the comments thread was overwhelmed by users mistaking RWW for the new facebook.

The results were unintentionally hilarious! Comedic mayhem ensued, rivaling the antics of Moe, Larry, and Curly. Confused internet users showcased their ignorance and the more knowledgeable elite came to point and laugh.

But this was our fault.

Ye Olde AOL

Remember way back in the 90′s when the internet was AOL? I can still hear those ear-piercing dial-up screeches whenever I see that Mr.Running Man. Back in those days, AOL was everything: browser, ISP, and search. Users never had to discern any difference.

Things have changed a bit since then. Not only are there more than 150 Pokémon, the internet has exploded in every different direction. We surf the net over high-speed, power-boosted, fiber-optic information mega highways. But has the average internet user stayed above the minimum speed limit?

No Fighting in the War Room

If this recent ReadWriteWeb fiasco is any standard to go by, the average internet user has quite a bit to learn about the differences between search engines and URLs. But how will they learn?

We will teach them.

As a fledgling blogger, just dipping his pinky toe in the blogosphere, I assume a lot by using the collective “we.” But I feel this camaraderie among web designers, programers, hackers, and the like must be used to our advantage. Now is the time to stop making fun of the greater masses and start helping them. For starters, let’s teach the difference between URLs and searches. The difference between the address bar and the google search box. If we can teach the general public to use the internet more effectively, not only are we forwarding our own professional cause, we are fortifying the foundation of the internet itself.

What will you do to fight the ignorance?

You’ve seen the CSS, now we pull back the curtain and take a look at the javascript magic working behind the scenes.

Did you miss Part 1? Go check it out »

Full Disclosure

I began web programming with just HTML and CSS. When I found that these languages were not enough, I discovered jQuery, the javascript language for designers and fell in love! In short, I am not a trained, black-belt, javascript ninja. Alright, enough apologetic babble, go check out the demo. I’ll wait here till you get back.

Pretty cool, huh? Let me walk you though a few of the key pieces.

The Fly In

I’m thinking I might nickname this project “Super Calc!” Here’s how the initial fly-in works.

First, we send the calculator outside the viewport with css:

#calc {
	-webkit-transform: translateY(-1000px);
}

Then, we send it flying back in once the document is ready with jQuery:

$(document).ready(function() {
	$("#calc").css('webkitTransform','translateY(0)');
});

Pretty neat, huh? It’s cooler if you reload the page so the background image isn’t trying to load while the calculator flies in.

For the Hard of Vision

I hinted at this feature yesterday, but now you get to see it come to full realization! Plug in an equation a hit the equal button. The display zooms at you with the result. Two bits of code make this work. First, the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* These two rules style the default display */
#calc #display {
	...
	-webkit-transition-property: background, border, -webkit-transform, scale, color;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease;
}
#calc #display input{
	...
	-webkit-transition-property: background, border, -webkit-transform, scale, color;
	-webkit-transition-duration: 1s;
	-webkit-transition-timing-function: ease;
}
 
/* And these are for the zoomed display */
.largeDisplay {
	-webkit-box-shadow: none !important;
	-webkit-transform: scale(5) !important;
}
.largeDisplay input {
	-webkit-box-shadow: none !important;
	border: 1px solid #fff !important;
	background: rgba(0,0,0,0.75) !important;
	color: #fff !important;
}

The transition settings are defined in the original display rule with -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. It seems a little counter-intuitive at first, but it’s actually really neat! I could, for example, define several styles for the display to “animate to” and I’d only need to define these rules once.

The second bit of code is the jQuery:

1
2
3
4
5
6

$("#equal").click(function(){
	...
	$("#display").addClass('largeDisplay');;
}).mouseout(function(){
	$("#display").removeClass('largeDisplay');
});

When the #equal button is clicked, we dynamically add the class to the #display input. Then, once the user’s mouse leaves the equal button, we send the display back to it’s normal look. Pretty snazzy if I do say so myself.

Postscript

There are a couple more features that I haven’t gone into detail about so be sure to check out the demo to see them all.

I’m pretty pleased with this little project. I hope it can help you in some way. Here are some features that could be added to make this an even more versatile Super Calc:

• Keys that fire with the keyboard
• A resize funciton
• Use the calculator as attached to a “real” input (in a form or something like that)
• Add a cape to make Super Calc truly super!

Happy arithmetic!

A quickie but a goodie today. Here’s a sneak peak at some of the effects that’ll be in the CSS / jQuery Apple-style calculator (now that’s a mouthful, isn’t it?)

No More Squinting

My grandma is always complaining that she can’t see the screen of her digital calculator. Alright, I’m lying, my grandma uses an abacus. Either way, sometimes it’s nice to see the display with more clarity. That’s exactly what this next bit of javascript does:

	onmouseover="display.style.webkitTransform='scale(4) translateY(10px)'"
	onmouseout="display.style.webkitTransform='scale(1)'"

Here to save the day

Calculators are sort of like heros…sort of. So I thought it’d be fun if the calculator “flies in” for you to meet it (the demo for this still needs some work, but you get the idea:

	onmouseover="calc.style.webkitTransform='translateY(-1000px)'"
	onmouseout="calc.style.webkitTransform='translateY(0)'"

A Fancy Clear

Normally when you clear your calculator, the numbers just disappear. That’s no fun! What if the whole display flipped around to give you a brand new clean slate:

	onmouseover="display.style.webkitTransform='rotateY(180deg)'"
	onmouseout="display.style.webkitTransform='rotateY(0deg)'"

That’s it! Check out the demo to see these nifty effects in action! And stay tuned for the completed, fully functional, javascript powered calculator!

While many attempt to flaunt their psychic abilities, few can accurately predict what is happening inside the balding cranium of Steve Jobs. His affinity for brushed metal and slightly rounded corners has truly developed a cult of a following and has seeped into the core of our societal design aesthetic. While imitating apple’s design principals is nothing new, there is still room for simple apple design imitation on the web. In this two-part post, I’ll take a look at how to re-create the default apple calculator program with only CSS and jQuery.

A Heads Up

This technique takes advantage of several safari specific CSS rules to maintain “the apple effect.” If you’d like to see the full results, be sure to get the latest version and check out the demo.

Start at the Very Beginning – HTML

The calculator will be primarily built out of an input field (for the display) and styled buttons (for the buttons, of course). Here, let me show you and then I’ll do some ‘splanin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div class="wrap"> <!-- to center calculator in window -->
	<div id="calc">
		<div id="innercalc">
			<div class="row" id="display">
				<input type="text" />
			</div>
			<div class="row">	
				<input type="button" value="C" />
				<input type="button" value="&plusmn;" />
				<input type="button" value="&divide;" />
				<input type="button" value="&times;" />
			</div>
			<div class="row">	
				<input type="button" value="7" />
				<input type="button" value="8" />
				<input type="button" value="9" />
				<input type="button" value="&minus;" />
			</div>
			<div class="row">	
				<input type="button" value="4" />
				<input type="button" value="5" />
				<input type="button" value="6" />
				<input type="button" value="&#43;" />
			</div>	
			<div class="row">
				<input type="button" value="1" />
				<input type="button" value="2" />
				<input type="button" value="3" />
				<input type="button" id="equal" value="&#61;" />
			</div>
			<div class="row">	
				<input type="button" id="zero" value="0" />
				<input type="button" value="." />
			</div>
		</div> <!-- end of innercalc -->
	</div> <!-- end of calc -->
</div> <!-- end of wrap...mmmm, I'd like a wrap right now -->

Some things to notice:

• Divs are used to wrap rows - I could have used a table for this whole thing, but this ended up being much easier.
• HTML character codes - Some of the buttons required special characters. (see Wikipedia for more info
• Other wrapping divs - There were still some “hackey” things that I needed to do to get everything looking just right. More on these later.

Let’s fire up Safari and take a look.

Not very pretty yet. But it does already have that “calculator” feel to it. Before we move on to the meat of this tutorial, I’d like to make a brief sidebar about input formatting. If you’ve spent anytime working with CSS, you know of the intentional inconsistencies across browsers in the rendering of input elements. Apple’s Safari is no different. As you can see, both the text input and the buttons retain a distinguished “aqua” look. Luckily, the gurus over at the WebKit open-source project have added a little magic gem:

-khtml-appearance: none;

This little baby resets all the input elements to their bare bones (at least in WebKit based browsers). It’s quite the godsend in tricky css situations.

When you design you begin with C-S-S

The Chrome

We’ve got to give a body to the calculator before we can do anything else, so I’ll start with that. First we’ll lay down the easy stuff, padding, width, background, border etc:

1
2
3
4
5
6
7
8
9
10
11
12
13

#calc {
	float: left;
	width: 216px;
	color: #000;
	border-top: 1px solid #cbcbcb;
	border-right: 1px solid #9b9b9b;
	border-left: 1px solid #9b9b9b;
	background: #a7a7a7;
}
#calc #innercalc {
	border-top: 1px solid #dfdfdf;
	padding: 10px;
}

And this leaves us with something that looks like it came out of MS-DOS. You’ll notice, however, that we’re using the #innercalc div to add that subtle white highlight on the top. Now that we’ve gotten the basics, let’s add some webkit to this baby. We add the following rules:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#calc {
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 10px 70px rgba(0,0,0,0.60);
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.0, #cfcfcf),
		color-stop(0.15, #a7a7a7),
		color-stop(0.85, #a7a7a7),
		color-stop(1.0, #909090));
}
#calc #innercalc {
	-webkit-border-radius: 5px;
}

First we round the corners with the -webkit-border-radius. Note that we also have to round the corners of the innter div as well. Next we add a nice hefty drop-shadow to the calculator (it’ll look better later). By defining the shadow color using the rgba() color-code, we can define transparency for when we add a nice background.

Lastly comes the gradient background. This one’s a little hefty so bear with me. First, we’re creating a background-image so we start with that. Then comes the propriatry -webkit-gradient syntax. We want a linear gradient starting at the left, top and ending at the left, bottom. Then, each color-stop defines where one color blends to another. It took some fudging around to get it just right, but it looks pretty believable.

The Buttons

The buttons are more of the same, so I’ll just cut to the chase and give you the basic CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#calc input[type="button"] {
	width: 46px;
	padding: 5px 0;
	margin: 3px 0;
	font-size: 13px;
	border: 1px solid #7b7b7b;		
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 1px 1px #cacaca;
	-webkit-text-shadow: 0 1px 1px #fff;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0.0, #efefef),
		color-stop(0.1, #d5d5d5),
		color-stop(0.9, #d5d5d5),
		color-stop(1.0, #9d9d9d));	
}

Some new things to notice:

• Font size is defined - Strangely enough, font-sizes are not inherited in input elements. I imagine this is a “feature” rather than a “bug.”
• Subtle shadows - We add both a -webkit-box-shadow and a -webkit-text-shadow to the buttons. Both are very subtle, and more noticeable when they’re gone.

The Display

The display was the hardest to get right. I’m still not 100% pleased with it, but it looks pretty good:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#calc #display {
	margin-bottom: 10px;
	width: 198px;
	font-size: 13px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 -2px 1px rgba(0,0,0,0.5);
}
 
#calc #display input{
	width: 166px;
	border: 0;
	background: #f1faca;
	border: 1px solid #c4cba4;
	outline: 0;
	text-align: right;
	padding: 3px 30px 3px 0;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 2px 2px rgba(255,255,255,0.75);
}

The most important thing to notice about the display is the double-shadow. Since Safari does not support multiple -webkit-box-shadows yet, we need an extra wrapping div to make the magic happen.

And that’s it! Check out the demo to see it in action, along with a few extra goodies (active states and a snazzy background).

Check back in a few days to see the addition of jQuery to the Apple CSS Calculator!

Update (3-15-10): Part 2 is finished and ready to go »

The first copies of Photoshop were distributed way back in 1987. Not only could this twenty-three year old program see ‘R’ rated movies before I could, it even has its own verb. Many have mastered this juggernaut of a program, a few still have more to learn, and even more are just testing the waters.

But we’re not going to talk about photoshop right now…

Crawl Before You Draw

Alright, cheap trick. I know. But they do it on Law and Order all the time. What I’m trying to point out is the importance of hand drawing to any designer’s repertoire. Photoshop skills are great, but learning to hand-draw can vastly expand your horizons. Here are some things to keep in mind on your pencil-and-paper quest.

Isn't sleeping dog a yoga position?

1. Drawing is a Skill

Since I have ESP, I can hear you thinking, “But I don’t know how to draw.” Of course you don’t! Neither do I. I’m getting better, but there are tons of people who can draw better than I can. That’s okay! Drawing is a skill (like tying your shoe) that must be learned and improved. Go out and take a class (that’s what I did). Find somebody you can learn from. Remember that you can improve. With training and practice, you’ll see your skills develop over time. Which leads me to…

2. Practice, Practice, Practice

The only way you can can learn to draw is, well, just to draw. You can’t learn to draw by thinking about drawing or by buying sketch paper. All you need to do is draw. One study says it takes about 10,000 hours to gain mastery of a skill. That’s five years of constant drawing! Now, it may not be your goal to become a master of drawing, but “getting your hours in” can do nothing but good. A favorite pastime of mine is doodling during my American Literature class. That’s three hours every week! (Unless there’s a test that day…)

Now this is a yoga position!

3. Start Small

If your only experience with “actual” drawing ended with Crayola crayons in Kindergarden, then don’t worry about being to ambitious right from the start. Find a simple, black and white photo and do your best to copy it. Draw your hand. Set up a kleenex box under a desk light and sketch it. If you stumble over your first few tries, that’s okay! Just keep going. Once you’ve got that perfect sketch of your desktop stapler where the lighting is just right, frame it and hang it on your wall. You’ve just made art!

4. Take Your Time

Both the winter and summer Olympics have yet to pick up hand drawing as an official sport. With a pencil in your hand, speed is never a priority. Most of the sketches I’m proud of took at least an hour to complete. Many took even longer. You’ll get faster as you progress, but don’t worry about that! Set yourself down in a nice, supportive chair, turn of the TV, throw the cat in the closet and spend some quality time with your sketchbook.

Smile! Even if you don't look quite right

5. Have Fun

Roll your eyes if you must, but remembering to have fun can actually help improve your drawings. If you are having fun while you draw, your mind is more relaxed and you are less concerned with “messing up.” This enjoyment helps shut off the logical side of your brain letting the more creative side take control. Plus, having fun is usually a good thing anyway!

Snazzy, shiny effects are all the rage in this current Web 2.0 design frenzy. So are are super-cool graphics, especially in the header of your page. In this article, I’ll show you a crafty parallax scrolling technique you can use for pleasure and profit! Check out the tutorial or skip straight to the demo.

Paralla-wha?

Not to be confused with high-school geometry, parallax is a visual concept oft’ used in old-timey video games. Picture a mustachioed plumber defeating strange shell creatures. As the stumpy plumber scrolls jollily right, the floor scrolls at the same speed as him. However, the happy clouds in the background scroll slower than our hero. This creates the amazing appearance that the clouds (or sun or stars or evil castle walls) are further away than the hero. This effect can be modified by altering the speed of the numerous elements.

A slower background seems further away.

Prepping the Images

Taking a step away from our plumber friend, our header will scroll up (or down if you like thinking backwards). The first step in creating the header is preparing the artwork. We’ll make a three layer scroller and add a fourth layer for the character.

When designing your layers, it is important to consider both their layering and transparency. Where do you want parts to shine through? Where are things obscured. I’ll leave this part up to you. Here’s a quick-and-dirty sample I’ve prepared earlier

Layers are numbered from top to bottom. Transparency is not visible, but you get the idea.

A Note on Image Size

Images should be in PNG-24 format to accommodate varying opacities (sorry IE). Also important are the heights of the images. Static elements (like the title) can be whatever hight they need to be. Everything else has a hight relative to how fast you want it to move. The faster it moves, the taller it should be.

Putting it Together – the HTML

The structure of the page is quite simple. We need four elements to enclose our four images. These four will be wrapped in each other.

<div id="header">
     <h1  class="snazzyheader">Falling Man Productions</h1>
</div>

Easy huh? That’s because we’re gonna be doing most of the heavy lifting with jQuery. How’s about them apples? Let’s look at the CSS before we get to the lifting.

Putting it Together – the CSS

#header {
	width: 610px;
	height: 200px;
	position: relative;
}
h1.snazzyheader {
	width: 610px;
	height: 200px;
	background: transparent url("layer-2.png") no-repeat 0 0;
	text-indent: -9999em;
	z-index: 3;
	position: relative;
}
#header .layer-4, #header .layer-3, #header .layer-1 {
	display: block;
	width: 610px;
	height: 200px;
	position: absolute;
	top: 0;
}
#header .layer-4 {
	z-index: 1;
	background: transparent url("layer-4.png") repeat-y 0 0;
}
#header .layer-3 {
	z-index: 2;
	background: transparent url("layer-3.png") repeat-y 0 0;
}
#header .layer-1 {
	z-index: 4;
	background: transparent url("layer-1.png") repeat-y 0 0;
}

Ok, some explaining. First #header houses all our elements so it needs some basic styling. Width, height, and relative positioning all help us later on.

The h1 element gets the same width and height as the finished header. A super high, super negative text-indent keeps the header text invisible to the end user while still letting google-bot and it’s ilk find the site. Most important are the z-index and relative positioning. The z-index puts the layer in the stack (higher numbers are “closer” to you) and the positioning lets the layer play in the same world as absolutely positioned elements.

Then a catch-all declaration for our other three layers. Again, the same width and height. These layers, however, have absolute positioning to keep them over each other. Because they are contained in the relatively positioned #header, they cannot escape. top: 0 makes sure these elements stay glued to the top of the #header element.

Lastly, the three layer elements get their individual z-indexes and background images.

Phew!

Putting it Together – the jQuery

Now for the fun part! The jQuery! You’ll need the latest jQuery build and the wonderful Background Position Animation Plugin. Got ‘em? Good. Now first we have to get these layers into our document. We do this with jQuery’s append function.

$("#header").append('<span class="layer-1"></span><span class="layer-3"></span><span class="layer-4"></span>')
	.children("span")
	.hide().animate({opacity: "1"}, 2000).fadeIn(500);

After appending the three spans we immediately hide them and use a makeshift timer (animate({opacity: "1"}, 2000)) to give time for the background images to load. After this time has past, we fadeIn the images. Now it’s time to start the scrolling. Because we want the scrolling to be continuous, we’ll build the functions as loops outside of the $(document).ready function and include them later. The basic function looks like this:

function layer1() {
	$('.layer-1').animate({backgroundPosition:"(0 -482px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer1()",12000);
}

We animate the backgroundPosition to a negative value equal to the height of the image. Then, we animate it back to “0 0″ in no time at all (to seamlessly reset the animation). The setTimeout function gets the same timing as the original animation and fires this same function again creating a loop. Three of these functions are made, one for each of the animating layers. The final javascript looks like this:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
<script type="text/javascript">
function layer1() {
	$('.layer-1').animate({backgroundPosition:"(0 -482px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer1()",12000);
}
 
function layer3() {
	$('.layer-3').animate({backgroundPosition:"(0 -780px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer3()",12000);
}
 
function layer4() {
	$('.layer-4').animate({backgroundPosition:"(0 -1000px)"}, 12000, "linear")
		     .animate({backgroundPosition:"(0 0)"}, 0, "linear");
	setTimeout("layer4()",12000);
}
 
 $(document).ready(function() {
 	$("#header").append('<span class="layer-1"></span><span class="layer-3"></span><span class="layer-4"></span>')
		     .children("span")
		     .hide().animate({opacity: "1"}, 2000).fadeIn(500);
 
	//Firefox Needs us to set the backgroundPosition manually for the animation to work
	$('.layer-1').css("backgroundPosition","0 0");
 	$('.layer-3').css("backgroundPosition","0 0");
 	$('.layer-4').css("backgroundPosition","0 0");	
 
	layer1();
	layer3();
	layer4();
 
 });
</script>

Note that we have to set the backgroundPosition to “0 0″ manually for Firefox to play nice.

Falling is Easy

And that’s all she wrote! Check out the demo to see the effect in action. And be sure to stay tuned for more exciting tutorials.

It seems sort of self-serving to post about one’s own blog on that blog, but here goes! Welcome, salutations and other good wishes! Perquisite Design is up and running. You have found yourself on the blog section of my site. Here will be posted web-design tutorials and other ramblings about other fancy topics.

I've got my eye on you

Tell me what you think!

I’m just a lowly website developer (with a bad sense of spelling). Let me know what you think! Is everything working right? Something you think looks cool? Something spelled wrong? Have at it!