Scrolling Background Effect From YouLove.us

Would you like to have something special on your webpage? YouLove.us explains how you can create nice eye catching scrolling background effect based on very tall gradient background picture scrolling behind transparent images.

Nothing is easier than create header with your logo, some text or images. All these stuffs must be on transparent background. Whole effect happens in JavaScript. Using jQuery library, Alexander Farkas backgroundposition.js and CSS style sheet helps the background move nicely. The final result looks really great.

Nice feature of this script is that you can set different background positions in different time. It means when you visit the website at night, you will see the part of background picture set to start displaying at night, e.g. night sky.

The code below makes the whole thing work. The comments should explain what each section does.

$(function() {
 
	// ***
	// Scrolling background
	// ***
 
	// height of background image in pixels
	var backgroundheight = 4000;
 
	// get the current minute/hour of the day
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();
 
	// work out how far through the day we are as a percentage - e.g. 6pm = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = Math.round(hourpercent + minutepercent);
 
	// calculate which pixel row to start graphic from based
	// on how far through the day we are
	var offset = backgroundheight / 100 * percentofday;
 
	// graphic starts at approx 6am, so adjust offset by 1/4
	var offset = offset - (backgroundheight / 4);
 
	function scrollbackground() {
		// decrease the offset by 1, or if its less than 1 increase it by
		// the background height minus 1
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// apply the background position
   		$('body').css("background-position", "50% " + offset + "px");
   		// call self to continue animation
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
 
	// Start the animation
	scrollbackground();
}

Author: Chris Wheeler

Comments are closed.