Animation CSS

**lefabdu51** · 20/10/2014, 08h22

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.

**Davidd08** · 25/10/2014, 08h23

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

**Soundboy39** · 25/10/2014, 11h08

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>

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

**Davidd08** · 02/11/2014, 12h35

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:

Je suis vraiment pas doué
merci pour votre aide

**Soundboy39** · 03/11/2014, 07h25

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

**Davidd08** · 04/11/2014, 21h23

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

**Davidd08** · 04/11/2014, 21h25

Re : Animation CSS

J'ai oublié de mettre la liste des fichiers au cas où!

**fynhooft** · 04/11/2014, 21h56

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é.

**Davidd08** · 04/11/2014, 23h15

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

**fynhooft** · 04/11/2014, 23h30

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.

**Soundboy39** · 05/11/2014, 08h21

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.

**Davidd08** · 06/11/2014, 21h06

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

**fynhooft** · 06/11/2014, 21h47

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" >

**lefabdu51** · 07/11/2014, 11h07

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>

Animation CSS

Animation CSS

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association