I devised a clever script to smoothly slide an image back and forth across the screen using CSS3. Unfortunately, I encountered a problem with CSS animations - they do not support changing the background-image directly. Attempting to overcome this limitation, I explored using JavaScript to toggle between classNames in order to swap images. However, relying on JavaScript introduced synchronization issues and undermined the purity of having a purely CSS3 animation.
Q: Is there a way to minimize the reliance on JavaScript (while maintaining code readability) or achieve the same effect without any scripting at all?
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%;
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% |
*------------------------------------------*