HTML
Xfader.htm HTML (1,26 kByte) 27.10.2021 17:32
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fader</title>
</head>
<body>
<div id="wrapper">
<div id="big" 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 id="small" 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="/code/animate/Xfader.js"></script>
</body>
</html>
JavaScript
Xfader.js JavaScript (2,67 kByte) 27.10.2021 17:54
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;
this.items = [];
this.currentFade = 0;
var self = this;
this.items = fader.children;
var x=0;
for (var i=0; i<this.items.length; i++) {
this.fit(this.items[i]);
this.items[i].style.left = x+"px";
x = x + this.items[i].offsetWidth;
}
setTimeout(function() {self.fade();}, 3000);
window.addEventListener('resize', function(event) {self.fit();});
}
jsFader.prototype = {
fit: function(el) {
var it = el || this.items[this.currentFade];
var img = it.querySelectorAll('img')[0];
if ((img.naturalWidth / img.naturalHeight) >= (this.obj.offsetWidth / this.obj.offsetHeight)) {
img.style.width = 'auto';
img.style.height = '100%';
img.style.top = '0';
img.style.left = -Math.floor((img.width - this.obj.offsetWidth) / 2) + 'px';
} else {
img.style.width = '100%';
img.style.height = 'auto';
img.style.left = '0';
img.style.top = -Math.floor((img.height - this.obj.offsetHeight) / 2) + 'px';
}
},
fade: function() {
var self = this;
var width = this.items[this.currentFade].offsetWidth;
var last = this.items[this.currentFade];
this.currentFade = this.items[this.currentFade+1] ? this.currentFade+1 : 0;
var el = this.items[this.currentFade];
el.style.left = width+'px';
el.style.display = '';
this.fit(this.items[this.currentFade]);
animate(el, 'left', '0');
animate(last, 'left', -width, function() {last.style.display = 'none';});
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/Xfader.css';
document.head.appendChild(style);
StyleSheet
Xfader.css StyleSheet (620 Bytes) 27.10.2021 17:51
#wrapper {
position: relative;
width: 100%;
height: 0;
min-height: 1px;
padding-top: 44%;
}
#big {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#small {
position: absolute;
right: 10px;
bottom: 20px;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
border: 3px solid white;
}
.fader .fader-item{
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.fader img{
position: relative;
display: block;
}
