Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Élements complémentaires pour OE
  Nouveaux messages Nouveaux messages Fil RSS  - [Elément] - Animation texte - Textillate
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Elément] - Animation texte - Textillate

 Répondre Répondre Page  123>
Auteur
Message
MicroVinc allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4466
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Elément] - Animation texte - Textillate
    Envoyé : 24 Feb 2017 à 11:28
Bonjour,

je vous présente un nouvel élément pour OpenElement, il permet d'utiliser toutes les options disponibles de Textillate sur vos éléments texte (76 options d'animation de texte !) Smile

ATTENTION : L'élément ne fonctionne qu'à partir de OpenElement Version 1.57R1

Textillate est un plugin jQuery pour appliquer des effets visuels animés aux lettres ou mots.  Vous pouvez assigner autant d'élément que vous désirez sur une page et créer des effets différents pour chaque élément.

Il faut installer le fichier .dll dans le dossier de votre projet (sur le PC) à l'emplacement par défaut :
"C:\Users\VOTRE_PROFILE_UTILISATEUR\Documents\openElement\DossierDeMonSiteInternet\Common\Elements\"

L'élément est gratuit ! (Et gratuit c'est dans mes prix ! Big smile)

#######################################

Présentation : ICI

#######################################

Paramétrages disponibles dans l'interface de l'élément : 

-Onglet "Classe ou ID affectée" :

-Classe Perso : Les éléments ayant cette "Classe Perso" seront affectés par l'animation.
-Élément : L'élément sélectionné dans le menu popup sera affecté par l'animation.
-IDs d'éléments : Liste d'IDs d'éléments séparés par une virgule.
Exemple : WE6c0657ab0c,WE0356adf5fd,WE2ffe785e54f

-Onglet "Effet de départ " :

-Brouillage : Randomise la séquence de caractères (notez que le brouillage n'a pas de sens si synchroniser = cochée).

-Délais : Régler le délai entre chaque animation de caractère (en millisecondes).

-Échelle de retard : Définir le facteur de retard appliqué à chaque caractère consécutif.

-Effet de départ : Effet de départ parmi la banque d'effet  (bounce, flash, headShake, hinge, jello, pulse, rubberBand, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp)

-Sens inverse : Inverser la séquence de caractères (notez que de cocher cette case n'a pas de sens avec Synchronisation = cochée).

-Synchroniser : Pour animer tous les caractères en même temps  (Cochée = oui).


-Onglet "Effet de sortie" :

-Brouillage : Randomise la séquence de caractères (notez que le brouillage n'a pas de sens si synchroniser = cochée).
-Délais : Régler le délai entre chaque animation de caractère (en millisecondes).

-Échelle de retard : Définir le facteur de retard appliqué à chaque caractère consécutif.

-Effet de sortie : Effet de sortie parmi la banque d'effet  (bounce, flash, headShake, hinge, jello, pulse, rubberBand, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp).

-Sens inverse : Inverser la séquence de caractères (notez que de cocher cette case n'a pas de sens avec Synchronisation = cochée).

-Synchroniser : Pour animer tous les caractères en même temps (Cochée = oui).


-Onglet "Paramètre " :

-Boucle : Animation en boucle (Cochée = Animation en boucle).

-Délais de départ : Définit le délai initial avant de lancer l'animation (en millisecondes).

-Lettre ou mot : Effet sur les lettre ou le mots  (Cochée = Animation sur les mots).

-Temps entre animation : Définit le temps d'affichage minimum entre chaque animation (en millisecondes)


-Onglet "Paramètre (expert)" :

-Auto start :  Définir s'il faut ou non lancer automatiquement l'animation.

NOTE : Si vous décochez cette case vous devez démarrer l'animation via un déclencheur :

$element.textillate('start') - Start/restart textillate
$element.textillate('stop') - Pause/stop textillate
$element.textillate('in') - Déclencher le texte actuel dans l'animation
$element.textillate('out') - Déclencher l'animation de sortie du texte en cours

Cochée = Démarrage automatique
Décoché = Pas de démarrage automatique 

#######################################

          -Version de l'élément : V3.0.1

#######################################
Information sur les mises à jours :

-Version d'origine : V1.0.1
-Mise à jour le 24 janvier 2017 : V2.0.1
Ajout dans l'onglet "Classe ou ID affectée" de la fonction "Élément" qui permet de choisir dans la liste des éléments de la page, l'élément qui va être affecté par l'animation.
-Mise à jour le 28 mars 2017 : V3.0.1
Ajout de l'option IDs d'élément dans "Classe ou ID affectée"
Permettre d'assigner plusieurs éléments pour le même Textillate quelque soit les catégories (cumule possible) "Classe Perso" , "Elément" ou "IDs d'éléments".

#######################################

@ Bientôt ! Wink



Edité par MicroVinc - 28 Mar 2017 à 19:06
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9491
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Feb 2017 à 11:35
Super boulot, vraiment génial !!!!! Clap
Je l'ai testé et que du bon !!
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5383
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Feb 2017 à 11:56
Félicitations !!
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4466
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 24 Feb 2017 à 13:26
Suite à la demande de Larsène :
          -Mise à jour : V2.0.1
Ajout dans l'onglet "Classe ou ID affectée" de la fonction "Élément" qui permet de choisir dans la liste des éléments de la page, l'élément qui va être affecté par l'animation.
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
patricia allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 12 Oct 2006
Pays: Dominica
Status: Inactif
Points: 1896
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer patricia Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Mar 2017 à 15:52
Bonjour,
Une petite question: Textillate ne fonctionne pas sur un texte lien ?
"Si tout ceux qui croient avoir raison n'avaient pas tort, la vérité ne serait pas loin" Pierre DAC
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4466
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Mar 2017 à 16:01
Il faut utiliser la classe contenu texte du lien...
A essayer ..
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
running59 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Juin 2014
Pays: FRANCE
Status: Inactif
Points: 157
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer running59 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2017 à 10:59
ça marche du tonnerre bravo et merci
running59
Haut de la page
running59 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Juin 2014
Pays: FRANCE
Status: Inactif
Points: 157
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer running59 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2017 à 11:24
Par contre la taille du texte est modifiée par l'animation et je n'arrive pas à trouver pourquoi
running59
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4466
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2017 à 11:36
Message posté par running59 running59 a écrit:

ça marche du tonnerre bravo et merci

Merci, au plaisir Smile

ScrollReveal et Image Splendide aussi Big smile (comment faire un placement de produit discrétos)
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group
Avatar

Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4466
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 03 Mar 2017 à 11:38
Message posté par running59 running59 a écrit:

Par contre la taille du texte est modifiée par l'animation et je n'arrive pas à trouver pourquoi

Dans le FAQ c'est indiqué, il faut utiliser cette classe :



Edité par MicroVinc - 03 Mar 2017 à 11:39
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
 Répondre Répondre Page  123>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,030 secondes.
Acheter votre vélo en ligne