Я создаю цифровой портфель, демонстрирующий баннеры HTML5. Я создаю это с основанием Bootstrap и используя карусель Bootstrap для своих пользователей, чтобы перелистывать различные рекламные объявления для HTML5. Я использовал IFRAME, чтобы отобразить эти баннеры в карусели, и она работает, вот мой код:Кассета Bootstrap с содержимым баннера HTML5 - как приостановить анимацию, пока пользователь не просмотрит этот слайд?
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
<li data-target="#carouselvideo" data-slide-to="1"></li>
<li data-target="#carouselvideo" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe src="/digital-portfolio/banners/1/300x600" width="300" height="600" frameborder="0"></iframe>
</div>
<div class="item">
<iframe src="/digital-portfolio/banners/2/300x600" width="300" height="600" frameborder="0"></iframe>
</div>
<div class="item">
<iframe src="/digital-portfolio/banners/3/300x600" width="300" height="600" frameborder="0"></iframe>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Проблема с этим состоит в том, что баннер анимация играть весь путь до конца, независимо от того, что скользит вас в данный момент. Итак, для второго и третьего баннеров, как только пользователь нажмет на них, чтобы просмотреть эти баннеры, они уже закончили играть свою анимацию и опираются на последний кадр. Я мог бы зацикливать анимацию, но идеальной функциональностью является то, что анимация не начинается, пока пользователь не окажется на этом слайде. Вот пример кода JavaScript HTML5, с которым я работаю. Все они обычно используют NanoTween для своей анимации.
var loading = getElement("id", "loading");
var banner = getElement("id", "banner");
var clickTagButton = getElement("id", "clickTagButton");
var seq1 = getElement("id", "seq1");
var seq1_BW = getElement("id", "seq1_BW");
var seq1_mask = getElement("id", "seq_mask1");
var copy1 = getElement("id", "copy1");
var copy3 = getElement("id", "copy3");
var copy4 = getElement("id", "copy4");
var name1 = getElement("id", "name1");
var name2 = getElement("id", "name2");
var btn = getElement("id", "btn");
var seq2 = getElement("id", "seq2");
var seq2_BW = getElement("id", "seq2_BW");
var seq3 = getElement("id", "seq3");
var seq3_BW = getElement("id", "seq3_BW");
function init() {
setTimeout(function() {
startAnimation();
}, 100);
}
function startAnimation() {
loading.parentNode.removeChild(loading);
banner.style.visibility = "visible";
var seqSpeed = 0.15;
var seq1_delay = 3;
var seq2_delay = 6;
var seq3_delay = 7.1;
var fadeSpeed = 0.3;
var fadeSpeed_prod = 1;
seq1.playbackRate = 1.3;
seq2.playbackRate = 1;
seq3.playbackRate = 1;
NanoTween.delayedCall(0.1, function() {
seq1.play();
});
NanoTween.delayedCall(3.5, function() {
seq1.pause();
});
NanoTween.to(seq1, fadeSpeed, {
opacity: 0,
ease: "ease-out",
delay: 3.1
});
NanoTween.to(copy1, fadeSpeed, {
clip: "rect(306px,300px,529px,15px)",
ease: "linear",
delay: 3.1
});
//frame mask animation from top left
NanoTween.to(name1, fadeSpeed, {
opacity: 0,
ease: "ease-out",
delay: 3
});
NanoTween.to(seq1_mask, fadeSpeed_prod, {
transform: "translate(848px, 150px) rotate(45deg)",
ease: "ease-out",
delay: 5.2
});
NanoTween.to(seq1_BW, fadeSpeed_prod, {
transform: "translate(-598px, 597px) rotate(-45deg)",
ease: "ease-out",
delay: 5.2
});
NanoTween.to(copy1, fadeSpeed, {
opacity: 0,
ease: "ease-out",
delay: 5.2
});
NanoTween.delayedCall(5.2, function() {
seq2.play();
});
//NanoTween.delayedCall(seq1_delay + 3.7, function(){seq2.pause();});
NanoTween.to(seq2, fadeSpeed, {
opacity: 0,
ease: "ease-out",
delay: 6.2
});
//frame mask animation from top left
NanoTween.delayedCall(seq2_delay, function() {
seq3.play();
});
NanoTween.to(copy3, fadeSpeed, {
clip: "rect(235px, 274px, 424px, 16px)",
ease: "linear",
delay: seq3_delay
});
NanoTween.to(name2, fadeSpeed, {
opacity: 1,
ease: "ease-out",
delay: seq3_delay
});
NanoTween.to(copy4, fadeSpeed, {
transform: "translate(0px, 0px)",
ease: "ease-out",
delay: seq3_delay
});
NanoTween.to(copy4, fadeSpeed * 2, {
opacity: 1,
ease: "ease-out",
delay: seq3_delay
});
NanoTween.to(seq3, fadeSpeed, {
opacity: 0,
ease: "ease-out",
delay: seq3_delay += seqSpeed
});
NanoTween.to(btn, fadeSpeed, {
clip: "rect(0px,209px ,45px ,0px)",
ease: "linear",
delay: seq3_delay + 0.5
});
}
function getElement(element, id) {
var mc;
switch (element) {
case "id":
mc = document.getElementById(id);
break;
case "class":
mc = document.getElementsByClassName(id);
break;
}
return mc;
}
window.onload = function() {
init();
};
Есть ли способ, чтобы инициализировать анимацию, чтобы начать, как только пользователь находится на этом слайде, или потенциально вызвать анимацию из щелкая управления карусельного?
Вот изображение того, что слайдер выглядит следующим образом: 