|
|
1
Kaiido NickSlash
6 年前
每次视频开始一个新的循环时,只需重新启动整个动画就可以实现。
要检测此事件,您可以侦听媒体事件
onplaying
.
要重新启动动画,可以设置类(例如
.playing
)在父元素上,该元素将指示动画何时应处于活动状态,然后移除该类和
force a
reflow
这样浏览器就可以停用动画,最后设置播放类。
var header = document.querySelector('.header-section');
myVideo.onplaying = function(e) {
header.classList.remove('playing'); // deactivate the animation
header.offsetWidth; // force a reflow
header.classList.add('playing'); // reactivate the animation
}
body {
background-color: #02001b;
}
.wrapper {
position: relative;
width: 1455px;
height: 799px;
margin: 0 auto;
}
.header-section section {
width: 45%;
height: 200px;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
}
.as-main-heading {
color: #fff;
text-transform: uppercase;
font-size: 36px;
font-weight: 300;
}
.as-main-excerpt {
color: #fff;
font-size: 18px;
}
.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
position: absolute;
left: 0;
right: 0;
animation-duration: 12s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* The animation is set only when the parent has the .playing class */
.header-section.playing .first {
animation-name: anim-1;
}
.header-section.playing .second {
animation-name: anim-2;
}
.header-section.playing .third {
animation-name: anim-3;
}
.header-section.playing .fourth {
animation-name: anim-4;
}
@keyframes anim-1 {
0%,
8% {
opacity: 0;
top: 54%;
}
8%,
16% {
bottom: 25%;
top: 54%;
opacity: 1;
}
25%,
100% {
bottom: 50%;
top: 25%;
opacity: 0;
}
}
@keyframes anim-2 {
0%,
25% {
opacity: 0;
}
32%,
40% {
bottom: 25%;
opacity: 1;
}
50%,
100% {
bottom: 50%;
opacity: 0;
}
}
@keyframes anim-3 {
0%,
50% {
opacity: 0;
}
58%,
66% {
bottom: 25%;
opacity: 1;
}
75%,
100% {
bottom: 50%;
opacity: 0;
}
}
@keyframes anim-4 {
0%,
75% {
opacity: 0;
}
81%,
92% {
bottom: 25%;
opacity: 1;
}
100% {
bottom: 50%;
opacity: 0;
}
}
<div class="wrapper">
<video autoplay muted loop id="myVideo" height="800px;">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="landing-header">
<div class="header-section">
<section>
<h2 class="as-main-heading">Story of a bunny</h2>
<div class="as-main-excerpt first">
<p>Here comes a butterfly</p>
</div>
<div class="as-main-excerpt second">
<p>Bunny See's the butterfly</p>
</div>
<div class="as-main-excerpt third">
<p>Butterfly Sitting on the flower</p>
</div>
<div class="as-main-excerpt fourth">
<p>An apple falls on the butterfly</p>
</div>
</section>
</div>
</div>
</div>
关于改变一切的评论(即你需要有一个暂停和播放功能),那么最好的办法可能是完全摆脱CSS动画,从JS控制你的所有元素(在CSS转换的帮助下):
var header = document.querySelector('.header-section');
var chapters = [0, 0.96, 1.92, 2.9, 4.2, 5.4, 6.5, 7.2, 9, 11];
var classes = ['', 'first-in', 'first-out', 'second-in', 'second-out', 'third-in', 'third-out', 'fourth-in', 'fourth-out', ''];
var currentFrame = 0;
myVideo.ontimeupdate = function() {
var nextFrame = (currentFrame + 1) % chapters.length;
if(myVideo.currentTime >= chapters[nextFrame] || myVideo.currentTime < chapters[currentFrame]) {
// if(classes[currentFrame]) header.classList.remove(classes[currentFrame]);
if(classes[nextFrame]) header.classList.add(classes[nextFrame]);
currentFrame = nextFrame;
if(!nextFrame) // did loop
classes.forEach(remove);
header.offsetTop;
}
};
function remove(classname) {
if(classname)header.classList.remove(classname);
}
onclick = function(e) {
if(myVideo.paused) myVideo.play();
else myVideo.pause();
}
body {
background-color: #02001b;
}
.wrapper {
position: relative;
width: 1455px;
height: 799px;
margin: 0 auto;
}
.header-section section {
width: 45%;
height: 200px;
margin: 0 auto;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
}
.as-main-heading {
color: #fff;
text-transform: uppercase;
font-size: 36px;
font-weight: 300;
}
.as-main-excerpt {
color: #fff;
font-size: 18px;
}
.header-section .as-main-excerpt {
position: absolute;
left: 0;
right: 0;
opacity: 0;
top: 54%;
transition-property: opacity bottom top;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
.header-section.first-in .first,
.header-section.second-in .second,
.header-section.third-in .third,
.header-section.fourth-in .fourth {
bottom: 25%;
top: 54%;
opacity: 1;
}
.header-section.first-out .first,
.header-section.second-out .second,
.header-section.third-out .third,
.header-section.fourth-out .fourth {
bottom: 50%;
top: 25%;
opacity: 0;
}
video {
pointer-events: none;
}
<div class="wrapper">
<video autoplay muted loop id="myVideo" height="800px;">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<div class="landing-header">
<div class="header-section playing">
<section>
<h2 class="as-main-heading">Story of a bunny</h2>
<div class="as-main-excerpt first">
<p>Here comes a butterfly</p>
</div>
<div class="as-main-excerpt second">
<p>Bunny See's the butterfly</p>
</div>
<div class="as-main-excerpt third">
<p>Butterfly Sitting on the flower</p>
</div>
<div class="as-main-excerpt fourth">
<p>An apple falls on the butterfly</p>
</div>
</section>
</div>
</div>
</div>
|
