Tuto utilisation de la ressource barba.js

Par Christian Menzan, il y a 9 ans

Javascript

Bonjour,

J'aimerais savoir si quelqu'un a déja utiliser la ressource barba.js http://barbajs.org/demos.html dans un de ses projets?!

J'aime bien cette ressource mais je ne capte pas assez bien comment l'utiliser. J'aimerais si possible avoir un ptit tuto d'utilisation de cette ressource ou tout simplement quelques explications sur l'utilisation de celle-ci avec peut etre a l'appui une page html d'exemple avec une simple transition faite avec barba.js puis le code JS qui fera fonctionner la transition.

PS: J'ai deja essayer de comprendre les explications et demos présentes sur le site officiel mais jsuis tjrs dans le noir concernant l'utilisation de cette ressource

Merci de votre aide !

5 réponses

betaWeb, il y a 9 ans

Salut,

Nul besoin de tutoriel, la documentation est plutôt clair.
Certes, il n'y a pas d'exemples "clés en main", mais en effectuant plusieurs tests, tu peux réussir à piger assez rapidement le fonctionnement ;)
Quoi qu'il en soit, je ne suis pas du tout convaincu quant au fait de dédier un tutoriel vidéo à cette lib, d'autant plus que @Grafikart a déjà fait un tutoriel sur un système de carousel JS "assez récemment" : https://www.grafikart.fr/tutoriels/jquery/owl-carousel-509

bouks, il y a 9 ans

Bonjour Christian,

@betaWeb : je pense que Christian souhaite utiliser plutot la fonction d'ajax et le chargement entre les pages qu'un simple slider.

Je suis entrain d'installer Barba.js pour un de mes projets, je peux te faire un premier retour sur mon expérience :

J'ai un menu HTML:

<!--
<li class="current_page_item " ><a href="/home.php" ></a></li>
<li class="" ><a href="/about.php" ></a></li>
<li class="" ><a href="/contact.php" ></a></li>
-->

Ensuite sur chaque page home,about,contact, j'ai un conteneur spécifique :

<section id="home" class="barba-container" data-namespace="homepage">
code HTML
</section>
<section id="about" class="barba-container" data-namespace="about">
code HTML
</section>
<section id="contact" class="barba-container" data-namespace="contact">
code HTML
</section>

Parti JS :

 Barba.Pjax.start();

Rien qu'avec cela, tu as le système AJAX sans rechargement de page.
Je suis entrain de tester pour faire ma propre animation, je reviens vers toi quand j'ai fini si tu veux.

PS : Attention j'ai eu quelques difficultés à faire fonctionner mon code JS entre page => il faut utiliser le système de vue ( d'ou les data-namespace )

Hésites pas si tu as des questions.

Christian Menzan, il y a 9 ans

Cooll Merci Bouks, je t'attend avec impatiente !

Maxon, il y a 9 ans

UP
Salut Bouks, ça m'intéresse de voir comment tu as travaillé tes animations de transition de page. Je galère un peu à tout coordoner avec Barba.

bouks, il y a 9 ans

Yo les mecs pour l'instant rien de concret.
J'ai pris l'exemple du fadeIn fadeOut du site pour l'instant, je me concentre à faire fonctionner les JS avec le système de vue.
Quand j'ai fini, je test de changer d'animation de page.