Gérer animation CSS en Js ou Jquery
Bonjour,
Voila je rencontre un petit problème avec mon code.
J'essaye de mettre mon icon "pause" en pause, et mon icon "play" en play.
Mon code est écrit en HTML avec des id et des class, et mon CSS fait la forme, mais surtout intègre un keyframes avec l'animation que je souhaite, au démarrage de la page.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Réservation de vélo à Toulouse</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"></head>
<body>
<header>
</header>
<section>
<div id="slider">
<div id="animation">
<img src="Images/plan1.PNG" alt="plan" id="img1">
<img src="Images/plan2.PNG" alt="plan" id="img2">
<img src="Images/plan3.PNG" alt="plan" id="img3">
<img src="Images/plan4.PNG" alt="plan" id="img4">
<img src="Images/plan5.PNG" alt="plan" id="img5">
<img src="Images/plan6.PNG" alt="plan" id="img6">
<img src="Images/plan7.PNG" alt="plan" id="img7">
<img src="Images/plan1.PNG" alt="plan" id="img8">
</div>
<div id="icons_conteneur">
<i class="fas fa-arrow-alt-circle-left fa-2x"></i>
<img id="left_arrow_key" class="arrow_keys" src="Images/Icons/arrow-left-icon.png" alt="">
<i class="fas fa-play-circle fa-2x"></i>
<i class="fas fa-pause-circle fa-2x"></i>
<img id="right_arrow_key" class="arrow_keys" src="Images/Icons/arrow-right-icon.png" alt="">
<i class="fas fa-arrow-alt-circle-right fa-2x"></i>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
CSS :
@keyframes animationSlider{
from,10%,to {margin-left:-0px;}14%,24%{margin-left:-768px;}
28%,38%{margin-left:-1536px;}
42%,52%{margin-left:-2304px;}
56%,66%{margin-left:-3072px;}
70%,80%{margin-left:-3840px;}
84%,94%{margin-left:-4608px;}
98%, 100%{margin-left:-5376px;}
}
slider{width: 768px;
overflow: hidden;
border: 2px solid rgb(111, 111, 111);
box-shadow: -3px 3px 5px rgb(84, 84, 84);
margin: 50px auto;}
animation{display: flex;
animation: animationSlider 40s ease 0s infinite;}
icons_conteneur{background-color: rgb(140, 140, 140);
padding: 4px 0px 10px 3px;
color: whitesmoke;
text-align: center; }
.fa-arrow-alt-circle-left{
margin-right: 70px;
}
.fa-arrow-alt-circle-right{
margin-left: 70px;
}
.arrow_keys{
width: 50px;
height: 50px;
margin-bottom: -12px;
}
padding-right: 180px;
}
padding-left: 180px;}
i:hover{
color: rgb(17, 122, 187);
}
Js :
Je cherche votre aide!
Ce que je veux
Clic sur icon pause : mettre l'animation CSS, à savoir le défilement des images, en pause.
Clic sur icon play : reprendre l'animation.
Ce que j'obtiens
Rien, après de nombreux essais et recherches sur internet, je ne trouve pas la solution, sauf celle d'écrire mon animation en Js et de la gérer comme telle.
8 réponses
Une piste en CSS (attention version de travail) : https://developer.mozilla.org/fr/docs/Web/CSS/animation-play-state
Merci pour ta réponse YiuJia, j'ai vu tout ça en me renseignant. Je pense que je vais créer l'animation en Jquery directement pour arrêter de me prendre la tête. C'est dommage car il doit bien y avoir un moyen de contrôler l'animation CSS en Js mais je trouve pas!
Par ailleurs j'ai déjà essayé de créer une classe avec animation-play-state en CSS et l'introduire dans mons mon fichier Js avec une condition et add.class, mais ça marchait pas.
Un exemple avancé de son utilisation : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Merci pour tes réponses, je vais opter pour la méthode Jquery. Ce code est assez lourd, j'avoue que je m'y perds un peu en compréhension! Il doit y avoir un moyen plus souple pour arriver à mes fins.
The best binoculars for stargazing, birdwatching, hiking, camping, and just for ... What I Tell My Friends Who Ask Me What Binoculars to Buy.
http://hawkesremotes.com/choose-Which-binoculars-are-right-for-you.html
The quantity of the client at Jungle Scout is 99,374 or more and as yet tallying. Wilderness Scout is available in 12 nations.
Wilderness Scout is the main decision for [http://wingsfm.com/jungle-scout-discount/](jungle scout discount code) item examine among top Amazon venders. The two kinds of items which were accessible at jungleScout, for example, web application and Chrome expansion.
The makers of Bigg Boss Telugu have finally unveiled the first look of the upcoming third season of the show. using bigbossteluguvote.fun to vote.http://www.bigbossteluguvote.fun