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% |
*------------------------------------------*
1 Answer