First Post

Well for the first post, it’s probably fitting that I post the code that does the neat little header effect. Here ya go:
javascripthover edges to scroll
 
			window.onload = function(){
				var intro = new Fx.Styles('headerImg', {
					duration: 450, 
					transition: Fx.Transitions.linear,
					onStart: function(){ 
							$('headerImg').setOpacity(0); 
							$('headerImg').setStyle('display','inline'); 
					}, 
					onComplete: function(){
							secondIntro = new Fx.Styles('headerImg', {
									duration: 950, wait: 200, 
									transition: Fx.Transitions.linear
									});
							secondIntro.start({
									'margin-left': [0, 550]
								});
					} 
				});
				intro.start({
					'opacity': [0, 1],
					'width': [1,200]
				});		
			};
….and then I added opacity effects for the menu and the logo:
javascripthover edges to scroll
 
$$('#listPages li a').each(function(el){
				$(el).addEvent('mouseover',function(){
				$(el).style.cursor = 'pointer';
						fx = new Fx.Styles(el, {
									duration: 500, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({
									'background-color': '#FFFFFF'
								});
				});
				$(el).addEvent('mouseout',function(){
						fx = new Fx.Styles(el, {
									duration: 250, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({
									'background-color': '#E9E9E9'
								});
				});
				$(el).addEvent('click',function(){
						$(el).blur();
				});				
						
		});
		
		$('headerImg').addEvent('mouseover',function(){
			fx = new Fx.Styles('headerImg', {
									duration: 450, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({
									'opacity': [1,.2]
								});
			});
		$('headerImg').addEvent('mouseout',function(){
				fx = new Fx.Styles('headerImg', {
									duration: 450, wait: false,
									transition: Fx.Transitions.linear
									});
							fx.start({
									'opacity': [.2,1]
								});
			});
 
Pretty Simple eh?

RSS feed | Trackback URI

Comments »

No comments yet.

Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

Trackback responses to this post

21 queries in 0.250 seconds | Code is Poetry | sLajax.com