CODEWITHSUNDEEP
javascripthtmlanimationcss
Ozzy
Ozzy

Reputation: 8312

Sliding banner 90% HTML+CSS3 10% JS

I made a script to slide an image across the screen (in and out) using CSS3. I couldn't find a way to make CSS start a new animation when the last one finished, and CSS animations don't allow changing the background-image (I tried it). So I had to use a little javascript to switch the className and so the image would change. However this isn't the best solution as it has a chance to go out of sync. Besides that, it defeats the purpose of having a pure CSS3 animation.

Q: Is there a way I can reduce the javascript (without obfuscating the code) or do this completely without the javascript?

Source

/  
/index.html  
/scripts/slider.css  
/scripts/slider.js  
/img/layout/banner1.png  
/img/layout/banner2.png  
/img/layout/banner3.png

slider.css

.main {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height: 100%; /* if there is no content you need this to show something */
    background-repeat: no-repeat;
    background-position: center 50%;
    animation-name: slideInOut;
    animation-duration: 8s;
    animation-delay: 0s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    -moz-animation-name: slideInOut;
    -moz-animation-duration: 8s;
    -moz-animation-delay: 0s;
    -moz-animation-timing-function: ease-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -webkit-animation-name: slideInOut;
    -webkit-animation-duration: 8s;
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -o-animation-name: slideInOut;
    -o-animation-duration: 8s;
    -o-animation-delay: 0s;
    -o-animation-timing-function: ease-out;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
}
.main.m1 {
    background-image: url("../img/layout/banner1.png");
}
.main.m2 {
    background-image: url("../img/layout/banner2.png");
}
.main.m3 {
    background-image: url("../img/layout/banner3.png");
}
@keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-moz-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-webkit-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}
@-o-keyframes slideInOut {
      0% { background-position: 1600px 50%; }
     15% { background-position: center 50%; }
     80% { background-position: center 50%; }
    100% { background-position: -1600px 50%; }
}

slider.js

function startSlider() {
    var main = document.getElementById("main");
    var cArr = ["main m1","main m2","main m3"];
    var ntot = cArr.length;
    var npos = 0;
    setInterval(function() {
        main.className = cArr[npos++];
        if (npos == ntot) npos = 0;
    }, 8000);
}

index.html

<link rel="StyleSheet" href="scripts/slider.css"/>
<script type="text/javascript" src="scripts/slider.js"/>
<body onload="startSlider();">
<div id="main" class="main m3"></div>

stats

*------------------------------------------*
|            | Chars (no spaces) | % total |
|------------|-------------------|---------|
| javascript |               210 |   9.95% |
| html+css3  |          165+1735 |  90.05% |
*------------------------------------------*
| total      |              2110 | 100.00% |
*------------------------------------------*

Upvotes: 1

Views: 2156

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

setInterval(function() {
    main.className = cArr[npos=++npos%ntot];         
}, 8000);

Upvotes: 1

Related Questions