Coded & Reloaded: iTunes Cover Scroller

Howdy Folks!

We decided to be a bit more bold with today’s freebie… so, we found a past PSD of ours: iTunes inspired cover scroller PSD, and we brought it to life. Below, you can find all of the steps that we took to make it work.

[button link=”http://localhost:8888/allur.co/itunes-coded-reloaded/”]Demo[/button] [button link=”http://localhost:8888/allur.co/downloads/bundles/scroller-bundle.zip”]Download[/button]

[divider]

1. HTML 5

Firstly, we will start with a basic bit of HTML 5 code:

[cc lang=”html”]

[/cc]
[divider]

2. HTML layout:

The intent here is to create a finite scroller… so for that, we come up with this layout:

The scroller content:
[cc lang=”html”]

AC Brotherhood

Alan Wake

Borderlands

[/cc]

The actual scroller:
[cc lang=”html”]

[/cc]

Now we encapsulate both parts, like so:
[cc lang=”html”]

AC Brotherhood

Alan Wake

Borderlands

[/cc]
[divider]

3. jQuery

This is pretty simple and straight forward, no need to re-invent the wheel. To accomplish this, we will need to use jQuery and the jQuery UI. These can both be found on Google’s CDN : http://code.google.com/apis/libraries/devguide.html

[cc lang=”html”]


[/cc]

We used a snippet of code offered on the jQuery UI’s slider demo site, adapting it for our needs:

[cc lang=”javascript”]$(function() {
//scrollpane parts
var scrollPane = $( “.scroll-pane” ),
scrollContent = $( “.scroll-content” );

//build slider
var scrollbar = $( “.scroll-bar” ).slider({
slide: function( event, ui ) {
if ( scrollContent.width() > scrollPane.width() ) {
scrollContent.css( “margin-left”, Math.round(
ui.value / 100 * ( scrollPane.width() – scrollContent.width() )
) + “px” );
} else {
scrollContent.css( “margin-left”, 0 );
}
},

animate: ‘slow’
});

//append icon to handle
var handleHelper = scrollbar.find( “.ui-slider-handle” )
.mousedown(function() {
scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
scrollbar.width( “100%” );
})
.append( “” )
.wrap( “

” ).parent();

//change overflow to hidden now that slider handles the scrolling
scrollPane.css( “overflow”, “hidden” );

//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
var remainder = scrollContent.width() – scrollPane.width();
var proportion = remainder / scrollContent.width();
var handleSize = scrollPane.width() – ( proportion * scrollPane.width() );
scrollbar.find( “.ui-slider-handle” ).css({
width: handleSize,
“margin-left”: -handleSize / 2
});
handleHelper.width( “” ).width( scrollbar.width() – handleSize );
}

//reset slider value based on scroll content position
function resetValue() {
var remainder = scrollPane.width() – scrollContent.width();
var leftVal = scrollContent.css( “margin-left” ) === “auto” ? 0 :
parseInt( scrollContent.css( “margin-left” ) );
var percentage = Math.round( leftVal / remainder * 100 );
scrollbar.slider( “value”, percentage );
}

//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
var showing = scrollContent.width() + parseInt( scrollContent.css( “margin-left” ), 10 );
var gap = scrollPane.width() – showing;
if ( gap > 0 ) {
scrollContent.css( “margin-left”, parseInt( scrollContent.css( “margin-left” ), 10 ) + gap );
}
}

//change handle position on window resize
$( window ).resize(function() {
resetValue();
sizeScrollbar();
reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});[/cc]
[divider]

4. The CSS

We need to pay close attention to the jQuery UI mark up. The scroller is designed to grow or shrink based on the scroller content width, so it cannot be just a single image. We need a combination of a background image and css coding to pull this off. The scroller guide is an image added as the background for the div “scroll-bar-wrap”. Here is the required code:

[cc lang=”css”]
body, html {margin: 0; padding: 0; width: 100%; height: 100%; background-color: #242324; background-repeat: no-repeat; background-image: url(../scroller-images/cover-slider-with-bg.jpg); background-position: center 0; font-family: Helvetica, Arial, sans-serif; font-weight: lighter; color: #fff; font-size: 12px;}

header, footer, section {width: 960px; margin: 0 auto; text-align: center;}

.description {width: 468px; margin: 20px auto 40px;}

#scroller { width: 800px; height: 300px; margin: 0 auto; }
.scroll-pane { overflow: auto; width: 612px; margin: 0 auto; }
.scroll-content { width: 1854px; float: left; }
.scroll-content-item { width: 116px; height: 225px; float: left; margin: 0px 0px 0px 8px; font-size: 3em; line-height: 96px; text-align: center; }
.scroll-content-item.first {margin-left: 0;}
.title {font-size: 12px; color: white; line-height: 1.5em; font-family: Helvetica, Arial, sans-serif; }
.im {height: 177px;}

* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; height: 15px; margin: 0px -1px -1px; padding: 0px 4px 0px 2px; background-image: url(../scroller-images/scroll-bar.png); margin: 0 auto;}
.scroll-bar-wrap .ui-slider {height: 15px; margin: 0 auto; }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:0.15em; height: 9px; background-image: url(../scroller-images/handle.gif); border: 1px solid #d2d2d2; position: absolute; outline:none; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }

.ui-corner-all {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

/* Typography */

h1 {font-family: Helvetica, Arial, sans-serif; font-size: 22px; color: #fff; font-weight: normal; text-align: center; font-weight: lighter; margin: 0; padding: 56px 0; }
a {color: #ffbf25;}
a:hover {color: #ffa800;}

.description p {line-height: 1.7em}

footer p {font-weight: bold;}
[/cc]

5. Conclusion:

The result is pretty killer, click on the button below to check it out and download the zip file. Feel free to use this anyway that you would like…personal, commercial..whatever! All that we ask is that you share the love and tell your friends, thanks!

If you would like to download the original PSD, you can do so here. Additionally, if you would like to grab some sweet free textures (including the one that we used for this post.), click here.

[button link=”http://localhost:8888/allur.co/itunes-coded-reloaded/”]Demo[/button] [button link=”http://localhost:8888/allur.co/downloads/bundles/scroller-bundle.zip”]Download[/button]