1,105,340 Community Members

HTML5 CSS Animated Scrolling Menu

Member Avatar
Reputation Points: 68 [?]
Q&As Helped to Solve: 62 [?]
Skill Endorsements: 0 [?]
 
0
 

This is my first step towards HTML5. This is currently tested on Chrome browser where it is awesome. It will not work on FF and definitely not on IE. I am working on it.

Just copy-paste the code in blank html file and run on chrome.

'Scroller' is simple menu which can be operated using mouse wheel. It gives amazing scrolling animation effect(Thanks to HTML5 CSS).
The code is pretty straight forward. I have used 'onmousewheel' event to handle the change.
Used HTML5 css to give animation.

Hope you all like it!!.

Any sort of suggestion is most welcome.
You can write me also at: vivek_kumar_bt@yahoo.co.in

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Scroller Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	#message {
		position: absolute;
		top: 120px;
		left: 700px;
		width: 450px;
		height: 50px;
		font-size: 50px;
	}
	#scroller {
		position: absolute;
		top: 100px;
		left: 300px;
		width: 100px;
		height: 50px;
	}
	
	#scroller1 {
		position: absolute;
		top: 100px;
		left: 420px;
		width: 100px;
		height: 50px;
	}
	
	#scroller2 {
		position: absolute;
		top: 100px;
		left: 540px;
		width: 100px;
		height: 50px;
	}
	
	.scroller_container {
		position: absolute;
		width: 100%;
		height: 100%;
		border: 10px solid #444;
		border-radius: 10px;
		background-color: black;
	}
	
	.scroller_gradiant {
		position: absolute;
		width: 100%;
		height: 100%;	
		left: 0%;
		overflow: hidden;
		
		background: -webkit-gradient(linear, left top, left bottom,
                from(#111), to(#111),
				color-stop(0.45, #ccc), color-stop(0.55, #ccc))!important;
	}
	
	.scroller_scroller {
		position: absolute;
		width: 100%;
		height: auto;	
		
		-webkit-transition: top 0.5s;
		-webkit-animation-name: maximise;
		-webkit-animation-duration: 0.5s;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-direction: alternate;		
	}
	
	.scroller_item {
		width: 100%;	
		font-size: 250%;
		text-shadow: rgba(0, 0, 0, 0.5) 0 2px 2px;
		text-align: center;
	}
</style>

 <SCRIPT LANGUAGE="JavaScript">

var Scroller = function(id, conf) {
	if(!id) return null;
	
	this.parent = document.getElementById(id);
	if(!this.parent) return;	
	
	this.conf = conf;
	this.items = [];
	if(this.conf.range) {
		var min = this.conf.range[0];
		var max = this.conf.range[1];		
		if(max < min) return;		
		for(var i = min; i <= max; i++) this.items.push(i);
	} else if(this.conf.items) {
		this.items = this.conf.items.slice(0);
	} else {
		return;
	}
	
	this.onSelect = this.conf.onSelect;
	this.callBackArgs = this.conf.callBackArgs;
	
	this.total = this.items.length;
	this.mouseOver = false;
	this.currentTop = 0;
	
	var dim = getDimesions(this.parent, true);
	this.scrollBy = dim.height;
	
	this.initialise();
}

Scroller.prototype.initialise = function() {
	var i;
	this.itemsEl = [];	
	var that = this;
	this.container = build(this.parent, 'scroller_container');	
	this.gradiant = build(this.container, 'scroller_gradiant');
	this.scroller = build(this.gradiant, 'scroller_scroller');	
	for(i = 0; i < this.total; i++) {
		this.itemsEl[i] = build(this.scroller, 'scroller_item');
		this.itemsEl[i].style.height = this.scrollBy + "px";
		this.itemsEl[i].innerText = this.items[i];
	}
	this.container.onmousewheel = function(e) {
		that.startScroll(e);
	};
	this.container.onmouseover = function(e) {		
		that.mouseOver = true;
	};
	this.container.onmouseout = function(e) {
		that.mouseOver = false;
	};
	
	function build(parent, css, type) {
		if(!parent) return;
		var el = document.createElement((type ? type : "div"));
		if(css) el.className = css;
		parent.appendChild(el);
		
		return el;
	}
};

Scroller.prototype.startScroll = function(e) {
	if(!this.mouseOver) return;
	var delta = 0;
	if (!event) /* For IE. */
		event = window.event;
	if (event.wheelDelta) { /* IE/Opera. */
		delta = event.wheelDelta/120;
		/** In Opera 9, delta differs in sign as compared to IE.
		 */
		if (window.opera)
			delta = -delta;
	} else if (event.detail) { /** Mozilla case. */
		/** In Mozilla, sign of delta is different than in IE.
		 * Also, delta is multiple of 3.
		 */
		delta = -event.detail/3;
	}
	/** If delta is nonzero, handle it.
	 * Basically, delta is now positive if wheel was scrolled up,
	 * and negative, if wheel was scrolled down.
	 */
	if (delta) {
		if(this.handle(delta) != 0) {
			if(this.onSelect) this.onSelect(this.getValue(), this.currentTop, this.callBackArgs);
		}
	}
	/** Prevent default actions caused by mouse wheel.
	 * That might be ugly, but we handle scrolls somehow
	 * anyway, so don't bother here..
	 */
	if (event.preventDefault)
		event.preventDefault();
	event.returnValue = false;
}

Scroller.prototype.handle = function(delta) {
	if (delta < 0) {
		if(( this.currentTop - this.scrollBy ) < (this.scrollBy * (this.total-1))) {
			return this.scrollUp(1);
		}		
	} else {
		if (( this.currentTop - this.scrollBy ) < (this.scrollBy * (this.total-1))) {
			return this.scrollDown(1);
		}	
	}		
}

Scroller.prototype.scrollUp = function(steps) {
	var newTop = this.currentTop + 1;
	if(!(newTop > this.total - 1)) {
		this.currentTop = newTop;
		this.scroller.style.top = 0 - (this.currentTop*this.scrollBy) + "px";
		return steps;
	}
};

Scroller.prototype.scrollDown = function(steps) {
	var newTop = this.currentTop - 1;
	if(!(newTop < 0)) {
		this.currentTop = newTop;
		this.scroller.style.top = 0 - (this.currentTop*this.scrollBy) + "px";
		return steps;
	}
};

Scroller.prototype.getValue = function() {
	return this.items[this.currentTop];	
};


var message;
function init() {
	message = document.getElementById("message");
	var days = {'range': [1,31], 'onSelect': showDate};
	var months = {'items': ['Jan', 'Feb', 'Mar',
							'Apr', 'May', 'Jun',
							'Jul', 'Aug', 'Sep',
							'Oct', 'Nov', 'Dec',
							], 'onSelect': showDate};
	var years = {'range': [1980, 2050], 'onSelect': showDate};
	
	var scroller = new Scroller('scroller', days);
	var scroller1 = new Scroller('scroller1', months);
	var scroller2 = new Scroller('scroller2', years);
	
	function showDate() {
		var day = scroller.getValue();
		var month = scroller1.getValue();
		var year = scroller2.getValue();
		write("Date : " + month + " " + day + ", " + year);
	}
}

function write(s) {
	message.innerHTML = s;
}

function getDimesions(el,rInt) {
	if(!el ) return;
	var top = el.offsetTop;
	var left = el.offsetLeft;
	var height = el.offsetHeight;
	var width = el.offsetWidth;
	
	if(rInt) {
		return { 
			'top': parseInt(top),
			'left': parseInt(left),
			'width': parseInt(width),
			'height': parseInt(height)
		};
	}
	
	return { 
		'top': top,
		'left': left,
		'width': width,
		'height': height
	};
}
</script>	
</head>
<body onload="init();">
	<div id="scroller"></div>
	<div id="scroller1"></div>
	<div id="scroller2"></div>
	<div id="message"></div>
</body>
</html>
Member Avatar
matricol
Junior Poster in Training
98 posts since Jun 2011
Reputation Points: -8 [?]
Q&As Helped to Solve: 9 [?]
Skill Endorsements: 0 [?]
 
0
 

nice one .. oh and now it also works in ff5 :)

Member Avatar
Luckychap
Posting Pro in Training
451 posts since Aug 2006
Reputation Points: 68 [?]
Q&As Helped to Solve: 62 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks!!

While searching for css3 gradient, I got this pretty cool web tool:

http://www.colorzilla.com/gradient-editor/

Member Avatar
@developer
Junior Poster in Training
70 posts since Nov 2010
Reputation Points: 3 [?]
Q&As Helped to Solve: 10 [?]
Skill Endorsements: 0 [?]
 
0
 

Hey that looks great..

Member Avatar
Luckychap
Posting Pro in Training
451 posts since Aug 2006
Reputation Points: 68 [?]
Q&As Helped to Solve: 62 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks all

You
Post:
Start New Discussion
View similar articles that have also been tagged: