mootools

References to Documentation

1. Native/Element.js#$
2. Native/Array.js#Array.each
3. Native/Element.js#Element.setStyle
4. Element/Element-Event.js#Event
5. Native/Element.js#Element.setHTML
6. Native/Function.js#Function.delay

var up = $('up'), down = $('down'), log;
 
[up, down].each(function(arrow) {
	arrow.setStyle('opacity', .1);
});
 
document.addEvent('mousewheel', function(event) {
	event = new Event(event);
 
	/* Mousewheel UP */
	if (event.wheel > 0) {
		up.setStyle('opacity', 1);
		down.setStyle('opacity', .1);
		log = 'up';
	} 
	/* Mousewheel DOWN*/
	else if (event.wheel < 0) {
		up.setStyle('opacity', .1);
		down.setStyle('opacity', 1);
		log = 'down';
	}
 
	$('log').setHTML(log);
 
	var cls = function() {
		[up, down].each(function(arrow) {
			arrow.setStyle('opacity', .1);
		});
	}.delay(100);
});

<h3>
	MouseWheel Event
</h3>
<div><strong>Mousewheel Direction:</strong> <span id="log">none</span></div>
<div id="wheel">
	<div id="up"><img width="41" height="43" alt="UP" src="/demos/Mousewheel/up.gif"/></div>
	<div id="down"><img width="41" height="43" alt="DOWN" src="/demos/Mousewheel/down.gif"/></div>
</div>

#wheel {
	margin: 1em;
}