+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut Animations visuelles grâce à Animate.css



    Je vous propose une traduction de l'article anglophone Css animate effects we can learn from Animate.css par Paul Underwood : CSS3 : animations visuelles avec Animate.css.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    CSS3 : animations visuelles avec Animate.css.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 334
    Points : 8 094
    Points
    8 094

    Par défaut

    Très intéressant et enrichissant comme article

    P-S: dommage que la page de démonstration de l'auteur ne fonctionne pas avec la dernière version de Firefox 14.0.1 alors que celle-ci fonctionne très bien sous Firefox et Chrome dernière version.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  3. #3
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut

    Citation Envoyé par Torgar Voir le message
    Très intéressant et enrichissant comme article

    P-S: dommage que la page de démonstration de l'auteur ne fonctionne pas avec la dernière version de Firefox 14.0.1 alors que celle-ci fonctionne très bien sous Firefox et Chrome dernière version.
    C'est effectivement un problème récent que j'ai remarqué, je l'ai signalé à l'auteur qui m'a assuré qu'il chercherai l'origine du problème et le corrigerai dès que possible
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  4. #4
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 334
    Points : 8 094
    Points
    8 094

    Par défaut

    Merci pour nous de l'avoir prévenu
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  5. #5
    Membre émérite

    Homme Profil pro
    Software Developer
    Inscrit en
    mars 2008
    Messages
    1 470
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Software Developer

    Informations forums :
    Inscription : mars 2008
    Messages : 1 470
    Points : 2 367
    Points
    2 367

    Par défaut

    Quelles sont les versions de navigateur compatible?

  6. #6
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut

    Toutes les dernières versions, il n'y a rien de nouveau ici, c'est du code CSS3 donc compatible avec les versions récentes des différents navigateurs.

    Le problème que soulevait Torgar n'est pas un problème de compatibilité mais bien de code, puisque la démo sur le site officiel du projet fonctionne très bien sous Firefox 14
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  7. #7
    Membre du Club Avatar de Tryp'
    Homme Profil pro
    Inscrit en
    novembre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations forums :
    Inscription : novembre 2008
    Messages : 48
    Points : 53
    Points
    53

    Par défaut

    Bonjour,

    Comment pouvons-nous utiliser ces animations ? J'ai bien téléchargé un fichier animate.css, mais je ne sais pas quoi en faire. Quand j'applique simplement un style à un de mes éléments HTML, rien ne change.

    Par exemple, j'aimerai qu'au clic sur un bouton, l'animation se déclenche. Cela est-il possible ? Si oui, suffit-il d'appliquer le style au bouton, ou bien comment cela se passe-t-il ? Faut-il inclure du javascript ?

    Merci bien pour vos réponses, et pour cet article intéressant.

    Tryp, un type qui aime bien les nouveautés CSS3

  8. #8
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Recherche emploi
    Inscrit en
    août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Gard (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Recherche emploi

    Informations forums :
    Inscription : août 2007
    Messages : 2 334
    Points : 8 094
    Points
    8 094

    Par défaut

    Salut,

    Il suffit d'inclure le fichier CSS comme d'habitude et d'appliquer la classe CSS voulue à l'élément choisi.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div class="shake">Secouez-moi !!!</div>

    Pour la gestion du clic, tu peux regarder du côté des méthodes removeClass et addClass de jQuery si tu l'utilises déjà dans un de tes projets.
    Sinon, sans jQuery, comme tu as pu le voir avec le nom des méthodes, le principe est d'ajouter/retirer la classe lors du clic. Regarde dans ce cas la propriété javascript "className". Tu devrais trouver ton bonheur.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 650
    Points : 91 548
    Points
    91 548
    Billets dans le blog
    20

    Par défaut

    Regarde dans ce cas la propriété javascript "className".
    Une option plus efficace (mais pas compatible IE < 9) est d'utiliser HTMLElement.classList.add() et HTMLElement.classList.remove()
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre du Club Avatar de Tryp'
    Homme Profil pro
    Inscrit en
    novembre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations forums :
    Inscription : novembre 2008
    Messages : 48
    Points : 53
    Points
    53

    Par défaut

    Tout d'abord, merci bien pour vos réponses, même si j'aime les nouveautés CSS3, je ne suis pas un grand fan de Javascript

    Citation Envoyé par Bovino Voir le message
    Une option plus efficace (mais pas compatible IE < 9) est d'utiliser HTMLElement.classList.add() et HTMLElement.classList.remove()
    J'ai testé avec ces éléments là, n'ayant jamais travaillé avec Jquery, mais ça n'a pas l'air de fonctionner. Voici mon maigre test :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function test() {
        document.getElementById('osef').classList.add('swing');
        document.getElementById('osef').classList.remove('swing');
    }
     
    <div id="osef">
        <a class="buttons" href="#" onclick="test()">Un test</a>
    </div>
    En débuggant avec Firebug, j'ai l'impression que la classe s'ajoute bien à mon élément HTML, mais ne fait rien. Peut-être faut-il inclure une sorte de sleep ?

    En tout cas, le navigateur est bon (Firefox 15), je parviens à voir les animations sur les sites de démonstration.

    Edit : De plus, le fichier CSS est bien chargé, et le code Javascript est directement dans les sources HTML. On ne sait jamais

  11. #11
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut

    Au vu de ta fonction, c'est logique que rien ne se passe, car tu ajoutes la classe pour la retirer juste après.
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  12. #12
    Membre du Club Avatar de Tryp'
    Homme Profil pro
    Inscrit en
    novembre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bas Rhin (Alsace)

    Informations forums :
    Inscription : novembre 2008
    Messages : 48
    Points : 53
    Points
    53

    Par défaut

    Oui, ça me paraissait un peu bizarre aussi, mais je pensais que l'animation aurait le temps de se lancer avant.

    En retirant la ligne pour enlever la classe, ça ne fonctionne toujours pas. Cependant, en ajoutant une seconde classe (animated) au div, ça fonctionne correctement.

    En résumé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function test() {
        var div = document.getElementById('osef');
        div.classList.add('swing');
        div.classList.add('animated');
     
        setTimeout(function() {
            document.getElementById('idDuForm').submit()
        }, 2000);
    }
     
    <div id="osef">
        <a class="buttons" href="#" onclick="test()">Un test</a>
    </div>
    Merci pour votre aide à tous les trois !

Discussions similaires

  1. Centrer une animation jquery isotope en css ou javascript ?
    Par Gilles_73 dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 22/08/2012, 11h44
  2. [CSS 3] Animations visuelles grâce à Animate.css
    Par FirePrawn dans le forum Mise en page CSS
    Réponses: 11
    Dernier message: 08/08/2012, 12h08
  3. Réponses: 3
    Dernier message: 12/07/2012, 20h01
  4. Animation d'une image / CSS
    Par Trunks dans le forum JavaScript
    Réponses: 3
    Dernier message: 05/12/2005, 16h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo