Here is a preview of what we will be building. http://www.merrickchristensen.com/labs/Scroller

This tutorial will show you how to quickly build a scroller using MooTools. A cool effect that isn’t drastically overused, and isn’t difficult to understand. First off lets look at the html:

Throw this in the header to style our scroller as well as equip the necessary scripts to build our html scroller.

Now for the structure of the scroller we use one div called viewport to basically contain all of it. This will be the div with the scroller even though we hide it it with our css soon. Then we use a div with a large width called belt to scroll in our viewport, this will contain all of our panel divs. As for our panel divs they are each 600px wide and floating to the left to create a long scroll across the belt full of panels. Make sure your belts width will accommodate all your panels width’s added up.

We then add the control links to the side of the viewport. These will be given event listeners to scroll our scroller to certain panels. Last but not least we clear the floats to allow our background to show through.

				1
			

				2
			

				3
			

				4
			










	

Now here is the css. Pretty self explanatory just styling it accordingly I believe I covered most of these details in the above paragraph.

body{
	background-color:#e1e1e1;
	margin:0px;
}

#container{
	width:768px;
	margin:200px auto;
	background-color:#fff;
}

#viewport{
	position:relative;
	width:600px;
	height:150px;
	overflow:hidden;
	float:left;
}

#belt{
	position:absolute;
	width:2800px;
}

#nav{
	width:168px;
	float:left;
}

#nav ul li{
	list-style-type:none;
	padding-top:5px;
	border-bottom:1px #e1e1e1 solid;
}

#nav ul{
	padding:0px;
	margin:0px;
	padding-left:25px;
}

#nav ul li a{
	color:#e1e1e1;
	font:25px Helvetica;
	text-decoration:none;
}

#nav ul li a:hover{
	color:#999;
}

.panel{
	width:600px;
	height:150px;
	text-align:center;
	background-color:#C5E3EE;
	color:#fff;
	float:left;
	font:132px Helvetica;
}

Now for the javascript. A little Mootools Magic; simple yet effective class based javascript. First we create an instance of the Fx.scroll class to allow our views scroll bars to be controlled using Mootools we then set a transitions and a duration for the animation. We then add events to all of our controls to animate our scroller to specific panel elements. Here is how that codes looks.

window.addEvent('domready', function(){
	var scroller = new Fx.Scroll('viewport',{
		transition: Fx.Transitions.Quint.easeInOut,
		duration: 2000
	});

	$('link_1').addEvent('click', function(){
		scroller.toElement('1');
	});

	$('link_2').addEvent('click', function(){
		scroller.toElement('2');
	});

	$('link_3').addEvent('click', function(){
		scroller.toElement('3');
	});

	$('link_4').addEvent('click', function(){
		scroller.toElement('4');
	});
});

That’s it you can see a working example at http://www.merrickchristensen.com/labs/Scroller. Any questions just drop a comment and I’ll answer it as soon as possible. Thanks for your time. Hopefully this is something you can implement in your project.

Going along with my new black minimalism fad. The cards secret method to infiltrate the brain is simple. Make them take a good hard look and they’ll never forget. Least thats the goal. Took a risk here and so far it seams to have been a good one. Here are the designs and a image.

I just launched Clayton Hansen’s Photography website and I must say I love its clean style. Very minimal. Very me. This features a javascript slide show and “quotator” as well as a fully flash image gallery. I love the colors too, very untradition for most Utah freelance web designers. You can visit it here.

I’ve added an interesting new section to my site giving people the chance to publicly confess or say any thing they want without any ties. Go ahead try it for yourself Here.

I have officially rebranded my site. Portfolio is still in progress.

Moving is never fun…However it does bring up some old missing items that you could have sworn someone stole or maybe your just sick of hanging onto old things thats what happened with these cd cases someone robbed all the discs leaving me with cases and cases and cases. However this sorta reminded me of some old music I’ve forgotten so I’ve decided to share my top 5 favorite bands that I would highly recommend you discover.

• Brand New
• Circa Survive
• The Good Life
• mewithoutYou
• Manchester Orchestra

What do you listen to?

So I went blond with my hair today first time I’ve ever done anything to it. Alot of people are asking for my face who I am etc etc. keep in mind I’m no David Archuletta ; ). Anyways on a side note I am going to have the opportunity to attend FITC. I will keep everyone updated on how sweet it is as I will have nothing better to do in Chicago! 

My music was submitted to 97.1ZHT a huge radio station in my local area. So please go listen to my song over at http://www.971zht.com/cc-common/artist_submission/player.html?art=162074 and request it. Thanks! I love you all!

I am so excited to let the world know my album is now on iTunes. Not just that but on David Archuleta’s Page! God bless all of you that waited. The album features Angels in the Alleyway and The Most Beautiful Part About This Is… Check the images! Here is the link.

You can now purchase these songs from amazon! Please support! Buy them here.
http://www.amazon.com/gp/product/B0019D3C9S/ref=sr_f2_artist_5?ie=UTF8&parent=B0019D4G4I&qid=1210711065&sr=102-5
Thanks and God bless you.