beamly image slider markup v2

In this example below you will see how to do a beamly image slider markup v2 with some HTML / CSS and Javascript

I am refactoring the html markup and and mousemove/touchmove event handler

Thumbnail
This awesome code was written by aneudy1702, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aneudy1702 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>beamly image slider markup v2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="photoslider" style="width: 300px;">        
  <img src="http://img-w.zeebox.com/images/z/904f6e0f-2141-4af3-80f8-0ecaa8a4dc28.jpg" width="300">        
  <img class="top-pic" src="http://img-w.zeebox.com/images/z/cc6ec40f-83ef-4422-b689-b582f789c635.jpg" width="300">
  <a class="drag">← Slide →</a>
</div>

<svg>
  <defs>
    <clipPath id="clipping">
      <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>
<img id="test" src="http://img-w.zeebox.com/images/z/cc6ec40f-83ef-4422-b689-b582f789c635.jpg" width="568">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/aneudy1702/beamly-image-slider-markup-v2-abALv */
.photoslider {
  position: relative;
}
.top-pic {
  position: absolute;  
  top: 0;
  left: 0;
  clip: rect(0px,150px,300px,0px);
}
.drag {
  position:absolute;
  top: 0;
  height: 300px;
  line-height: 300px;
  left: 150px;
  margin-left: -36px;
  color: red;
  font-weight: bold;
}
#test:hover {
  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  animate: star 3s;
}

@keyframes star {
  0% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  },
  100% {
    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  }
}

/*Downloaded from https://www.codeseek.co/aneudy1702/beamly-image-slider-markup-v2-abALv */
var positionX, topImage, touch, positionX, sliderWidth, clip, adjustTopImage, drag, slider, isTouch, myevent;

sliderWidth = 300;

adjustTopImage = function(evt) {
    if (evt.type === "touchmove") {
        evt.preventDefault();
        touch = evt.touches[0] || evt.changedTouches[0];
        positionX = touch.pageX;
    } else {
        positionX = evt.pageX;
    }

    if (!topImage) {
        topImage = $('.top-pic');
    }
    if (!drag) {
        drag = $('.drag');
    }

    if (positionX > sliderWidth - 15 || positionX < 15) {
        return false;
    }
    clip = 'rect(' + getClip(positionX) + ')';
    topImage.css({
        clip: clip
    });
    drag.css({
        left: positionX + 'px'
    });

};

function getDrag(x) {
    return {
        '-webkit-transform': 'translateX(' + x + 'px)',
        transform: 'translateX(' + x + 'px)'
    };

}

function getClip(right) {
    return [0, right, sliderWidth, 0].join('px, ');
}
slider = document.querySelector('.photoslider');
isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window;
myevent = isTouch ? 'touchmove' : 'mousemove';
slider.addEventListener(myevent, adjustTopImage, false);

Comments