Und noch ein JavaScript Fader

IMG_6867
IMG_6868
IMG_6869
IMG_6870
IMG_6871
IMG_6872

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: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 3.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.0.167
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sat, 25. Jun 2022 14:46:24

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 20.04.5 LTS (Focal Fossa)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 900.000 MHz