Animation CSS

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Animation CSS

    Bonjour,
    J'aimerais utiliser des animations comme ceci: http://daneden.github.io/animate.css/
    Il y a le mode d'emploi : https://github.com/daneden/animate.css

    C'est à priori simple à utiliser mais je n'y comprend rien.

    Quelqu'un pourrait t'il m'expliquer:
    • ou mettre le fichier CSS?
    • Comment appel t'on l’animation sur une image ou un texte?


    Merci pour votre aide
    Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

  • #2
    Re : Animation CSS

    les fichiers css doivent etre dans le repertoire css du template.

    ceci est a insérer ds le fichier index.php entre les balise <head> et </head>
    <link rel="stylesheet" href="css/animate.min.css">
    ces deux lignes sont a jouter dans une balise script entre les balise <head> et </head>
    #yourelement est a remplacer avec l'id de l'élément a animer

    Code:
    <script>
    $('#yourElement').addClass('animated bounceOutLeft');
    $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
    </script>
    ensuite il faut ajouter la classe animated aux éléments devant etre animés.

    ceci est a insérer dans le fichier css du template:

    Code:
    #yourElement {
      -vendor-animation-duration: 3s;
      -vendor-animation-delay: 2s;
      -vendor-animation-iteration-count: infinite;
    }
    remplacez -vendor par les prefixes associés aux navigateurs.

    Commentaire


    • #3
      Re : Animation CSS

      Bonjour et merci pour cette réponse.
      Je n'ai pas souligné que je suis totalement incompétent en code.
      Je ne comprend donc pas grand chose.
      Cela va donc compliquer la chose

      ceci est a insérer ds le fichier index.php entre les balise <head> et </head>
      <link rel="stylesheet" href="css/animate.min.css">
      C'est quel fichier index.php celui du template?

      ces deux lignes sont a jouter dans une balise script entre les balise <head> et </head>
      #yourelement est a remplacer avec l'id de l'élément a animer
      Je ne comprend pas

      ensuite il faut ajouter la classe animated aux éléments devant etre animés.
      Cela se fait dans l’éditeur du module par exemple?

      ceci est a insérer dans le fichier css du template:
      Je pense pour ça c'est bon c'est pas trop compliqué

      remplacez -vendor par les prefixes associés aux navigateurs.
      C'est quoi ces préfix?

      Merci d'avance
      Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

      Commentaire


      • #4
        Re : Animation CSS

        Bonjour,

        Je ne comprend donc pas grand chose.
        Cela va donc compliquer la chose
        Arfff... c'est clair.

        ceci est a insérer ds le fichier index.php entre les balise <head> et </head>
        <link rel="stylesheet" href="css/animate.min.css">
        C'est quel fichier index.php celui du template?
        Oui tout à fait, et pour info l'utilisation de la methode addStylesheet de la class JDocument est préférable à l'ajout du lien "à l'arrache". http://docs.joomla.org/JDocument/addStyleSheet

        ces deux lignes sont a jouter dans une balise script entre les balise <head> et </head>
        #yourelement est a remplacer avec l'id de l'élément a animer
        Je ne comprend pas
        Il faut bien regarder au niveau de la documentation du script.

        ensuite il faut ajouter la classe animated aux éléments devant etre animés.
        Cela se fait dans l’éditeur du module par exemple?
        Cela ce fait par n'importe quel éditeur capable d'éditer du HTML.

        remplacez -vendor par les prefixes associés aux navigateurs.
        C'est quoi ces préfix?
        http://www.alsacreations.com/article...rietaires.html

        Bon courage et bon week-end

        Mickael

        Commentaire


        • #5
          Re : Animation CSS

          Bonjour
          Je ne comprend vraiment pas. Désolé

          Le fichier est mis dans le répertoire CSS du template. Ça c'est Ok

          J'ai mis le code dans le fichier index.php comme ci-dessous.
          Je pense que c'est ok vous confirmez?

          Code:
          php
          /** 
           *------------------------------------------------------------------------------
           * @package       T3 Framework for Joomla!
           *------------------------------------------------------------------------------
           * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
           * @license       GNU General Public License version 2 or later; see LICENSE.txt
           * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
           *                & Google group to become co-author)
           * @Google group: https://groups.google.com/forum/#!forum/t3fw
           * @Link:         http://t3-framework.org 
           *------------------------------------------------------------------------------
           */
           
          // no direct access
          defined('_JEXEC') or die;
          
          //check if t3 plugin is existed
          if (!defined('T3')) {
          	if (JError::$legacy) {
          		JError::setErrorHandling(E_ERROR, 'die');
          		JError::raiseError(500, JText::_('T3_MISSING_T3_PLUGIN'));
          		exit;
          	} else {
          		throw new Exception(JText::_('T3_MISSING_T3_PLUGIN'), 500);
          	}
          }
          
          $t3app = T3::getApp($this);
          
          // system messages overwrite
          if (version_compare(JVERSION, '3.1.0', '<')) {
          	require_once JPATH_ROOT .'/templates/'. $this->template .'/message.php';
          }
          
          // get configured layout
          $layout = $t3app->getLayout();
          
          $t3app->loadLayout($layout);
          
          <head>  
          <link rel="stylesheet" href="css/animate.min.css">
          </head>
          En suite je décroche!!!!!
          j'ai donc un module avec un image que je veux animer avec la fonction fadeInLeft
          Code:
          <p><img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283" /></p>
          Je fais quoi avec ce code?
          Code:
          <script>
          $('#yourElement').addClass('animated bounceOutLeft');
          $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
          </script>
          Pour les préfix ok mais j'en fais quoi et dans quel fichier CSS?
          Voici la liste des fichier dans le répertoire CSS du template:Cliquez sur l'image pour l'afficher en taille normale

Nom : Image3.jpg 
Affichages : 1 
Taille : 35,6 Ko 
ID : 1803810

          Je suis vraiment pas doué
          merci pour votre aide
          Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

          Commentaire


          • #6
            Re : Animation CSS

            Bonjour,

            D'abord il y a une erreur : si ton fichier css est dans le répertoire de ton template il ne faut pas utiliser ce chemin : <link rel="stylesheet" href="css/animate.min.css"> mais ce chemin : <link rel="stylesheet" href="templates/ton_template/css/animate.min.css"> sinon le navigateur ne va pas le trouver.

            Ensuite :

            Je fais quoi avec ce code?
            Code:

            <script>
            $('#yourElement').addClass('animated bounceOutLeft');
            $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
            </script>
            Place le dans le fichier "index.php" de ton template avant la balise </body>, je te conseille de remplacer les $ par "jQuery"

            Pour les préfix ok mais j'en fais quoi et dans quel fichier CSS?
            Dans le fichier CSS de ton template.

            Bonne journée

            Mickael

            Commentaire


            • #7
              Re : Animation CSS

              Bonjour Michael,

              Je viens de faire les modifs voici le contenu du fichier index.php du template:
              Code:
              <?php
              /** 
               *------------------------------------------------------------------------------
               * @package       T3 Framework for Joomla!
               *------------------------------------------------------------------------------
               * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
               * @license       GNU General Public License version 2 or later; see LICENSE.txt
               * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
               *                & Google group to become co-author)
               * @Google group: https://groups.google.com/forum/#!forum/t3fw
               * @Link:         http://t3-framework.org 
               *------------------------------------------------------------------------------
               */
               
              // no direct access
              defined('_JEXEC') or die;
              
              //check if t3 plugin is existed
              if (!defined('T3')) {
              	if (JError::$legacy) {
              		JError::setErrorHandling(E_ERROR, 'die');
              		JError::raiseError(500, JText::_('T3_MISSING_T3_PLUGIN'));
              		exit;
              	} else {
              		throw new Exception(JText::_('T3_MISSING_T3_PLUGIN'), 500);
              	}
              }
              
              $t3app = T3::getApp($this);
              
              // system messages overwrite
              if (version_compare(JVERSION, '3.1.0', '<')) {
              	require_once JPATH_ROOT .'/templates/'. $this->template .'/message.php';
              }
              
              // get configured layout
              $layout = $t3app->getLayout();
              
              $t3app->loadLayout($layout);
              
              <head>  
              <link rel="stylesheet" href="templates/swift/css/animate.min.css">
              </head>
              <script>
              jQuery('#yourElement').addClass('animated bounceOutLeft');
              jQuery('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
              </script>
              </body>
              Dans le fichier CSS de ton template.
              Je veux bien mais dans le quel le template.css ?

              Merci pour ton aide
              David
              Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

              Commentaire


              • #8
                Re : Animation CSS

                J'ai oublié de mettre la liste des fichiers au cas où!
                Cliquez sur l'image pour l'afficher en taille normale

Nom : Image1.jpg 
Affichages : 1 
Taille : 39,1 Ko 
ID : 1803821
                Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

                Commentaire


                • #9
                  Re : Animation CSS

                  J'ai installé animate.css dans le template que je développe actuellement. Voici ce que j'ai fait pour que cela fonctionne :

                  Pour l'installation:
                  --> mettre le fichier animate.min.css dans le dossier css du template
                  --> dans le fichier index.php du template, juste avant la balise </head> , rajouter cette ligne :
                  Code:
                  <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/animate.min.css" type="text/css">
                  Pour l'utilisation :
                  Suppose qu'il y a cette ligne dans le code source de l'un de tes articles :
                  <h2> Un beau titre </h2>
                  Pour animer ton titre, il faut alors mettre : <h2 class="animated rotateInUpRight">Un beau titre</h2>
                  où :
                  animated = obligatoire
                  rotateInUpRight = nom de l'animation souhaitée (choisie sur ce site : http://daneden.github.io/animate.css/

                  Ce n'est pas plus compliqué.
                  Dernière édition par fynhooft à 04/11/2014, 23h34
                  GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                  Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                  Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                  Commentaire


                  • #10
                    Re : Animation CSS

                    Bonjour

                    Pour l'installation:
                    --> mettre le fichier animate.min.css dans le dossier css du template
                    J'ai une petit question qui vient de me sauter à la vu.

                    On parle du fichier animate.min.css mais quant on le télécharge sur le site, il se nomme animate.css. Faut-il le renommer en animate.min.css?
                    merci
                    David
                    Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

                    Commentaire


                    • #11
                      Re : Animation CSS

                      Envoyé par Davidd08 Voir le message
                      Faut-il le renommer en animate.min.css?
                      Va sur https://github.com/daneden/animate.css
                      Cliques sur le bouton "Download ZIP" en bas à droite.
                      Tu dézippes. Dedans il y a un fichier "animate.min.css"

                      Pour info, c'est le même que animate.css mais il est compacté pour prendre moins de place. Ouvres les avec ton éditeur de texte et regardes leurs contenus, tu comprendras.
                      GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                      Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                      Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                      Commentaire


                      • #12
                        Re : Animation CSS

                        On parle du fichier animate.min.css mais quant on le télécharge sur le site, il se nomme animate.css. Faut-il le renommer en animate.min.css?
                        Non en fait on utilise le suffix "min" pour désigner un fichier ayant été "minifié", c'est à dire que le code source a été "compressé", tous les espaces et les saut ligne ont t supprimé, ce qui réduis le poids et donc le temps de chargement du fichier.

                        Une bonne pratique consiste à importer le fichier CSS de la librairie en minifier puis à le surcharger avec un autre fichier CSS importé en aval.

                        Commentaire


                        • #13
                          Re : Animation CSS

                          Bonjour
                          Merci pour ces informations
                          J'ai mis le code comme indiqué par fynhooft en le mettant entre les balises <head> que j'ai rajouté car il n'y en avait pas.
                          j'ai remplacé <?php echo $this->template ?> par swift pour indiquer le chemin

                          Code:
                          <?php
                          /** 
                           *------------------------------------------------------------------------------
                           * @package       T3 Framework for Joomla!
                           *------------------------------------------------------------------------------
                           * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
                           * @license       GNU General Public License version 2 or later; see LICENSE.txt
                           * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
                           *                & Google group to become co-author)
                           * @Google group: https://groups.google.com/forum/#!forum/t3fw
                           * @Link:         http://t3-framework.org 
                           *------------------------------------------------------------------------------
                           */
                           
                          // no direct access
                          defined('_JEXEC') or die;
                          
                          //check if t3 plugin is existed
                          if (!defined('T3')) {
                          	if (JError::$legacy) {
                          		JError::setErrorHandling(E_ERROR, 'die');
                          		JError::raiseError(500, JText::_('T3_MISSING_T3_PLUGIN'));
                          		exit;
                          	} else {
                          		throw new Exception(JText::_('T3_MISSING_T3_PLUGIN'), 500);
                          	}
                          }
                          
                          $t3app = T3::getApp($this);
                          
                          // system messages overwrite
                          if (version_compare(JVERSION, '3.1.0', '<')) {
                          	require_once JPATH_ROOT .'/templates/'. $this->template .'/message.php';
                          }
                          
                          // get configured layout
                          $layout = $t3app->getLayout();
                          
                          $t3app->loadLayout($layout);
                          
                          <head>  
                          <link rel="stylesheet" href="templates/swift/css/animate.min.css" type="text/css">
                          </head>
                          J'ai mis ceci dans la module qui contient une image
                          Code:
                          <p class="animated rotateInUpRight"><img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283" /></p>
                          Mais voici le message d'erreur: Parse error: syntax error, unexpected '<' in /home/ffessmes/www/templates/swift/index.php on line 41

                          Pouvez vous me dire où est l'erreur?
                          Merci
                          Le bonheur pour une abeille ou un dauphin est d'exister, pour l'homme, de le savoir et de s'en émerveiller. (J-Y COUSTEAU) A méditer!

                          Commentaire


                          • #14
                            Re : Animation CSS

                            Envoyé par Davidd08 Voir le message
                            J'ai mis le code comme indiqué par fynhooft en le mettant entre les balises <head> que j'ai rajouté car il n'y en avait pas.
                            Tu ne dois pas rajouter ces balises <head> et </head> : elles y sont obligatoirement mais dans un autre fichier de ton template (je ne connais pas T3).

                            Envoyé par Davidd08 Voir le message
                            j'ai remplacé <?php echo $this->template ?> par swift pour indiquer le chemin
                            Le but de ce code php c'est justement d'éviter de fournir le nom du template !
                            Envoyé par Davidd08 Voir le message
                            Mais voici le message d'erreur: Parse error: syntax error, unexpected '<' in /home/ffessmes/www/templates/swift/index.php on line 41
                            Remplaces ce code :
                            Code:
                            <img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283" [COLOR="#FF0000"]/[/COLOR]>
                            par celui-ci :
                            Code:
                            <img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283" >
                            GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                            Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                            Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                            Commentaire


                            • #15
                              Re : Animation CSS

                              c est du T3..le fichier head.php ou header.php doit etre localisé et c est la ou ce trouves les balises<head> et </head> si je souviens bien..

                              Code:
                              <p class="animated rotateInUpRight"><img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283" /></p>
                              bah la tu veut mettre ta class animated sur un paragraphe.....
                              alors que tu veut cibler une image. Moi j essayerais plutot ceci :
                              Code:
                              <p><img style="margin: 0px 5px 5px;" src="images/News.jpg" alt="News" width="377" height="283"  class="animated rotateInUpRight" /></p>

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X