Und noch ein Fader in JavaScript

IMG_6867
IMG_6868
IMG_6869
IMG_6870
IMG_6871
IMG_6872
IMG_6867
IMG_6868
IMG_6869
IMG_6870
IMG_6871
IMG_6872

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;
}

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.122
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Fri, 14. Jan 2022 21:55:59
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.3 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 3100.000 MHz