Tag Archives: development

css

Multiple backgrounds with CSS3

Here’s a quick little tip I picked up this morning. With CSS3 you can now have multiple background attributes assigned to the same element, meaning you no longer need to overlay multiple div’s!

How do you do it?

Simple. CSS3 takes comma separated values for each background attribute part. For example;

.MultipleBackgroundDiv {
background-image:url(‘img/topBackground.png’),url(‘img/bottomBackground.png’);
background-repeat:no-repeat, no-repeat;
background-position: top left, bottom right;
}

The above code will load two backgrounds into the ‘MultipleBackgroundDiv’, repeating neither of them. The first background image (‘topBackground’) will be positioned at the top left, whilst the second image (‘bottomBackground’) will be positioned in the bottom right.

HTML5

Creating a vertical scrolling parallax website

Providing the right text for website pages is often a sticking point for both freelance clients and marketing divisions with organisations. A recent trend in website development, known as ‘vertical scrolling’ or ‘parallax’ websites, is attempting to solve this issue by reducing the amount of required text.

What are ‘vertical scrolling’ and ‘parallax’ websites?

A vertical scrolling website is generally a single page responsive website, separated vertically into  blocks, each of which is self-contained and presents a key message.

Parallax websites are similar to vertical scrolling websites. In addition, they manipulate the scroll speed of each element (such as slowing the background vertical scroll speed down) to give the impression of layers as the foreground items move quicker than the background items.

How to create one of these websites

Creating one of these websites can be advantageous when you have a concise amount of text but want to say it in a big way. It’s generally quite simple to create a vertical scrolling animation, you just need a couple of lines of jQuery. Here’s what I used:

$('.href_class').click(function(){
$('html, body').animate({
scrollTop: $(".scrollTo_Class").offset().top
}, 1000, 'swing');
});

Applying the class ‘href_class’ to a link will now make it scroll to the first element which has the class ‘scrollTo_Class’, taking 1000 miliseconds.

To create a parallax effect, you alter (take a percentage of) the ‘top’ CSS attribute in real-time as the window scrolls. First bind the function ‘parallaxScroll’ to the scroll action of the window.

$(window).bind('scroll',function(e){
parallaxScroll();
});

Next, we define the function and apply a multiplyer to the element that we want to speed up / slow down (usually the background). Note: If you’re having problems with this code you may have to apply the ‘fixed’ value to the ‘position’ attribute in the CSS of the element you’re trying to control.

function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('.background').css('top',(0-(scrolled*0.4))+'px');
}

What’s the resulting website look like?

freelanceThe end result is usually ‘web 2.0′ style, although I’ve seen examples which aren’t. Developing websites this way almost guarantees it’ll be responsive (If you’ve got responsive in mind during development) and because all the content is on a single page it only needs Google to crawl one time (per iteration).

I had a go recently, with a context in mind, and came up with this. Check it out and let me know what you think in the comments below.