responsove banner01

So, you’ve got your site ready to launch, and your portfolio is full of designs that you’ve spent weeks, maybe months, crafting, drawing, redrawing, adding colours, changing colours, and carefully positioning everything so it’s pixel perfect. A lot of time and effort has gone into your work to make sure it looks great, but how do get people to see your work when you can’t realistically place it all on your homepage.

Sliding Banner?

How about we put 4 screenshots of your favorite portfolio items into a sliding banner? Sounds like a great idea; saving space and getting your work in front of a potential customer as soon as they land on your site? There’s only one problem... sliding banners have been somewhat over used in the past few years. A lot of sites contain them, a lot of your competitors probably use them, and most of them do exactly the same thing... slide. This site puts it quite well, with a few statistics along the way. The general message being that people are so used to seeing the traditional sliding banner, that they are ignored by a huge amount of the traffic that hits your site.

So why not just find a different one?

There are a few alternatives out there that do more than just slide, such as Dev7Studios Nivo Slider, (which happens to be great by the way!), but like everything that becomes popular, if everyone has it, it’s hard to make yourself stand out from the crowd.

Get Creative and bring it to Life

So how about making your banner area reflect the image of your company; from the pictures you use, right down to the animations that display them? This approach allows your banner to be unique, to stand out, and actually reflect the personality that you’ve put into each of your portfolio items.

Putting on your hard hat

To do this you will have to get your hands dirty and pop your developer hat on. It’ll be good if you understand a little bit about Javascript/JQuery at this point, so if you don’t know much about them, this is a great time to start! (Javascript, jQuery) In this example I’ll show you how I created the banner currently shown on the Daymedia site. I have split this tutorial into a couple sessions. The first session will cover the banner structure, with a bit of prep work within Javascript. The second will cover the rest of the Javascript and CSS parts. To view a demo of what we're creating in this post, visit this page.

Structure

So first of all, lets start by building the container which will house the banner, it’s slides, and the navigation buttons.

<section class=”banner-area”>
	<ul>
<li>
		// ... banner ...
</li>
<li>
		// ... banner ...
</li>
// ... other list items ...
</ul>
</section>

The <section> is the overall container, while the <ul> will contain all of the slides as <li> elements.

Slide content

Potentially every slide can contain something completely different, which can give you as much flexibility as you desire. Today we’re going to keep things nice and simple. Within the first <li> element, we’re going to put the following elements:

  • a link to the page of the portfolio item
  • background image
  • heading
  • a single image.

The HTML for this will look like the following:

<a href=”/portfolio/daymedia” class=”featured-banner”>
	<img class=”background” src=”/images/daymedia-background.png” /">
	<div class="daymedia">
		<h2 class=”heading”>Daymedia</h2>
		<img class="logo" src="/images/dm-logo.png" alt="Daymedia Logo" />
	</div>
</a>

The <a> is simply linking you to the page that contains the portfolio item, the <img class="background"> is the background for the slide. Note that the slides will work without a background if you do not require one. The <div class="daymedia"> is the container for all the other parts of the slide that will sit on top of your background; such as the heading text, and the image. Within the second <li> element, we’re going to put the following:

<a href="/portfolio/daymedia-2/" class="featured-banner">
	<div class="daymedia-two">
		<div class="design">
			<img src="/images/print-design.png" alt="Print Design" />
			Logo Design & Branding
		</div>
		<div class="web-dev">
			<img src="/images/web-dev.png" alt="Web Development" />
			Web Development
		</div>
		<div class="e-com">
			<img src="/images/e-com.png" alt="E-commerce" />
			Online Shopping
		</div>
	</div>
</a>

Javascript

So far we have just made the structure of the slides. Now we need to create some functions within Javascript to make it work. First of all, create a javascript file with the following lines of code in them:

jQuery(document).ready(function($) {

	//code goes here...

});

This uses jQuery to check if the page has finished loading, and then executes the containing code once it has. Any code we write will be placed within these two lines of code. The first function we’ll create will handle the list of banners, add some classes and a couple of inline styles, append the next and previous buttons along with their click events. I called this first function showcaseBanner and it accepts 2 arguments. The first is the banner list element, the second is the waiting time between slides. You can find the code here

Explaining the code

Firstly you need to check if any banner slides exist, and if they do, do something with them. If there isn’t, then there’s really no point continuing.

if($(banner_list).length > 0)

The next part adds classes for CSS styling so that all of the banner slides are positioned on top of each other, rather than being displayed vertically down the page as a list would normally be.

// Absolutely position all the li
$(banner_list).addClass('js-showcase-banner-container');
$(banner_list + " li").addClass('js-showcase-banner');

Now we need to hide all of the banner slides so we have a blank canvas on the screen to start with. These have been commented out at the moment so that you can see what’s going on on the page. We’ll uncomment them in the next blog.

// Hide all banners
// $(banner_list + " li").css({ display: 'none'});
// $(banner_list + " .background").css({opacity: '0'});

Next you will see the name of a function we haven’t created yet. This will be discussed in the next blog, but this basically handles all of the animations. We are also setting up the waiting time here, so that each banner is displayed for the same amount of time.

// Show first banner and kick off the interval
bannerSwitch(banner_list, false, first_time);
var banner_interval = setInterval(function() { bannerSwitch(banner_list); }, wait_time);

As you may have noticed, the structure of your html so far does not include any previous and next buttons. We will now add them via the JavaScript. The decision to add them from within JavaScript is because this banner depends on JavaScript. If it’s disabled, the transitions from one slide to another would not work, and all of the slides would be shown in a nice neat order down your page, just as a list would normally be shown. So if all the slides are already on the screen, the previous and next buttons don’t really need to be created.

// Add next/prev buttons
$(banner_list).append('<div class="next"><a class="js-showcase-btn js-showcase-next" href="#">></a></div>');
$(banner_list).append('<div class="prev"><a class="js-showcase-btn js-showcase-prev" href="#"><</a></div>');

The next part sets up the click events for the previous and next buttons that were just created. They are almost identical, except for the next button needs to know to go forward, which the previous button needs to know to go backwards. This will be described in more detail in the next blog. The next button looks like this:

//Add click events to buttons
$('.js-showcase-next').click(function(event) {
	event.preventDefault();

	if($(':animated').length)
	{
		return false;
	}
	else
	{
		// Clear the interval, animate the banner and then restart the interval
		clearInterval(banner_interval);
		bannerSwitch(banner_list, false, false);
		banner_interval = setInterval(function() { bannerSwitch(banner_list); }, wait_time);
	}

});

The first line simply tells JavaScript to run a function when the user clicks this button.

$('.js-showcase-next').click(function(event) {

However, we don’t want the default functionality of the <a> to happen, otherwise every time it’s clicked, the page will scroll back to the top. So we make sure that only the code we want to run, is run.

event.preventDefault();

Without the next part, you will get some strange effects happening on your banner if you were to click the previous or next buttons quickly. This next part looks to see if an animation event has been triggered, and doesn’t allow another animation to be triggered until the current one has finished. This also prevents animation triggers to be cued up. So, for example, if you clicked the next button 6 times, it will respond to your first click, but ignore your next 5 if they happened while the animation was still going.

if($(':animated').length)
{
	return false;
}
else
{
	// Clear the interval, animate the banner and then restart the interval
	clearInterval(banner_interval);
	bannerSwitch(banner_list, false, false);
	banner_interval = setInterval(function() { bannerSwitch(banner_list); }, wait_time);
}

If the animation is allowed to start, we need to clear the current waiting time (so that the banner doesn’t automatically try to animate another slide while this one is animating), animate the banner to the next slide, and then start the waiting time again.

if($(':animated').length)
{
	return false;
}
else
{
	// Clear the interval, animate the banner and then restart the interval
	clearInterval(banner_interval);
	bannerSwitch(banner_list, false, false);
	banner_interval = setInterval(function() { bannerSwitch(banner_list); }, wait_time);
}

So at this point you should now have all the banners on the page. They will look a bit of a mess at the moment as we’ve not applied any CSS styling to them, but what you do have is the foundation for your custom banner to be built upon In the next blog I will use a combination of CSS and JavaScript to create the next step which makes this banner come to life... the responsive banner animation!