Marketo Banner

by Chris Nicholson

HTML

<div id="banners">    
    <div id="1">
        
        <img class="person" src="http://lorempixel.com/540/410/sports" />
        
        <h1>The Best Email Signature Software on the Market</h1>
        
        <blockquote>"This is some other, equally long hopefully quote that should express the views of myself and company well."</blockquote>
        
        <p class="name">Ratish Nair</p>
        <p class="title">Microsoft Exchange MVP</p>
        
        <img class="logo" src="http://lorempixel.com/200/40" />
        
    </div>
    <div id="2">
        
        <img class="person" src="http://lorempixel.com/540/410/animals" />
        
        <h1>The Best Email Signature Software on the Market</h1>
        
        <blockquote>"I recommend Exclaimer Signature Software to everyone. This is what Exchange is missing - sometimes the seemingly simple things prove to be truly impressive."</blockquote>

        <img class="logo" src="http://lorempixel.com/200/40" />
        
        <p class="name">Ratish Nair</p>
        <p class="title">Microsoft Exchange MVP</p>
        
    </div>
    <div id="3">
        
        
        
    </div>
</div>

<div id="bannerControls">
    <a href="0">One</a>
    <a href="1">One</a>
    <a href="2">One</a>
</div>

CSS

#banners {
    width: 960px;
    height: 420px;
    background: #eee;
}

#banners div {
    position: absolute;
    display: none;
    width: 960px;
    height: 420px;
}

#banners div:first-child {
    display: block;
}

#banners .person {
    position: absolute;
    left: -135px;
    top: 0;   
}

#banners h1,
#banners blockquote,
#banners .name,
#banners .title {
    float: right;
    clear: right;
    width: 540px;
    text-align: right;
    font-family: 'Calibri';
}

#banners h1 {
    margin-bottom: 18px;
    font-size: 48px;
    color: #414E7B;
    line-height: 48px;
}

#banners blockquote {
    margin: 0;
    font-size: 22px;
    color: #444;
}

#banners .name,
#banners .title {
    width: 250px;
    color: #6282B4;
}

#banners .name {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: bold;
}

#banners .title {
    margin-top: 0;
    font-size: 18px;
}

#banners .logo {
    margin-top: -20px;
    float: right;
}

JavaScript

var inMotion = false;
var speed = 300;

$('#bannerControls a').on('click', function(e) {
    e.preventDefault();
    
    var $this = $(this);
    var newId = parseInt( $this.attr('href') );
    
    var currentDiv = $('#banners div:visible');
    var currentDivId = $('#banners div:visible').index();
    
    if (newId === currentDivId) return;
    
    var newDiv = $('#banners div').eq(newId);
    
    currentDiv.css('z-index', 10);
    newDiv.css('z-index', 20);
    
    currentDiv.fadeOut(speed);
    newDiv.fadeIn(speed);
    
});