Partage

[JS] Arriver à un résultat similaire

Sujet résolu
14 septembre 2017 à 11:39:48

Bonjour à tous,

Je suis actuellement en stage et novice en JS, j'aimerais arriver à reproduire ce genre de chose (voir image ci-dessous):

Je connais le script pour faire le toggle mais ce que j'aimerais c'est quand je click sur le div:

"HTML ET CSS: deux langages pour créer un site web"

la flèche fasse une rotation en même temps que le toggle.

C'est la ou je sèche complet. Que faut-il utiliser pour faire pivoter une icône?J'ai fais quelques recherches sur le net et j'ai vu la balise canvas est ce que c'est la bonne solution? la seule?

Je suis un peu perdu, j'espère que je suis assez clair malgré les fautes.

Merci d'avance

14 septembre 2017 à 12:40:24

Bonjour,

maintenant avec CSS3 les animations c'est du gâteau, alors un petit mélange JavaScript/CSS devrait faire l'affaire :

https://stackoverflow.com/questions/19126432/rotate-a-div-using-javascript (première réponse très détaillée)

Sinon tu as aussi les canvas en effet mais bon selon comment tu l'utilise tu auras peut être des petits soucis de compat. (https://caniuse.com/#search=canvas)

Cdlt

Développeur web aimanté par les projets prometteurs
14 septembre 2017 à 13:00:30

Salut Kokoal,

Merci pour tes réponses,

Est que la première solution supporte une image en format png?

14 septembre 2017 à 13:38:23

Le format n'a pas d'importance puisque si tu regarde bien on agit sur le bloc (dans le cas présent une "div", mais rien ne t'empêche d'appliquer la technique à ta balise "img").

Je ne sais pas si tu as vu mais sur stackoverflow tu as un petit lien "show code snippet" puis "Run code snippet" sur la première réponse au poste, tu pourras voir tout le code et le résultat en direct.

Développeur web aimanté par les projets prometteurs
14 septembre 2017 à 16:04:08

Re,

Voilà j'ai réussi à faire ce que je voulais je te remercie pour ton aide.

Tony

[JS] Arriver à un résultat similaire

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown