Dans ce court tutoriel, nous allons discuter de la façon d’ajouter des transitions de page à WordPress à l’aide de Barba.js, Oxygen Builder et un peu de travail manuel.

Qu’est-ce que Barba.js?

Barba.js
Exemple d’animation Barba 1
Barba.js
Exemple d’animation Barba 2

Barba.js est une bibliothèque JavaScript qui vous permet de créer des transitions fluides et fluides entre les pages de votre site Web. Ces transitions peuvent être aussi simples que de passer à la page suivante et aussi complexes que des éléments qui se transforment en nouveaux lorsque l’utilisateur navigue dans la page. Quoi que vous utilisiez, c’est une bibliothèque très cool qui ajoutera une boîte professionnelle à n’importe quel site Web WordPress.

Il améliore également vos performances en réduisant le délai entre les pages, en minimisant les requêtes HTTP et en augmentant l’expérience utilisateur. C’est une bibliothèque incroyablement légère (seulement 9 kbps) qui est assez facile à intégrer à WordPress en utilisant Oxygen Builder.

Pourquoi Barba.js et Oxygen Builder?

Avant de continuer, vous devez comprendre que nous allons ajouter des transitions de page à notre site Web WordPress construit. Générateur d’oxygène. Oxygen Builder modifie la structure globale d’un site Web WordPress.

En règle générale, vous utiliserez une conception prédéfinie composée de dizaines de modèles de fichiers PHP. Lors de l’utilisation Générateur d’oxygèneVous supprimez le thème WordPress de l’équation et créez le site Web à partir de zéro. Ceci est très utile à la fois du point de vue de la conception et du développement si vous recherchez une façon entièrement personnalisée de créer un site Web avec un constructeur visuel.

De tous les constructeurs Générateur d’oxygène est préférable pour les développeurs pour cette raison. Lorsqu’il s’agit d’intégrer Barba.js dans un site Web WordPress, Oxygen Builder rend le processus beaucoup plus facile. Vous pouvez toujours intégrer Barba.js à un site Web WordPress traditionnel construit avec un thème. Cependant, cela est beaucoup plus difficile et vous oblige à consulter les fichiers PHP réels du site Web et à ajouter votre propre code.

Une fois que vous êtes à l’aise avec cela, continuez avec ce tutoriel et vous serez en mesure de comprendre l’implémentation de base de Barba.js dans un site Web WordPress.

Si vous n’utilisez pas et n’utilisez pas Oxygen Builder pour créer le site Web WordPress, vous voudrez peut-être le mettre en attente. Ou consultez Oxygen Builder et essayez-le par vous-même (licence à vie, garantie de remboursement et aucun programme d’affiliation).

Voyons maintenant comment vous pouvez intégrer Barba.js dans un site Web WordPress construit avec Oxygen Builder. C’est en fait assez simple, et étant donné la complexité de la bibliothèque, c’est surprenant.

Ajouter des transitions de page à un site Web WordPress avec Barba.js

Lorsque vous créez un site Web WordPress avec Oxygen Builder, vous disposez généralement d’un modèle composite qui applique l’en-tête et le pied de page au site Web. Dans ce modèle fourre-tout, il existe un composant de contenu interne entre l’en-tête et le pied de page. Ce composant inter-contenu appelle la page réelle lorsque le modèle est chargé. Chaque page peut avoir son propre modèle (tout comme les catégories, les archives et tout ce à quoi vous pouvez penser).

Ajout d'une animation de transition de page sympa à partir de Pjax (Barba.js)[Demo ...
Source

But the beauty about Oxygen Builder is that you have complete control over all of your page templates without needing to even understand how PHP works. And that simplicity is what we are going to use to add Barba.js, create high quality transitions between our WordPress pages, and impress all of our clients and website visitors.

Again, this is a basic tutorial on how to implement this JavaScript library into your WordPress website, if you’re looking for a tutorial on how to do advanced things with Barba.js , you should look elsewhere.

Set up your Oxygen Builder template

to add the library to WordPress, we are going to use a header and footer catchall template. This is because we need to wrap the inner content of the website in two Divs. this is actually quite easy.

We are also going to use a code block component that is native to Oxygen Builder too add the Barba.js library from a CDN, and initialize it.

When adding the Barba.js library to any website, you need to add two Divs. the first one is a wrapper that surrounds all of the content. The second is a container that the content in which you want to be animated during page transitions is contained in.

<div id="barba-wrapper">
    <div class="barba-container">
        ... content to be changed
    </div>
</div>

Here’s a quick diagram of exactly how it is implemented into a Oxygen Builder website.

As you can see, we have our wrapper, then our code block which contains all of the JavaScript and CDN Barba.js, then we have our DIV which is the container for all of the content, and then within that DIV is usually an inner content section.

The first DIVs ID is renamed to: #barba-wrapper

The Code Block contains the CDN as well as all transition rules.

 <script src="https://unpkg.com/@barba/core"></script>

    <!-- load gsap animation library (minified version) -->
    <script src="https://unpkg.com/[email protected]/dist/gsap.min.js"></script>

    <!-- init barba with a simple opacity transition -->
    <script type="text/javascript">
      barba.init({
        transitions: [{
          name: 'opacity-transition',
          leave(data) {
            return gsap.to(data.current.container, {
              opacity: 0;
              transition-duration: 5000ms;
            });
          },
          enter(data) {
            return gsap.from(data.next.container, {
              opacity: 0;
              transition-duration: 5000ms;
            });
          }
        }]
      });  

Le deuxième DIV obtient une nouvelle classe: .barba-container

L’ensemble du contenu de la page « bloc de contenu interne » est ajouté dans cette DIV.

Et c’est tout. Comme vous pouvez le voir, ajouter Barba.js à WordPress à l’aide d’Oxygen Builder est vraiment facile. Vous pouvez utiliser la même structure générale lors de l’édition de fichiers de thème si vous avez un site Web WordPress qui n’utilise pas Oxygen Builder. Vous pouvez l’utiliser pour créer des règles avancées, des transitions, etc.

La transition incluse dans ce code dans notre article est très simple et permet à la page de se fondre dans la couleur d’arrière-plan du corps.

Les transitions plus complexes de Barba.j peuvent inclure des écrans SVG, des sections plus individuelles, etc.

Conclusion

Ce court tutoriel devrait vous avoir montré les étapes générales que vous pouvez suivre pour ajouter Barba.js à WordPress à l’aide d’Oxygen Builder. Étant donné que vous pouvez contrôler tous les aspects de votre site Web dans le constructeur visuel, il est vraiment facile de raper votre contenu dans ces balises. Si vous n’avez pas Oxygen Builder et que vous souhaitez ajouter Barba.js à WordPress, cela devient un peu plus compliqué. Toutefois, vous pouvez suivre les principes généraux décrits dans cet article et appliquer les wrappers à votre sujet.

Si vous avez des questions, n’hésitez pas à utiliser les commentaires. Partagez-le également en utilisant les boutons à droite si vous l’avez apprécié!



Source link

Recent Posts