Partage
  • Partager sur Facebook
  • Partager sur Twitter

[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

    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter
      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?

        • Partager sur Facebook
        • Partager sur Twitter
          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.

          • Partager sur Facebook
          • Partager sur Twitter
          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

            • Partager sur Facebook
            • Partager sur Twitter

            [JS] Arriver à un résultat similaire

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown