Seite wird zur Zeit überarbeitet

08. Juni 2017

BlendOut Image in Tiles

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div{float:left;}

    </style>
  </head>
  <body>
    <div id="slideshow">
      <img id="myPic" src="http://w-web.de/bilder/IMG_07.JPG" />
    </div>
    <script>
        var cl = (info) => console.log(info);

        window.onload = function(){
          var cols = 50;
          var rows = 1;
          var els = [], elCount = 1;
          for (var rowCount = 1; rowCount <= rows; rowCount++){
            for (var colCount = 1; colCount <= cols; colCount++){
              cl(elCount);
              els[elCount] = document.createElement('div');
              with (els[elCount].style){
                backgroundImage = `url('${myPic.src}')`;
                width = `${myPic.width/cols}px`;
                height = `${myPic.height/rows}px`;


                backgroundPosition = 
                  `-${myPic.width/cols*(colCount-1)}px
                   -${myPic.height/rows*(rowCount-1)}px
                  `;
                transition = "all 500ms";
                cl(myPic.width/rows*(colCount-1))
              }
              slideshow.appendChild(els[elCount]);
              elCount++; 
            }
          }
          myPic.style.display='none';

          // jetzt aus blenden
          var anim=1;
          var animator;
          // hier ein Array erstellen aus Zufallszahlen
          // damit Ausblenden gleichmäßig erfolgt
          var blendOutArray = []
          while(blendOutArray.length < cols*rows){
            var randomnumber = Math.ceil(Math.random()*cols*rows)
            if(blendOutArray.indexOf(randomnumber) > -1) continue;
            blendOutArray[blendOutArray.length] = randomnumber;
          }
          cl(blendOutArray);
          //for(let i=1; i <= (cols * rows); i++){
            animator = setInterval(function(){
              //els[blendOutArray[anim-1]].style.opacity = 0;
              els[anim].style.opacity = 0;
              anim++;
              if (anim >(rows*cols)){clearInterval(animator);} 
            },40);  
        }
    </script>

  </body>
  </html>


Frank Wisniewski Lohmühlenstraße 2 53518 Adenau
Telefon: 02691 / 548 E-Mail: info@w-web.de