Und noch ein JavaScript Fader HTML movingboxes.htm HTML (743 Bytes) 27.10.2021 17:24 <!DOCTYPE html > <html lang="en"> <head> <meta charset="utf-8" /> <title>Fader</title> </head> <body> <div id="wrapper"> <div class="fader"> <div class="fader-item"><img src="/media/IMG_6867.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6868.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6869.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6870.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6871.jpg" /></div> <div class="fader-item"><img src="/media/IMG_6872.jpg" /></div> </div> </div> <script src="movingboxes.js"></script> </body> </html> JavaScript movingboxes.js JavaScript (2,45 kByte) 27.10.2021 17:21 function animate(elem, attr, dest, callback) { var from, to = dest, el = elem, fc = callback; if (el.style.getPropertyValue) { from = parseInt(el.style.getPropertyValue(attr)); } else { from = parseInt(el.style.getAttribute(attr)); } if (from == to) return; var start = Date.now(); var tick = function() { var t = Math.min(1, ((Date.now() - start) / 1000)); var eased = t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; var val = (eased * (to - from)) + from; if (el.style.setProperty) { el.style.setProperty(attr, val + "px"); } else { el.style.setAttribute(attr, val + "px"); } if (t<1) { window.requestAnimationFrame(tick); } else { if (fc) { fc(); } } } tick(); } function jsFader(fader){ this.obj = fader; var self = this; fader.style.left = 0; var childs = fader.childNodes; // delete whitespaces for (i=childs.length-1; i>=0; i--) { if (childs[i].nodeType != 1) { fader.removeChild(childs[i]); } } this.items = fader.children; var width = 0; for (var i=0; i<this.items.length; i++) { width += this.items[i].offsetWidth; this.fit(this.items[i]); } fader.style.width = width + 'px'; setTimeout(function() {self.fade();}, 3000); } jsFader.prototype = { fit: function(el) { var it = el || this.items[0]; var img = it.querySelectorAll('img')[0]; if ((img.naturalWidth / img.naturalHeight) >= (it.offsetWidth / it.offsetHeight)) { img.style.width = 'auto'; img.style.height = '100%'; img.style.top = '0'; img.style.left = -Math.floor((img.width - it.offsetWidth) / 2) + 'px'; } else { img.style.width = '100%'; img.style.height = 'auto'; img.style.left = '0'; img.style.top = -Math.floor((img.height - it.offsetHeight) / 2) + 'px'; } }, fade: function() { var self = this; var width = this.items[0].offsetWidth; var last = this.items[0]; var fader = this.obj; this.currentFade = 0; animate(fader, 'left', -width, function() {fader.appendChild(last); fader.style.left = 0;}); setTimeout(function() {self.fade();}, 3000); } } var style = document.createElement('link'); style.type = 'text/css'; style.rel = 'stylesheet'; style.addEventListener('load', function() { var els = document.querySelectorAll('div.fader'); for (var i=0; i<els.length; i++) { new jsFader(els[i]); } }); style.href = '/code/animate/movingboxes.css'; document.head.appendChild(style); StyleSheet movingboxes.css StyleSheet (369 Bytes) 27.10.2021 17:20 #wrapper { position: relative; width: 100%; height: 160px; margin: 0; padding: 0; overflow: hidden; } .fader { position: absolute; height: 100%; margin: 0; padding: 0; } .fader-item { position: relative; display:inline-block; padding: 0; top: 0; height: 100%; width: 240px; overflow: hidden; } .fader-item img{ position: relative; } Author: Udo Schmal, published: 15.08.2014, last modified: 06.09.2023