I'm making a website where a pizza can be personalized. When the button "Deliver pizza" is clicked, the user get redirected to a new html where an animation will be played that lets them know the pizza is on the way.
What I have now just keeps playing the same animation instead of a random one everytime.
Html where the animation will be played: (playAnimation.html)
<img src="img/pizzadeliverer1.png" alt="pizza deliverer" id='pizzaDeliverer' class="letTheDelivererDrive">
CSS:
.letTheDelivererDrive {
visibility: visible;
animation: animationFrames ease-in-out 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease-in-out 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation: animationFrames ease-in-out 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
/*FF 5+*/
-o-animation: animationFrames ease-in-out 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
/*Not implemented yet*/
-ms-animation: animationFrames ease-in-out 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
/*IE 10+*/
}
JS:
function changeHTML() {
if (deliverPizzaButton.classList.contains('readyToDeliver')) { // if every step is filled in
window.location.href = 'playAnimation.html'; //
}
}
var pizzaDeliverGuys = ["img/pizzadeliverer1.png", "img/pizzadeliverer2.png", "img/pizzadeliverer3.png"];
function playAnimation() {
var chosenDeliveryGuy = Math.floor((Math.random() * pizzaDeliverGuys.length));
chosenDeliveryGuy.classlist.add('letTheDelivererDrive');
}
deliverPizzaButton.addEventListener('click', changeHTML, playAnimation); // this button is on the index.html
if (window.location.href == 'playAnimation.html') {
playAnimation();
}
Aucun commentaire:
Enregistrer un commentaire