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


stats

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

Problem courtesy of: Ozzy

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Sliding banner 90% HTML+CSS3 10% JS

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录