Jump to content

JoelJonsson

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by JoelJonsson

    A simple full screen slideshow

    in CSS

    Posted

    Hi, a while back i asked if someone could help me tweak a CSS/Java to suite my slideshow needs. But i might think its easier to just create a new one.

     

    All i need is a fullscreen slideshow with 4 images looping.

     

    It doesnt need any fancy transitions or fading between the image, just hard cuts.

     

    Is that easy to do?

     

     

    thanks!

     

    • Like 1

    Full screen Slideshow

    in CSS

    Posted

    Slideshow are made on JS and Jquery. I think all data is in Jquery module.

     

    Ok, does that mean i need to change the javascript in order to get my issues solved?

     

    Joel

    Full screen Slideshow

    in CSS

    Posted

    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

×
×
  • Create New...