1.11M Members

HTML5 CSS Animated Scrolling Menu

 
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>
 
0
 

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

 
0
 

Hey that looks great..

 
0
 

Thanks all

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

You
This is an OP Kudos discussion and contributors may be rewarded
Post:
Start New Discussion
View similar articles that have also been tagged: