Una presentación de contenido CSS3 puro

Vista prévia

Descripción

Una presentación de diapositivas extremadamente simple construida sólo con CSS & CSS3 que cuenta con reproducción automática, animaciones CSS3, pausa en el mouse Hover, y totalmente personalizable & styleable a través de CSS.

Funcionamiento

Estructura HTML de marcado.

<div id="contentWrapper">
<div id="slideWrapper">
<div id="slideReel">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide1"></div>
</div>
</div>
</div>

El CSS

#contentWrapper {
height: 420px;
width: 420px;
overflow: hidden;
margin: 10% auto;
padding: 0px;
background-color: #000;
}
#slideWrapper {
height: 400px;
width: 400px;
overflow: hidden;
margin: 10px;
padding: 0px;
background-color: #999;
}
#slideReel {
height: 400px;
width: 2400px;
margin: 0px;
padding: 0px;
background-color: #333;
-webkit-animation-play-state: running;
-webkit-animation-name: slideIt;
-webkit-animation-duration: 12000ms;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
/* Resume the slideshow
 #slideReel:hover{
	margin-left:-400px;
}
*/

.slide {
float: left;
height: 400px;
width: 400px;
margin: 0px;
padding: 0px;
background-color: #FFF;
}
#contentWrapper:hover #slideReel {
-webkit-animation-play-state: paused;
}
 @-webkit-keyframes slideIt {
 0% {
-webkit-transform: translate(0px);
}
 5% {
-webkit-transform: translate(0px);
}
 20% {
-webkit-transform: translate(-400px);
}
 40% {
-webkit-transform: translate(-800px);
}
 60% {
-webkit-transform: translate(-1200px);
}
 80% {
-webkit-transform: translate(-1600px);
}
 100% {
-webkit-transform: translate(-2000px);
}
}
#slide1 {
background-image: url(images/img1.jpg);
}
#slide2 {
background-image: url(images/img2.jpg);
}
#slide3 {
background-image: url(images/img3.jpg);
}
#slide4 {
background-image: url(images/img4.jpg);
}
#slide5 {
background-image: url(images/img5.jpg);
}