Animation d'un accès rapide par MaelAristide - page 1

MaelAristide

8 octobre 2019 à 18:17:23

Bonjour,

Je cherche à créer deux animations sur une div :

-Tout d'abord lorsqu'on hover sur cette div, la div doit changer de couleur.

-Puis si je clique sur cette div, elle doit faire une animation venant de l'API Anime.JS.

Je cherche à faire les animations en Javascript ducoup.

Voici le code :

var p = document.getElementsByClassName('.remplacement'),
	 p.addEventListener("mouseover", function(event) {
			event.target.style.color = "#6039A7",
			setTimeout(function() {
				event.target.style.color = "#103d82";
			}, 500);
		}, false);
		p.onclick = anime({
			targets: '.remplacement',
			borderRadius: ['0%', '50%'],
			easing: 'easeInOutQuad'
		});

HTML

<aside class = "offset-md-1 col-lg-3">
					<div class="row remplacement"></div>
					
					<div class="row accès_rapide">
						<p>Accès Rapide</p>
					</div>
					<div class="row accès_rapide">
						<p>Contact</p>
					</div>
					<div class="row accès_rapide">
						<p>Revue Biannuelle</p>
					</div>
					<div class="row accès_rapide">
						<p>Rapports</p>
					</div>
					<div class="row accès_rapide">
						<p>Visitez votre patrimoine</p>
					</div>

				</aside>

Votre aide me sera très précieuse, merci d'avance.

Yaroo

8 octobre 2019 à 23:44:53

Bonjour

Pour les couleur, CSS est votre ami

<!DOCTYPE html>
<html> <head></head>
<style>
.nicecolor 
{
      color:black;
      width:200px;
      height:200px;
      background-color:yellow;
}

.nicecolor:hover 
{
      background-color:black;
      color:yellow;
      text-align: center
}
</style>

<body>
    <div class = "nicecolor"> Hello</div>
</body> </html>

MaelAristide

9 octobre 2019 à 11:23:42

Merci pour votre réponse, qu'en est-il de l'animation javascript ? Je ne comprend pas pourquoi cela ne marche pas...

Yaroo

9 octobre 2019 à 15:29:05

Bonjour

Je suis pas trop animation, mais une petite recherche sur google: animation en javascript peut te donner des idées.

coolswing

9 octobre 2019 à 15:49:37

Bonjour,

Il va falloir que tu apprennes as debugger ton code et pour cela il y a la console javascript sur chrome/firefox/IE/Edge (le reste devrai aussi avoir un console mais n'en étant pas certain je veux pas dire de connerie)

Ensuite il faut que tu lise les docs quand tu utilises des fonctions

exemple avec getElementsByClassName qui n'est pas appelé correctement et dont la doc nous dit:

var elements = element.getElementsByClassName(names);

elements est une HTMLCollection de référence vers les élements trouvés.
names est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.
element est n'importe quel Element du document.

donc names ne contient pas de sélecteur mais des noms de class, donc au lieu de

var p = document.getElementsByClassName('.remplacement')

tu devrais l'appeler comme ça (sans le . car on sais déjà qu'on cherche une classe):

var p = document.getElementsByClassName('remplacement')

tu aurais pus déjà voir que ta variable p ne contenait rien avec un console.log de ta variable et un peu de recherche.
Le reste ne va pas non plus mais essaies déjà un premier debug et reviens vers nous ensuite.

-
Edité par coolswing 9 octobre 2019 à 15:52:03

Animation d'un accès rapide

Supprimer

Modérer

Signaler le message aux modérateurs