Seite wird zur Zeit überarbeitet

10. Juni 2017

SVG Slider V001

(function () {
  'use strict';

  var pictures = [];  
  var svgs = [];
  var myImages = [];

  var l = function (myMessage) {
      console.log (myMessage);
    };

  var loadAllImages = function (callback){

    var allPictureLoadedInterval; 
    var pictureNames;

    var checkImagesLoaded = function () {

      var count = 0;

      for (let i=0; i < pictures.length ; i++){

        if(pictures[i].complete){
            count++
        }
      } 

      if (count == pictures.length){
          clearInterval(allPictureLoadedInterval);
          return callback();
      }
    }  

    pictureNames = document
      .querySelectorAll('[data-fhw-slider]')[0]
      .dataset.fhwSlider.split('&');

    for ( let i = 0; i < pictureNames.length ; i++ ) {
      pictures[i] = document.createElement( 'img' );
      pictures[i].src = pictureNames[i];
    }

    var allPictureLoadedInterval = setInterval (checkImagesLoaded, 50);  
  }

  var aniBlendOut = function(el, duration){
    var myOpacity;
    var sumSteps = duration / (1000/60) // 60 pics per second
    var step = sumSteps;
    var animTimeout;

    var anim = function(){

        myOpacity = 1/sumSteps*step;
        el.style.opacity = myOpacity;

        if ( step >= 0){
          step --;
          animTimeout = setTimeout( anim, 1000/60 )
        }
        else {
          clearTimeout( animTimeout );
          svgToFirst();
        }
    }
    anim();
  }

  var aniSlideHor = function(el, duration, direction){

    var easeIO = function (s) { return s<.5 ? 2*s*s : -1+(4-2*s)*s };

    var myLeft = el.getAttribute('width');
    var myWidth = myLeft;
    var sumSteps = duration / (1000/60) // 60 pics per second
    var step = 1;
    var animTimeout;  

    var anim = function(){

      myLeft = easeIO(step/sumSteps)*myWidth; 

      if ( direction == 'left' ){ 
        el.setAttribute('x', -myLeft);
      }
      else {
        el.setAttribute('x', myLeft);
      }

      if ( step <= sumSteps){
        step ++;
        animTimeout = setTimeout( anim, 1000/60 )
      }
      else {
        clearTimeout( animTimeout );
        svgToFirst();
      }
    }
    anim();
  }

  var aniSlideVer = function(el, duration, direction){

    var easeIO = function (s) { return s<.5 ? 2*s*s : -1+(4-2*s)*s };

    var myDown = el.getAttribute('height');
    var myWidth = myDown;
    var sumSteps = duration / (1000/60) // 60 pics per second
    var step = 1;
    var animTimeout;  

    var anim = function(){

      myDown = easeIO(step/sumSteps)*myWidth; 

      if ( direction == 'up' ){ 
        el.setAttribute('y', -myDown);
      }
      else {
        el.setAttribute('y', myDown);
      }

      if ( step <= sumSteps){
        step ++;
        animTimeout = setTimeout( anim, 1000/60 )
      }
      else {
        clearTimeout( animTimeout );
        svgToFirst();
      }
    }
    anim();
  }

  var svgToFirst = function(){
    //set last Child to first Child;
    var lastChild = document.querySelector('#fhwSlider svg svg:last-child');
    var firstChild = document.querySelector('#fhwSlider svg svg:first-child');
    var myContainer = document.querySelector('#fhwSlider>svg');
    myContainer.insertBefore(lastChild, firstChild);
    lastChild.style.opacity = 1;
    lastChild.setAttribute('x', 0);
    lastChild.setAttribute('y', 0);

  }

  var createSVG = function(callback){

    var width = pictures[0].width;
    var height = pictures[0].height;

    var mySvgContainer = document.getElementById('fhwSlider');

    var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

    mySvg.setAttribute('viewBox', `0 0 ${width} ${height}`);
    mySvg.classList.add('responsivePic');

    for (let i = 0; i < pictures.length; i++){

      svgs[i] = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svgs[i].setAttribute('viewBox', `0 0 ${width} ${height}`);
      svgs[i].setAttribute('x', 0);
      svgs[i].setAttribute('y', 0);
      svgs[i].setAttribute('width', width);
      svgs[i].setAttribute('height', height);

      myImages[i]=document.createElementNS("http://www.w3.org/2000/svg",
                      'image')
      myImages[i].setAttribute('x', 0);
      myImages[i].setAttribute('y', 0);
      myImages[i].setAttribute('width', width);
      myImages[i].setAttribute('height', height);
      myImages[i].setAttributeNS('http://www.w3.org/1999/xlink','xlink:href', pictures[i].src);

      svgs[i].appendChild(myImages[i])
      mySvg.appendChild(svgs[i]);
    }
    mySvgContainer.removeChild(mySvgContainer.getElementsByTagName('img')[0]);
    mySvgContainer.appendChild(mySvg);
    return callback();
  }

  var animateSvg = function(){




    setTimeout(function(){
      setInterval(function(){
      var lastChild = document.querySelector('#fhwSlider svg svg:last-child');
      aniSlideHor (lastChild, 1500, 'right');
      }, 4000);
    },20);



  }


  loadAllImages(function(){
    createSVG(
      function(){
          animateSvg();
      }
    );
  });

})();

html:

  <!DOCTYPE html>
  <html lang="en">
  <head>
     <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="test.css" rel="stylesheet">
  </head>
  <body>
      <h1>Test Slider</h1>
      <div id="fhwSlider" 
        class="myContainer"
        data-fhw-slider="http://www.w-web.de/bilder/IMG_01.JPG&http://www.w-web.de/bilder/IMG_02.JPG&http://www.w-web.de/bilder/IMG_03.JPG&http://www.w-web.de/bilder/IMG_04.JPG">
        <img class="responsivePic" src="http://www.w-web.de/bilder/IMG_04.JPG" alt="Testbild">
      </div>
    <script type="text/javascript" src="test.js"></script>
  </body>
  </html>

CSS:

  *{ 
    box-sizing : border-box; 
    font-family: "Calibri", sans-serif;
  }

  body{
    max-width:800px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
  }

  .myContainer{ 
    width : 60%; 
  }

  .responsivePic{ 
    width : 100%; 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75); 
    border:5px solid #fff;
  }

  .myTransition{ 
    transition: all 2s; 
  }

  .opacity0{ 
    opacity: 0;
  }

  svg image {transition: all 2s; }


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