Jump to content

Full screen Slideshow


JoelJonsson
 Share

Recommended Posts

Hi,

 

First, i need to tell you that i am not experienced in CSS or coding myself but i have fairly good overall technical knowledge.

 

I'm in need of a very simple full screen slideshow consisting of 4 images.

 

I found a CSS3/javascript for this here: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

 

I've tried to tweak it a bit to suite my needs. However, its not really optimal. I would like to change it so it doesnt fade between the images, a fast cut would be better. Also the original was for 6 images but i tried to change it to a 4 image slideshow but im not sure i did it correctly. Can someone help me with these two issues?

 

thanks guys!

 

the HTML looks like this:

<!DOCTYPE html><!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--><!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]--><!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]--><!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]--><!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->    <head>        <meta charset="UTF-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">         <title>Claires slideshow Screen 1</title>        <meta name="viewport" content="width=device-width, initial-scale=1.0">         <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />        <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />        <link rel="shortcut icon" href="../favicon.ico">         <link rel="stylesheet" type="text/css" href="css/demo.css" />        <link rel="stylesheet" type="text/css" href="css/style1.css" />		<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>    </head>    <body id="page">        <ul class="cb-slideshow">            <li><span>Image 01</span><div></div></li>            <li><span>Image 02</span><div></div></li>            <li><span>Image 03</span></div></li>            <li><span>Image 04</span><div></div></li>        </ul>    </body></html>

and the CSS looks like this:

.cb-slideshow,.cb-slideshow:after {     position: fixed;    width: 100%;    height: 100%;    top: 0px;    left: 0px;    z-index: 0;  }.cb-slideshow li span {     width: 100%;    height: 100%;    position: absolute;    top: 0px;    left: 0px;    color: transparent;    background-size: cover;    background-position: 50% 50%;    background-repeat: none;    opacity: 0;    z-index: 0;	-webkit-backface-visibility: hidden;    -webkit-animation: imageAnimation 72s linear infinite 0s;    -moz-animation: imageAnimation 72s linear infinite 0s;    -o-animation: imageAnimation 72s linear infinite 0s;    -ms-animation: imageAnimation 72s linear infinite 0s;    animation: imageAnimation 72s linear infinite 0s; }.cb-slideshow li:nth-child(1) span {     background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span {     background-image: url(../images/2.jpg);    -webkit-animation-delay: 18s;    -moz-animation-delay: 18s;    -o-animation-delay: 18s;    -ms-animation-delay: 18s;    animation-delay: 18s; }.cb-slideshow li:nth-child(3) span {     background-image: url(../images/3.jpg);    -webkit-animation-delay: 36s;    -moz-animation-delay: 36s;    -o-animation-delay: 36s;    -ms-animation-delay: 36s;    animation-delay: 36s; }.cb-slideshow li:nth-child(4) span {     background-image: url(../images/4.jpg);    -webkit-animation-delay: 54s;    -moz-animation-delay: 54s;    -o-animation-delay: 54s;    -ms-animation-delay: 54s;    animation-delay: 54s; }/* Animation for the slideshow images */@-webkit-keyframes imageAnimation {     0% { opacity: 0 }    1% { opacity: 1 }    2% { opacity: 1 }    25% { opacity: 1 }    26% { opacity: 0 }    27% { opacity: 0 }    100% { opacity: 0 }}@-moz-keyframes imageAnimation {     0% { opacity: 0 }    1% { opacity: 1 }    2% { opacity: 1 }    25% { opacity: 1 }    26% { opacity: 0 }    27% { opacity: 0 }    100% { opacity: 0 }}@-o-keyframes imageAnimation {     0% { opacity: 0 }    1% { opacity: 1 }    2% { opacity: 1 }    25% { opacity: 1 }    26% { opacity: 0 }    27% { opacity: 0 }    100% { opacity: 0 }}@-ms-keyframes imageAnimation {     0% { opacity: 0 }    1% { opacity: 1 }    2% { opacity: 1 }    25% { opacity: 1 }    26% { opacity: 0 }    27% { opacity: 0 }    100% { opacity: 0 }}@keyframes imageAnimation {     0% { opacity: 0 }    1% { opacity: 1 }    2% { opacity: 1 }    25% { opacity: 1 }    26% { opacity: 0 }    27% { opacity: 0 }    100% { opacity: 0 }}

/Joel

Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...