Equivalent d'une présentation animée WP en Joomla ?

[RobertG]

Bonjour,

J'aimerais reproduire sur Joomla une présentation de données que je trouve conviviale sur un site WP

Chaque cadre contient ici un pourcentage sous lequel du texte complète l'info. En étudiant le code, l'animation associée est apparemment gérée grâce à "Animate on Scroll".
Existerait-il une extension Joomla! qui pourrait correspondre ? (je communiquerai l'adresse du site WP par MP, si besoin).
Merci par avance de votre aide !

PS : il y a bien une extension de même nom sur le JED, mais dans sa démo, je ne retrouve pas de type de présentation "au repos" comparable.

[lefabdu51]

salut, ton site utilise une librairie javascript disponible ici : https://michalsnik.github.io/aos/

Et tyu peux faire la meme chose avec up de l'ami lomart : une image avec un z-index qui la projette derriere et 4 images animées par up action aos..

Le plugin de @lomart doit utiliser cette librairie si je ne m abuse.

[RobertG]

Merci,

J'ai bien pensé à UP que j'utilise dans d'autres sites, mais je suis souvent paumé devant le nombre d'actions !

[lefabdu51]

https://up.lomart.fr/demo/action-anim-aos

Cette action up fonctionnes aussi pour les images. Je m en sert sur un site pour afficher des images avec des effets.

[RobertG]

Oui, je l'ai vue tout à l'heure après avoir répondu.
Reste à trouver comment positionner et gérer l'aspect des zones, qui ne sont qu'en CSS, pas en images, sur le site de référence.
Utilisant JCE Pro, je suis en train d'essayer de passer par des colonnes, mais je pense devoir utiliser plutôt des images dans les cases et y appliquer du paramétrage de positionnement puis la surimpression de texte avant de pouvoir appliquer une animation.

[tataye]

Avec smartslider tu devrais y arriver aisément

[RobertG]

Merci !
Possible, mais je suis noyé dans le nombre de modèles de la démo, sans pour autant en avoir trouvé un qui ressemble au site qui nous a inspiré.
Ce que nous voudrions obtenir se base sur ceci, zone de texte à gauche, 4 zones (ou plus) à droite, que l'on pourrait animer au scroll

[lomart]

Bonjour,

C'est vrai Robert, qu'il est difficile de s'y retrouver dans les 150 actions disponibles.


C'est pour cela que j'ai ajouté un article https://up.lomart.fr/docs/les-actions-par-utilisations
Je pense également faire une rubrique avec des utilisations ou combinaisons particulières. Chacun pouvant partager ses réalisations.

Pour ton besoin, je mets ci-dessous le squelette de ce que tu voudrais. Il reste bien sur a faire l'habillage

{up flexauto=2}
   {up flexauto=2}
    bouton gauche
  {======= 2}
    bouton droite
  {/up flexauto}
{======= stats}
  {up flexauto=2 | style-*=border:1px solid #333;border-radius:10px}
    {up anim-aos=zoom-in-right | duration=2000}
      {up chart=Pie}
        Navigateur,2019
        Chrome,57.4
        Safari,13.5
        IE et Edge,6.8
        Firefox,6.8
        Opera,2.4
      {/up chart}
    {/up anim-aos}
    stat 1
  {======= 2}
    stat 2
  {======= 2}
    stat 3
  {======= 2}
    stat 4
  {/up flexauto}
{/up flexauto}​

[RobertG]

Merci beaucoup Loïc pour ce code. J'ai vu en effet ton article il y a quelques jours.
Il me restera à comprendre ce que je vais devoir ajouter et ce que j'obtiendrai.

[lomart]

Il me restera à comprendre ce que je vais devoir ajouter et ce que j'obtiendrai.

UP, c'est un jeu de construction. Tu prépares chaque brique séparément puis tu assembles.
Dans ce cas, tu prépares les stats avec l'action chart, puis tu les animes avec anim-aos.
La dernière phase est de les inclure dans des actions flexauto pour une mise en page responsive

[RobertG]

Le souci est que je suis très très loin de ton expérience d'auteur !
En fait, les stats seront certainement seulement des images et du texte