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.
    Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
    un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

    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" />
                            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>
                              Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
                              un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X