@Cro1zy
только-только в IT

Как добавить ползунок для video slider before after?

Дан код взятый с форума для Видео слайдера "ДО и ПОСЛЕ"
нужно добавить динамичный ползунок, вопрос: "Как реализовать?"
идей нет, буду рад помощи)
https://codepen.io/dudleystorey/pen/EIKzk
<div id="video-compare-container">
					<br id="video__hr">
				  <video loop autoplay muted src="videos/after.mp4">
				  </video>
				  
				 <div id="video-clipper">
				    	<video loop autoplay muted src="videos/before.mp4">
				    </video>
				  </div>
				  </div>
<code lang="html">
<code lang="css">
           #video-compare-container {
           display: inline-block;
           line-height: 0;
           position: relative;
           width: 33.33333%;
           height: 180%;
           padding-top: 37.5%;

           border-top: 1px dotted var(--gray);
  border-bottom:  1px dotted var(--gray);
}
#video-compare-container > video {
  width: 100%;
  position: absolute;
  top: 0; height: 100%;
}
#video-clipper {
  width: 50%; position: absolute;
  top: 0; bottom: 0;
  overflow: hidden;
}
#video-clipper video {
  width: 200%;
  position: absolute;
  height: 100%;
}
</code>
<code lang="javascript">
      function trackLocation(e) {
		  	var rect = videoContainer.getBoundingClientRect(),
		      position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
		  	if (position <= 100) { 
			    videoClipper.style.width = position+"%";
			    clippedVideo.style.width = ((100/position)*100)+"%";
			    clippedVideo.style.zIndex 
			    = 3;
			}
		}
		var videoContainer = document.getElementById("video-compare-container"),
		videoClipper = document.getElementById("video-clipper"),
		clippedVideo = videoClipper.getElementsByTagName("video")[0];
		videoContainer.addEventListener("mousemove", trackLocation, false); 
		videoContainer.addEventListener("touchstart",trackLocation,false);
		videoContainer.addEventListener("touchmove",trackLocation,false);
</code>
  • Вопрос задан
  • 147 просмотров
Пригласить эксперта
Ответы на вопрос 1
Topstik
@Topstik
TikTok music promotion
This video will help to doing this process step-by-step
https://www.youtube.com/watch?v=U0Ji2XAvok8
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы