Use the power of jQuery and the handy last.fm records plugin to create a showcase of your favourite music on your website. We’ll install the plugins to fetch the information from the Last.fm website, then style up the design with a cool retro vinyl record theme.
The design we’ll be creating lists out the top albums from our Last.fm profile by displaying the cover art with a subtle shadow. When the link is hovered, a retro vinyl record will slide out from the cover, purely for visual interest and extra cool factor points.
Creating the concept
In order to build the working website, the basic idea and the graphical elements need to be creating in Photoshop. We’ll need to design a background for the demo, the vinyl record image and the subtle shadow graphic.
Create a new document in Photoshop with a width of 2000px. Fill the background with grey and add a subtle noise texture using the Filter > Add Noise menu.
Paint a strip down the center using a large soft white brush. Change this layer to around 20% opacity.
Source an album cover to represent the covers that will be inserted by the Last.fm records plugin and scale it to 126px. Paint a dab of a soft black brush and press CMD+T to transform it.
Squash the brush mark and place it underneath the album art to form a shadow. Adjust the opacity of the shadow to tone down its impact.
Source a photo of a vinyl record and clip out the background using the marquee tool. Scale down the record to fit the dimensions of the album art.
Toggle off all the layers and export a selection of the vinyl record. Use the PNG-24 format to allow for alpha transparency.
Also save out a selection of the shadow as a PNG with alpha transparency.
A thin selection of the background can be exported as a JPEG which will then repeat vertically. The 2000px width will fit inside the majority of screen resolutions.
Writing the HTML
The HTML for the demo is pretty simple. We have the basic structure of Doctype, linked up CSS stylesheet and an introductory H1, then the Javascript files that do all the work are referenced. Firstly we need the jQuery library to power everything, then the handy Last.fm records plugin from Jeroen Smeetswhich essentially does all the hard work for us. The final Javascript file is our own scripts file where we’ll write the final bits of jQuery to get everything working and to add the fancy sliding effect.
The Last.fm records plugin inserts the albums into a div with an ID of
The Last.fm records plugin inserts the albums into a div with an ID of
lastfmrecords, so this is added to the HTML file in the desired place.Activating the jQuery plugin
The documentation to activate the Last.fm records plugin can all be found onJeroen’s website. Basically the plugin is configured with a few simple lines that declare the Last.fm username from which to fetch the information, the number of items to display and what kind of time period to collect the information from. One extra configuration option I’ve added from the main plugin file is an alternative image for any albums that don’t have cover art.
Previewing the HTML file so far will show the jQuery plugin doing its job and displaying the relevant album art neatly linked to the artist’s Last.fm profile.
Styling with CSS
The HTML was super simple, and the CSS isn’t too complicated either. After setting up the overall styling for the demo background and heading, the main CSS for the actual album art is just to space out each
<li> element with 30px margin and to add the shadow graphic as a background-image. Addingposition:relative; will allow the child elements of this list item to be positioned absolutely later.
A preview of the file with all the CSS in place will show a fully working copy of the initial concept with all the albums filling the page.
Creating the fancy sliding vinyl record
We need another HTML object to attach the vinyl record to with CSS, so jQuery is used to append an empty span element inside each anchor. Then a hover function is added to create the effects when the user’s mouse hovers and leaves the links. The jQuery finds the child span of that particular link then animates the positioning to 95px at a speed of 500ms. On hover-out the positioning is returned to 38px, which sits the record exactly over the album cover. The addition of
.stop(true,true) is a handy snippet to prevent any strange behaviour if a link is quickly passed with the mouse triggering a repeating effect.
A touch more CSS styles up the newly created span into a vinyl record graphic using image replacement. The absolute positioning allows the record to sit exactly in place over the album art, then
z-index adjusts the stacking order of the objects so the vinyl sits below the album art and is essentially hidden until it slides out from beneath it.Complete CSS
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #606060 url(images/bg.jpg) repeat-y;
}
h1 {
font: italic 60px Georgia, Serif; color: #333; text-shadow: 0px 3px 1px #606060;
margin: 30px 0 50px 0; text-align: center;
}
#lastfmrecords {
width: 700px; margin: 0 auto;
}
#lastfmrecords li {
width: 200px; float: left; position: relative; text-align: center;
margin: 0 30px 30px 0; padding: 0 0 7px 0;
background: url(images/shadow.png) bottom no-repeat;
}
#lastfmrecords li a img {
position: relative; z-index: 10;
}
#lastfmrecords li a span {
display: block; width: 125px; height: 125px;
background: url(images/vinyl.png);
position: absolute; top: 0; left: 38px; z-index: 5;
}
Complete Javascript
$(document).ready(function() {
var _config = {
username: 'spoongraphics',
count: 9,
period: 'topalbums',
defaultthumb: 'http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_large.png'
};
lastFmRecords.init(_config);
$("#lastfmrecords a").append("");
$("#lastfmrecords a").hover(
function () {
$(this).children("span").stop(true,true).animate({"left": "95px"}, 500);
},
function () {
$(this).children("span").animate({"left": "38px"}, 500);
}
);
});
