YoursBanner

by AaronLayton

HTML

<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<div class="container">&nbsp;</div>
<div class="fixedBottom">
    <ul>
        <li>
            <a href="http://www.yoursclothing.co.uk/landing-offers.aspx"><img src="http://www.designpreview.co.uk/2013/yoursbanner/1.gif" width="954" height="48" /></a>
        </li>
        <li>
            <a href="http://www.yoursclothing.co.uk/ukdelivery.aspx"><img src="http://www.designpreview.co.uk/2013/yoursbanner/2.jpg" width="954" height="48" /></a>
        </li>
    </ul>
</div>

CSS

body {
    background:url(http://www.designpreview.co.uk/2013/yoursbanner/bg.jpeg) top center no-repeat
}
.container {
    margin:0 auto;
    height:2368px;
    width:954px;
}
.fixedBottom {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 50%;
    margin:0 0 0 -477px;
    width:954px;
}

ul, li {
    background:#fff;
    list-style:none;
    margin:0;
    padding:0;
}

JavaScript

$('.fixedBottom ul').cycle({
    fx:'uncover',
    direction:'down',
    before:function(curr,next,opts){
        opts.animOut.opacity=0;
    }
});