/* KENBURNS STYLES
-------------------------------------------------------*/
/* kenburns_slideshow is the wrapper div.
Our list of Images scrolls inside of this frame
To compute the minimum frame size needed:;
image width * scale
image height * scale
if the image size is smaller than the frame size,
gaps may appear. If image sizes are exactly the same,
the images will fade over one another and not move.
*/
#kenburns-slideshow {
position: relative;
width: 600px;
height: 360px;
border: 10px solid darkred;
box-sizing: border-box;
z-index: 1;
overflow: hidden;
}
/* The plugin wraps the images in div.kb-slide. This
allows me to run separate animations simultaneously. */
.kb-slide{
position: absolute;
z-index: 1;
opacity: 0;
}
/* I used position relative here because IE8
didnt like the opacity when the img was set to absolute*
translate3d(000) kicks them into HW acceleration, and
backface-visibility gives some performance boosts.*/
.kb-slide img{
position: relative;
-webkit-transform: translate3d(0,0,0)
-moz-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
/* If the script encounters an image that hasnt loaded,
it pops up a little loading wheel. I used a little CSS3
but you could also use a gif to better handle ie8*/
.loader {
width:32px;
height:32px;
top:6px;
left:550px;
border:5px solid rgba(128,128,128,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px dotted rgba(0,0,0,0);
border-radius:32px;
-moz-animation:spin .7s infinite linear;
-webkit-animation:spin .7s infinite linear;
}
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}
#kenburns-description{
width: 600px;
background-color:#191919;
color:#999;
padding:0 22px 22px 22px;
}
#kenburns-description p{
margin:0;
padding:0;
line-height: 18px;
font-size:12px;
}
#kenburns-description a{
color:white;
text-decoration: none;
}
#kenburns-description a:hover{
color:green;
text-decoration: none;
}
#kenburns-description a:visited{
color:white;
}
.title {
clear: left;
margin:0;
padding:15px 0 0 0;
}
#slide-title{
margin-top: 5px;
font-weight: bold;
}
#status{
color:#333;
font-size: 12px;
}
/* #### CSS that's applied when the viewing area's height is 600px or less #### */
@media screen and (max-width: 600px){
#kenburns-slideshow{
width: 100%;
height: 200px;
border: none;
}
}
|
Download
