Imprimer la Page | Close Window

[Elément] - Animation texte - Textillate

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Élements complémentaires pour OE
Description du Forum: Les éléments complémentaires créés pour Open Element
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=22585
Date: 21 Août 2019 à 22:17
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Elément] - Animation texte - Textillate
Posté par: MicroVinc
Sujet: [Elément] - Animation texte - Textillate
Posté le: 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 : http://www.microvinc.fr/OE_Textillate.php" rel="nofollow - 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



-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État



Réponses:
Posté par: brolysan
Posté le: 24 Feb 2017 à 11:35
Super boulot, vraiment génial !!!!! Clap
Je l'ai testé et que du bon !!


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: Larsene
Posté le: 24 Feb 2017 à 11:56
Félicitations !!


-------------
http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime


Posté par: MicroVinc
Posté le: 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 : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: patricia
Posté le: 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


Posté par: MicroVinc
Posté le: 02 Mar 2017 à 16:01
Il faut utiliser la classe contenu texte du lien...
A essayer ..

-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: running59
Posté le: 03 Mar 2017 à 10:59
ça marche du tonnerre bravo et merci

-------------
running59


Posté par: running59
Posté le: 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


Posté par: MicroVinc
Posté le: 03 Mar 2017 à 11:36
Message posté par running59 running59 a écrit:

ça marche du tonnerre bravo et merci

Merci, au plaisir Smile

http://www.microvinc.fr/OE_SR.php" rel="nofollow - ScrollReveal et Image http://www.stalagtic.com/Element-ImageSplendide.htm" rel="nofollow - Splendide aussi Big smile (comment faire un placement de produit discrétos)


-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: MicroVinc
Posté le: 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 :

http://www.hostingpics.net" rel="nofollow">


-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: running59
Posté le: 03 Mar 2017 à 15:04
ok merci

-------------
running59


Posté par: patricia
Posté le: 03 Mar 2017 à 18:58
Message posté par MicroVinc MicroVinc a écrit:

Il faut utiliser la classe contenu texte du lien...
A essayer ..

Merci - je vais tester.


-------------
"Si tout ceux qui croient avoir raison n'avaient pas tort, la vérité ne serait pas loin" Pierre DAC


Posté par: MicroVinc
Posté le: 28 Mar 2017 à 19:06
Mise à jour de l'élément pour le future store !

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


-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: usuul
Posté le: 01 Mai 2017 à 11:46
Bonjour,

Je dois être mou du bulbe mais je n'arrive pas à modifier la couleur du texte dans Textillate.
un petit conseil me serai le bienvenu
MerciWacko




Posté par: MicroVinc
Posté le: 01 Mai 2017 à 11:59
Bonjour, sélectionner l'élément (sans mettre en surbrillance le texte), puis :
https://www.hostingpics.net" rel="nofollow">


-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: Dmit OE
Posté le: 01 Mai 2017 à 14:01
Attention, s'il s'agit de liens (dans le texte), i lfaut utiliser le bouton Styles de liens (partiellement visible vers la droite sur la capture de MicroVinc)


Posté par: jjb1
Posté le: 14 Oct 2017 à 17:41
Bonjour,

Je dois être également mou du bulbe mais je n'arrive pas à cadrer mon titre à gauche, alors qu'il l'était bien, avant application de cet élément sympathique.
Je n'ai pas trouvé non plus le FAQ (qui en traite peut-être).
Merci de votre aide.
http://dev.chasse-autreches.xyz/Page-Type-01.htm" rel="nofollow - Mon site


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site


Posté par: MicroVinc
Posté le: 14 Oct 2017 à 17:50
Bonjour, un clique droit sur votre élément texte puis :
https://www.hostingpics.net" rel="nofollow">


-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: jjb1
Posté le: 14 Oct 2017 à 19:24
Merci de votre réponse rapide.
Mon titre est dans un texte simple ligne cadré à gauche dans un panneau d'éléments centré sur la page.
Dès que j'affecte "Textillate", mon titre se décale à droite, alors qu'il est bien noté : alignement à gauche comme vous me l'indiquez.
Dans le menu du site --> Titre=sans l'élément, Titre01 =avec l'élément.
Y a-t-il une autre manip à faire ?


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site


Posté par: MicroVinc
Posté le: 14 Oct 2017 à 19:55
J'arrive pas à simuler votre problème, j'utilise aussi un texte simple ligne :

https://www.hostingpics.net" rel="nofollow">




-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: jjb1
Posté le: 14 Oct 2017 à 22:09
De mon côté, je n'arrive pas à voir votre simulation dans votre dernier message (elle s'efface toute seule).
Pour résumer, j'ajoute un élément texte simple ligne dans une page vierge.
J'ajoute l'élément Textillate. J'affecte l'ID du texte dans Classe ou ID affectée.
C'est alors que mon cadre qui était strictement adapté à la longueur de mon texte (largeur auto) s'agrandit subitement de chaque côté de mon texte, même si je cadre à gauche.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site


Posté par: MicroVinc
Posté le: 14 Oct 2017 à 22:37
Bonjour, au lieu de prendre l'ID pour un texte simple ligne, utiliser la classe :

https://www.hostingpics.net" rel="nofollow">




-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: jjb1
Posté le: 17 Oct 2017 à 09:38
Bonjour MicroVinc,
J'ai tardé à vous répondre, éloigné que j'étais de mon clavier.
Merci de votre conseil, cela fonctionne désormais parfaitement cadré à gauche.
Cordialement.


-------------
http://prod.chasse-autreches.xyz" rel="nofollow - Mon site



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk