<div id="visual-real__container" class="visual-real__container">
  <div id="visual-real__cursor" class="visual-real__cursor">
    <svg width="24" height="24">
      <use href="img/sprites/sprite.svg#arr__chevron-left" />
    </svg>
    <svg width="24" height="24">
      <use href="img/sprites/sprite.svg#arr__chevron-right" />
    </svg>
  </div>
  <div id="visual-real__v-real" class="visual-real__v-wraper">
    <video preload="auto" autoplay="true" loop="true" muted="muted" poster="http://sherpacart.net/photo2topo/Mari_Sima.jpg">
      <source src="http://sherpacart.net/photo2topo/Mari_Sima.webm" type="video/webm">
      <source src="http://sherpacart.net/photo2topo/Mari_Sima.mp4" type="video/mp4">
    </video>
  </div>
  <div id="visual-real__v-visual" class="visual-real__v-wraper">
    <video preload="auto" autoplay="true" loop="true" muted="muted" poster="http://sherpacart.net/photo2topo/Mari_Simab.jpg">
      <source src="http://sherpacart.net/photo2topo/Mari_Sima_b.webm" type="video/webm">
      <source src="http://sherpacart.net/photo2topo/Mari_Sima_b.mp4" type="video/mp4">
    </video>
  </div>
</div>
*,
::after,
::before {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
body {
  background: #333;
  margin: 2rem;
}

.visual-real__container {
  display: inline-block;
  line-height: 0;
  position: relative;
  width: 100%;
  padding-bottom: 50%;
}
.visual-real__v-wraper {
  position: absolute;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}
.visual-real__v-wraper video {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
}

#visual-real__v-real {
  z-index: 1;
}
#visual-real__v-visual {
  z-index: 2;
  width: 50%;
  overflow: hidden;
}
.visual-real__cursor {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 50%;
}
// const vContainer = document.getElementById("visual-real__container");
// const vCursor = document.getElementById("visual-real__cursor");
// const vClipper = document.getElementById("visual-real__v-visual");

// function move(e) {
// 	var rect = vContainer.getBoundingClientRect();
// 	position = ((e.pageX - rect.left) / vContainer.offsetWidth)*100;
// 	if (position <= 100) {
// 	vClipper.style.width = position+"%";
// 	vCursor.style.left = position + "%";
// 	}
// }

// vContainer.addEventListener("mousemove", move);
// vContainer.addEventListener("touchmove",(e) => move(e.targetTouches[0]));

function Video() {
  this.init = function () {
    video.vContainer = document.getElementById("visual-real__container");
    video.vCursor = document.getElementById("visual-real__cursor");
    video.vClipper = document.getElementById("visual-real__v-visual");
    video.vContainer.addEventListener("mousemove", this.move);
    video.vContainer.addEventListener("touchmove", (e) =>
      this.move(e.targetTouches[0])
    );
  };

  this.move = function (e) {
    const rect = video.vContainer.getBoundingClientRect();
    const position =
      ((e.pageX - rect.left) / video.vContainer.offsetWidth) * 100;
    if (position <= 100) {
      video.vClipper.style.width = position + "%";
      video.vCursor.style.left = position + "%";
    }
  };
}

const video = new Video();
video.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js