1. дома
  2. Вопрос и ответ
  3. CSS3 Анимация play/pause с js

CSS3 Анимация play/pause с js

2015-05-05 3 views
2

Мне нужна анимация на моем веб-сайте, которая может быть приостановлена ​​и продолжена. Я пробовал час, чтобы получить эту работу, и, наконец, где-то остановился только на одном из изображений, которые требуют паузы. Я не могу решить, как приостановить все изображения, может ли кто-нибудь мне помочь?CSS3 Анимация play/pause с js

// JavaScript Document 
 
var play = document.getElementById("play"); 
 
var pause = document.getElementById("pause"); 
 
var animated = document.getElementsByClassName("animated"); 
 
play.addEventListener('click', playAnimation); 
 
pause.addEventListener('click', pauseAnimation); 
 

 
function playAnimation() { 
 
    for (var i = 0; i < animated.length; i += 1) { 
 
    animated[i].style.WebkitAnimationPlayState = "running"; 
 
    animated[i].style.animationPlayState = "running"; 
 
    } 
 
} 
 

 
function pauseAnimation() { 
 
    for (var i = 0; i < animated.length; i += 1) { 
 
    animated[i].style.WebkitAnimationPlayState = "paused"; 
 
    animated[i].style.animationPlayState = "paused"; 
 
    } 
 
}
@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
main { 
 
    display: block; 
 
    background-color: #fff; 
 
} 
 
.container { 
 
    width: 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    padding: 0 20px; 
 
} 
 
header { 
 
    height: 75px; 
 
    background: #ebebeb url(img/taylor%20logo.png) no-repeat center; 
 
    background-size: 150px 47.75px; 
 
} 
 
section.module.parallax { 
 
    height: 600px; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
section.module.parallax-1 { 
 
    background-image: url(img/tay1.png); 
 
} 
 
section.module.parallax-2 { 
 
    background-image: url(img/taylor-swift-009.jpg); 
 
} 
 
section.module.parallax-3 { 
 
    background-image: url(img/Taylor-Swift.jpg); 
 
} 
 
section.module.content { 
 
    padding: 40px 0; 
 
    background: #fff0fb; 
 
} 
 
section.module p { 
 
    margin-bottom: 40px; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
    color: #7a7a7a; 
 
} 
 
footer { 
 
    padding: 20px 5px; 
 
    background: #EBEBEB; 
 
    color: #514f4f; 
 
} 
 
footer nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: right; 
 
} 
 
footer nav li { 
 
    display: inline-block; 
 
} 
 
footer nav a { 
 
    display: block; 
 
    margin: 0 5px; 
 
    color: #fff; 
 
} 
 
.social:hover { 
 
    -webkit-transform: scale(1.2); 
 
    transform: scale(1.2); 
 
} 
 
.social { 
 
    -webkit-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
} 
 
/*****ANIMATION*****/ 
 

 
#animation { 
 
    height: 450px; 
 
    width: 1000px; 
 
    background: url(img/scene.png) fixed no-repeat center; 
 
} 
 
#animation:hover { 
 
    animation-play-state: paused; 
 
    -webkit-animation-play-state: paused; 
 
} 
 
.flash { 
 
    position: relative; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0 auto; 
 
    background: url(img/spritesheet.png) no-repeat left center; 
 
} 
 
@keyframes play { 
 
    100% { 
 
    background-position: -100px; 
 
    } 
 
} 
 
@-webkit-keyframes play { 
 
    100% { 
 
    background-position: -100px; 
 
    } 
 
} 
 
.flash-1 { 
 
    animation: play .5s steps(2) infinite; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    top: 50px; 
 
    left: 400px; 
 
} 
 
.flash-2 { 
 
    left: 100px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .2s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .2s; 
 
} 
 
.flash-3 { 
 
    left: 350px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .3s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .3s; 
 
} 
 
.flash-4 { 
 
    left: 70px; 
 
    bottom: 80px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: 1s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.flash-5 { 
 
    left: 375px; 
 
    bottom: 70px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .2s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .2s; 
 
} 
 
.flash-6 { 
 
    bottom: 100px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .2s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .2s; 
 
} 
 
.flash-7 { 
 
    bottom: 290px; 
 
    left: 170px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .4s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .4s; 
 
} 
 
.flash-8 { 
 
    bottom: 150px; 
 
    left: 200px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .3s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .3s; 
 
} 
 
.flash-9 { 
 
    bottom: 370px; 
 
    left: 450px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .7s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .7s; 
 
} 
 
.flash-10 { 
 
    bottom: 300px; 
 
    left: 100px; 
 
    animation: play .5s steps(2) infinite; 
 
    animation-delay: .9s; 
 
    -webkit-animation: play .5s steps(2) infinite; 
 
    -webkit-animation-delay: .9s; 
 
} 
 
.speech img { 
 
    position: absolute; 
 
    left: 0; 
 
    animation-name: speechFadeInOut; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 1s; 
 
    animation-direction: alternate; 
 
    -webkit-animation-name: speechFadeInOut; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-duration: 1s; 
 
    -webkit-animation-direction: alternate; 
 
    -webkit-transition: opacity 1s linear; 
 
    -moz-transition: opacity 1s linear; 
 
    -o-transition: opacity 1s linear; 
 
    transition: opacity 1s linear; 
 
} 
 
.speech { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.speech-1 { 
 
    bottom: 750px; 
 
    left: 420px; 
 
} 
 
.speech-2 { 
 
    bottom: 900px; 
 
    left: 900px; 
 
} 
 
@keyframes speechFadeInOut { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    45% { 
 
    opacity: 0.2; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@-moz-keyframes speechFadeInOut { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    45% { 
 
    opacity: 0.2; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-webkit-keyframes speechFadeInOut { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    45% { 
 
    opacity: 0.2; 
 
    } 
 
    55% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
} 
 
#taylorCartoon { 
 
    position: relative; 
 
    bottom: 380px; 
 
    left: 820px; 
 
    animation-name: taylorWalk; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: 1; 
 
    animation-duration: 10s; 
 
    animation-direction: alternate; 
 
    animation-delay: 2s; 
 
    -webkit-animation-name: taylorWalk; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-duration: 10s; 
 
    -webkit-animation-direction: alternate; 
 
    -webkit-animation-delay: 2s; 
 
} 
 
@keyframes taylorWalk { 
 
    from { 
 
    left: 820px; 
 
    } 
 
    to { 
 
    left: 420px; 
 
    opacity: 0%; 
 
    } 
 
} 
 
@-webkit-keyframes taylorWalk { 
 
    from { 
 
    left: 820px; 
 
    } 
 
    to { 
 
    left: 420px; 
 
    opacity: 0%; 
 
    } 
 
} 
 
@-moz-keyframes taylorWalk { 
 
    from { 
 
    left: 820px; 
 
    } 
 
    to { 
 
    left: 420px; 
 
    opacity: 0%; 
 
    } 
 
} 
 
.control { 
 
    height: 60px; 
 
    width: 60px; 
 
    border: 0; 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
.playHolder { 
 
    background: url(img/play.png) no-repeat; 
 
    background-size: 100%; 
 
    margin-left: 100px; 
 
} 
 
.pauseHolder { 
 
    background: url(img/pause.png) no-repeat; 
 
    background-size: 100%; 
 
    margin-left: 100px; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="style.css" media="all" rel="stylesheet"> 
 
    <script src="modernizr.js"></script> 
 
    <title>Taylor Swift</title> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div> 
 
     <header> 
 
     </header> 
 
    </div> 
 
    <main> 
 
     <section class="module parallax parallax-1"> 
 
     <div class="container"> 
 
     </div> 
 
     </section> 
 
     <section class="module content"> 
 
     <div class="container"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur 
 
      adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p> 
 
     </div> 
 
     </section> 
 
     <section class="module parallax parallax-2"> 
 
     <div class="container"> 
 
     </div> 
 
     </section> 
 
     <section class="module content"> 
 
     <div class="container"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur 
 
      adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p> 
 
     </div> 
 
     </section> 
 
     <section class="module parallax parallax-3"> 
 
     <div class="container"> 
 
     </div> 
 
     </section> 
 
     <section class="module content"> 
 
     <div class="container"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur 
 
      adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p> 
 
     </div> 
 
     </section> 
 
     MUSIC VIDEO 
 
     <section class="module content"> 
 
     <div class="container"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil consequuntur, nesciunt dicta, esse rem ducimus itaque quis. Adipisci ullam nam qui illum debitis sit ad in delectus, repudiandae non dolorum! Lorem ipsum dolor sit amet, consectetur 
 
      adipisicing elit. Suscipit veritatis, facere aliquid itaque tempore consequatur nihil sint enim aliquam id saepe magnam totam repellat placeat a fugit nulla molestias voluptas.</p> 
 
     </div> 
 
     </section> 
 
     <div id="animation" class="animated"> 
 
     <div class="flash flash-1" class="animated"> 
 
     </div> 
 
     <div class="flash flash-2" class="animated"> 
 
     </div> 
 
     <div class="flash flash-3" class="animated"> 
 
     </div> 
 
     <div class="flash flash-4" class="animated"> 
 
     </div> 
 
     <div class="flash flash-5" class="animated"> 
 
     </div> 
 
     <div class="flash flash-6" class="animated"> 
 
     </div> 
 
     <div class="flash flash-7" class="animated"> 
 
     </div> 
 
     <div class="flash flash-8" class="animated"> 
 
     </div> 
 
     <div class="flash flash-9" class="animated"> 
 
     </div> 
 
     <div class="flash flash-10" class="animated"> 
 
     </div> 
 
     <div id="taylorCartoon" class="animated"> 
 
      <img src="img/taylor cartoon .png" width="181" height="300" /> 
 
     </div> 
 
     <div class="speech speech-1" class="animated"> 
 
      <img src="img/SPEECH1.png" width="100" height="99" /> 
 
     </div> 
 
     <div class="speech speech-2" class="animated"> 
 
      <img src="img/speech2.png" width="100" height="99" /> 
 
     </div> 
 
     </div> 
 
     <div> 
 
     <button type="button" class="button" id="play">Play</button> 
 
     <button type="button" class="button" id="pause">Pause</button> 
 
     </div> 
 
    </main> 
 
    <footer> 
 
     <div class="copyright"> 
 
     <small> 
 
       &copy; Lana Yaffe 2015 | Taylor Swift 
 
      </small> 
 
     </div> 
 
     <nav> 
 
     <ul> 
 
      <li class="social"> 
 
      <a href="http://http://taylorswift.tumblr.com/"> 
 
       <img src="img/Tumblr.png" /> 
 
      </a> 
 
      </li> 
 
      <li class="social"> 
 
      <a href="http://twitter.com/taylorswift13"> 
 
       <img src="img/Twitter.png" /> 
 
      </a> 
 
      </li> 
 
      <li class="social"> 
 
      <a href="https://www.facebook.com/TaylorSwift"> 
 
       <img src="img/Facebook.png" /> 
 
      </a> 
 
      </li> 
 
      <li class="social"> 
 
      <a href="https://instagram.com/taylorswift/"> 
 
       <img src="img/Instagram.png" /> 
 
      </a> 
 
      </li> 
 
     </ul> 
 
     </nav> 
 
    </footer> 
 
    </div> 
 
    <script src="js.js"></script> 
 
</body> 
 

 
</html>

источник

2015-05-05 Matt Richardson

+0

Поскольку нам не хватает таблицы стилей, вы можете создать jsFiddle? https://jsfiddle.net/ – Halcyon

+0

Я добавил стили, но здесь https://jsfiddle.net/y6mgpzke/ –

+0

Он отлично работает для меня (даже без исправления пользователя86745458). Я вижу, что коробка перемещается в сторону (изображения не загружаются), и если я нажимаю паузу, она перестает двигаться. – Halcyon

ответ

0

Если вы хотите, чтобы все анимации класса .animated остановить работу вы можете сделать что-то вроде:

body.pause .animated { 
    animation-play-state: paused; 
}

Затем сделайте:

function pause_all() { 
    document.body.className = "pause"; 
} 

function play_all() { 
    document.body.className = ""; 
}

Я не» t знаю, работает ли это или нет, потому что без изображения трудно понять, правильно ли работают анимации.

источник

2015-05-05 01:17:26 Halcyon

+0

извините, где бы я положил, что работал долгое время, уставая хаха –

+0

Я привел пример: https://jsfiddle.net/j0fgzc7k/ – Halcyon

Смежные вопросы

 Смежные вопросы