Несколько видео на ползунок воспроизведения в определенных движений мыши

Question

Ищу ползуна точно так, как goo.gl/o1GWFr

Если вы заметили, есть несколько видео, которую играют. Тем не менее, специальные мышиные движения, которые отслеживаются &, соответственно, только следующее видео воспроизводится, когда наше движение мыши достигает определенной позиции. Аналогично, тот же цикл продолжается для большего количества видео в одном слайдере.

Может ли кто-нибудь вести меня о том, как это было сделано? Есть ли библиотека или учебник для выполнения одного и того же слайдера?

Я попытался проверить &, проверяя коды, однако я все еще не могу понять, как именно он был выполнен.

Большое спасибо, надеемся получить удивительную поддержку!

Answer 1

Here's a fiddle I made. Он достигает аналогичного (базового) эффекта, вы можете использовать его в качестве основы для построения, однако то, о чем вы просите, - довольно большая работа. Проведите некоторое исследование, посмотрите на задержку воспроизведения определенных видеороликов, подсчет количества итераций анимации, затем используйте эту информацию, чтобы определить, какое видео воспроизводится.

Итак, как работает мой пример: jQuery инициирует анимацию CSS и воспроизводит видео, когда вы наводите курсор на прозрачный div в правой части слайдера. Когда вы снимаете мышь с этого div, она приостанавливает анимацию CSS и приостанавливает одно из видео, но оставляет одно воспроизведение.

Кодекс: HTML:

<div class="wrapper"> 
    <div class="hoverPanel"></div> 
    <div id="b"> 
    <img src="http://vtdavy.com/wp-content/uploads/2015/02/life_in_space.jpg"> 
    <img src="http://www.thespaceshow.com/sites/default/files/shows/styles/front_page_three_blocks/public/Deep-Space-Cloud3_0.jpg?itok=QBRCnvLL"> 
    <img src="http://vtdavy.com/wp-content/uploads/2015/02/life_in_space.jpg"> 
    <img src="http://www.thespaceshow.com/sites/default/files/shows/styles/front_page_three_blocks/public/Deep-Space-Cloud3_0.jpg?itok=QBRCnvLL"> 
    <video muted loop id="v1" class="vidz" width="100px" height="auto"> 
     <source src="http://mazwai.com/system/posts/videos/000/000/208/original/white-lilies.mp4" type="video/mp4"> 
    </video> 
    <video muted loop id="v2" class="vidz" width="100px" height="auto"> 
     <source src="http://mazwai.com/system/posts/videos/000/000/208/original/white-lilies.mp4" type="video/mp4"> 
    </video> 
    <div class="clearfix"></div> 
    </div> 
</div> 

CSS:

div.wrapper { 
    overflow: hidden; 
    width: 800px; 
    height: 210px; 
    position: relative; 
} 
#b { 
    position:relative; 
    width: 1600px; // Width of four images 
} 
.run { 
    animation: moveSlideshow 12s linear infinite; 
} 
#b > img { 
    float: left; 
    width: 400px; 
} 
@keyframes moveSlideshow { 
    100% { 
    transform: translateX(-800px); 
    } 
} 
.vidz{ 
    position: absolute; 
} 
#v1 { 
    bottom: 0; 
    left: 500px; 
} 
#v2 { 
    top: 0; 
    left: 850px; 
} 
.hoverPanel { 
    position: absolute; 
    width: 100px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    cursor: pointer; 
    z-index: 2; 
} 
.clearfix { 
    clear: both; 
} 

JQuery:

var vid = document.getElementById("v1"); 
var vid2 = document.getElementById("v2"); 

function playVid() { 
    vid.play(); //plays #v1 
    vid2.play(); //plays #v2 
} 

function pauseVid() { 
    vid.pause(); 
} 
$(".hoverPanel").on("mouseover", function(){ 
    playVid(); // run playVid function 
    if ($("#b").hasClass("run")){ 
    $(".run").css({"-webkit-animation-play-state": "running", "animation-play-state": "running"}); //plays slider 
    } 
    else { 
    $("#b").addClass("run"); //Adds animation class 
    } 
}); 
$(".hoverPanel").on("mouseleave", function(){ 
    $(".run").css({"-webkit-animation-play-state": "paused", "animation-play-state": "paused"}); //pauses slider 
    pauseVid(); // run pauseVid function 
});