testing RWD animated banner - Andrew Pougher

testing RWD animated banner - Andrew Pougher

by Andrew Pougher

HTML

<script src="http://andrewpougher.co.uk/code/js/rotator.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div id="rotatorWrap">
			<div class="itemContainer">
				<div class="rotatorItem">
                    <img src="http://placehold.it/960x400/3e3ecc" class="fullImage" />
					<div class="caption">
						<p class="style1">It's responsive</p>
						<p class="style2">Try to resize your browser	</p>
						<p class="style3">Press left/right arrow key to navigate</p>    
					</div>
				</div>		

				<div class="rotatorItem greenColor">
					<div class="quote">
						<p>"Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works."</p>
						<p class="author">Steve Jobs</p>					
					</div>
				</div>

				<div class="rotatorItem">
                    <a href="#"><img src="http://placehold.it/256x256/ec4522" class="wp1" /></a>			
                    <a href="#"><img src="http://placehold.it/128x128/e545cd" class="wp2" /></a>
					<div class="caption">
						<p class="wpTitle1">Some words</p>
						<p class="wpTitle2">And a little more blurb</p>						
					</div>		
				</div>

				<div class="rotatorItem">
                    <a href="#"><img src="http://placehold.it/960x400/ec57c2" class="fullImage" /></a>
				</div>
				
				<div class="rotatorItem orangeColor">
					<div class="quote">
						<p>"It is better to remain silent and be thought a fool than to open one's mouth and remove all doubt."</p>
						<p class="author">Mark Twain</p>						
					</div>
				</div>

			</div>		
	</div>

CSS

body{
	margin: 0;
	padding: 0;
	background: #333 /*url(texture.png) repeat*/; 
	min-width: 320px;		
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;	
}


#rotatorWrap{
	width: 960px;
	background: transparent;
	position: relative;
	padding: 0;
	margin: 0 auto;
	margin-top: 40px;
	overflow: hidden;
}

.itemContainer{
	position: absolute;
	width: 100%;
	height: 100%;	
	margin: 0;
	padding: 0;
	-webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;

}


.rotatorItem{
	display: block;
	padding: 0;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}
.rotatorItem img{
	padding: 0;
	margin: 0;
	z-index: 1000;
	/*display: none;*/
}

.rotatorItem .caption{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;	
	font-size: 1.2em;
	position: absolute;
	top: 20px;
	left: 30px;
	z-index: 1001;
	color: #fff;
}

.rotatorItem .caption p{
	/*text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.8);	*/
	display: inline-block;
	position: relative;
	float: left;
	clear: left;
	margin-top: 4px;
	background: #EFEFEF;
	color: #666;
	padding: 10px;
	opacity: 0;
	z-index: 1002;
}

.rotatorItem .caption .wpTitle1{
	margin-top: 120px;
	margin-left: 540px;
	font-size: 1.2em;
	background: #9ACD32;
	color: #FFF;	
}
.rotatorItem .caption .wpTitle2{
	margin-left: 540px;
	font-size: .8em;
	background: #9ACD32;
	color: #FFF;	
}

.rotatorItem .caption .lycheeTitle1{
	margin-left: 180px;
	margin-top: 100px;
}
.rotatorItem .caption .lycheeTitle2{
	margin-left: 180px;
}


.rotatorItem .caption .style1{
	font-size: 1.2em;
	background: #FF7F50;
	color: #FFF;
	margin-top: 100px;
	margin-left: 500px;
}
.rotatorItem .caption...

JavaScript

$(document).ready(function() {
			$('.itemContainer').Rotator({
				showArrow: true,
				autoHideArrow: true,
				slideShow: true,
				slideShowDelay: 5000,
				responsive: true
			});
		});