Stack Overflow em Português Asked by JeanAlves on September 26, 2021
Fiz esse movimento com css e minha dúvida é:
Como eu posso parar esse movimento em um determinado lugar?
Eu posso estilizar de acordo com left, right, top etc. Mas como eu consigo parar o movimento do carro de acordo com meu código abaixo:
Obrigado desde já!
CSS:
<style>
.box{
content: "";
position: absolute;
z-index: 9999;
left: -40%;
animation: bgc 20000ms linear infinite;
}
@keyframes bgc {
0% {left: 140%}
}
</style>
HTML:
<div id="carligue" class="box">
<img style="max-width: 330px !important;" src="https://img2.gratispng.com/20181118/kjz/kisspng-maserati-levante-sports-car-luxury-vehicle-sports-car-images-png-4k-pictures-4k-pictures-5bf15dec03bd89.3228052315425448760153.jpg" >
</div>
Você pode utilizar o jQuery, bem simples, da seguinte forma:
No CSS insira uma classe com a propriedade de animação "paused":
.paused {
-ms-animation-play-state:paused;
-o-animation-play-state:paused;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state: paused;
}
Utilizando o jQuery, coloque a seguinte função no script, que será executa quando ocorrer um clique na div:
$("#carligue").click(function(e){
$(e.currentTarget).toggleClass("paused");
});
O toggleClass irá permitir a pausa e a continuidade, pois ele aciona e remove a classe. Se você quiser apenas parar e não continuar mais, coloque somente um addClass, como no exemplo abaixo:
$("#carligue").click(function(e){
$(e.currentTarget).addClass("paused");
});
Qualquer necessidade avise!! jQuery é um canivete suiço!
Correct answer by Rodrigo Carvalho de Brito on September 26, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP