Anime.js est une bibliothèque d'animation JavaScript légère avec une API simple mais puissante facilement utilisable avec Oxygen.
Il fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript.

Il suffira pour ces exemples de rajouter un bloc de code dans votre page Oxygen avec par exemple (exemple 7 du dernier lien an-dessous) :

<h1 class="ml7">
  <span class="text-wrapper">
    <span class="letters">Reality is broken</span>
  </span>
</h1>

Dans le css

.ml7 {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
.ml7 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.ml7 .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}

Et dans le javascript :

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml7 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml7 .letter',
    translateY: ["1.1em", 0],
    translateX: ["0.55em", 0],
    translateZ: 0,
    rotateZ: [180, 0],
    duration: 750,
    easing: "easeOutExpo",
    delay: (el, i) => 50 * i
  }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Démos sur ce site : https://oxygen.bulgaweb.com/moving-letters/

Lien du Javascript : https://animejs.com/

Lien des tutoriels "Moving Letters" : https://tobiasahlin.com/moving-letters/

Vous pouvez également utiliser mon plugin Oxychild qui inclut le javascript (à activer) DOWNLOAD

Isotope permet de filtrer les catégories avec le module Easypost (car il dispose d'un template que le repeater n'a pas). Globalement nous devrons insérer les slugs des catégories en classe pour chaque articles.

Afin de facilité la mise en place, vous pouvez utiliser mon plugin "OxyChild" qui dispose de la fonction nécessaire et des fichiers javascript. Il vous suffira d'activer le functions.php et l'insertion des javascipt en activant Isotope.

Nous allons d'abord récupérer les catégories et en faire des boutons pour filtrer. Insérer un bloc de code au-dessus de votre module easypost. Il faudra donc utiliser cette fonction dans ce bloc et bien modifier "ma-taxonomie" par votre taxonomie personnelle (fonctionne avec les CPT)

oxychid_get_filters('ma-taxonomie');

Et ce css dans le même bloc que vous allez personnaliser à votre gout.

.filter-button-group button {
    margin-right: 10px;
    margin-bottom: 14px;
    padding: 10px 20px;
    border: none;
    border-radius: 15px;
    background-color: #1d3c2e;
    color: #fff;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 13px;
}

.filter-button-group button:hover,
.filter-button-group button.active {
    color: #fff;
    background-color: #63917c;
}

.filter-button-group button:focus {
    outline-style: none;
    outline-color: transparent;
}
.filter-button-group {
	display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}

Ensuite nous allons nous rendre dans le template php d'easypost et remplacer la première ligne (div avec la classe oxy-post) avec celle-ci (remplacer également "ma-taxonomie")

<div class='oxy-post <?php 
            $categories = get_the_terms( $post->ID, 'ma-taxonomie' );
foreach( $categories as $category ) { 
  echo ' ' . $category->slug;
} ?> '>

Si vous avez bien réaliser tous les instructions, vous devriez pouvoir filtrer vos postes.

Note : vous pouvez remplacer dans la fonction, située dans functions.php, le mot "ALL" par "TOUT" ou ce qui vous conviendra.

Lien d'Isotope : https://isotope.metafizzy.co/

Lien d'Oxychild : télécharger/download

CRÉER UN ENSEMBLE AVEC ICOMOON
Visitez IcoMoon.io et cliquez sur IcoMoon App en haut à droite. Vous êtes redirigé vers l'application Web.
Choisissez les icônes à ajouter à votre jeu d'icônes. Vous pouvez télécharger vos propres icônes en cliquant sur Importer des icônes dans la barre supérieure.
Une fois que vous avez terminé, cliquez sur Générer SVG et plus, cliquez sur Préférences en haut et sélectionnez "Ajouter à symbol-defs.svg". Fermez la fenêtre contextuelle, puis cliquez sur Télécharger. La vidéo ici montre comment procéder.

https://oxygenbuilder.com/documentation/other/custom-svg-icon-sets/?fbclid=IwAR3eazVLPXGm1zf9yDgyi-g3VN6oPExPcJztTljdjyMQOVTa6u69yQ2teNcVidéo

ATTENTION que depuis une mise à jour d'IcoMoon, il faut aller dans les préférences de l'application et cocher "add title" comme le montre cette vidéo https://www.loom.com/share/ae1c88e4cec34c8fa5cec6a4cc47de06?fbclid=IwAR3Gsj9rSMzszmZcVdvdUlMYO28ZE_eMmtsPTbTqrZXwERU8BZGbgW5pDdc

Lien pour IcoMoon : https://icomoon.io/

Dans le même esprit que Typed.js, dans un premier temps installez d'abord le plugin javascript. Créez un bloc de texte riche (rich text) Oxygen avec une structure comme celle-ci

<p>Oxygen est <span class="headingfx1">plus rapide, plus léger, très personnalisable, très cool ...</span></p>

Chaque virgule déterminera un bloc de texte qui sera mis en rotation avec les autres. De le même manière que Typed.js, rajoutez un code bloc (et respectez la classe assignée dans le riche texte) avec ceci

(function($) {
    $(".headingfx1").Morphext({
        animation: "bounceIn",
        separator: ",",
        speed: 2000
    });
}(jQuery));

Lien du plugin : https://morphext.fyianlai.com/

Après avoir installé la librairie javascript, insérer une classe à un élément texte d'Oxygen et un code bloc avec ceci

(function($) {
    var typed = new Typed(".typefx1", {
	strings: ["Mon texte Typed.js "],
	typeSpeed: 50,
	startDelay: 1000,
	loop: true,
	});
}(jQuery));

Configurez les options du plugin à votre goût, texte (à l'intérieur des guillemets de "strings", vitesse de l'animation, délai, boucle, ...

Lien du plugin : https://github.com/mattboldt/typed.js/

Le plugin s'utilise très facilement avec OxyPowerPack ou OxyAttributes. Après avoir installer le plugin, il faudra l'initialiser avec ce code :

window.onload = function() {
	lax.setup() // init

	const updateLax = () => {
		lax.update(window.scrollY)
		window.requestAnimationFrame(updateLax)
	}

	window.requestAnimationFrame(updateLax)
}

Ensuite il suffira de rajouter une classe (lax par exemple) et de rajouter les attributs comme ceci :

<p class="lax" data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

Vous retrouverez tous les presets sur la page du plugin.

Lien du plugin : https://github.com/alexfoxy/lax.js

Pour un projet je voulais changer la couleur de fond d'un champ (badge) provenant d'un champs Pods (ou ACF) en fonction du texte de son contenu (liste).

Il faut donc ajouter une classe à votre champ dynamique (dans ce cas mts-badge) et ciblé le mot voulu. Et ensuite utilisé ce code jQuery :

jQuery( "div.mts-badge:contains('Sold')").each(function() {
  jQuery(this).css( "background-color", "red");});

Merci à Lucas Chaplain pour son aide ...

Swiper vous permet de faire différents sliders avec une quantité d'options intéressantes comme la pagination, les sliders verticaux, la scrollbar, lazy load, effets 3D, ...

Vous pouvez intégrer Swiper avec Oxygen et utiliser Easypost ou le Repeater pour générer vos slides. Il faudra dans un premier temps recréer la structure nécessaire pour Swiper. Vous pouvez également utiliser les démos pour suivre le code. Nous allons suivre cet exemple swiper démo

swiper démo

Commençons par insérer une section avec une première div qui aura la classe principale de .swiper-container. Celle-ci contiendra le Easypost ou Repeater avec la classe .swiper-wrapper (classe qui va contenir les slides). Pour le repeater la classe créée avec le repeater sera la classe swiper-slide, dans le cas d'Easypost il faudra rajouter cette classe après oxypost dans le template php ce qui donnera <div class='oxypost swiper-slide'>

Dans la cas d'une pagination, rajouter une div avec la classe .swiper-pagination en-dessous du Repeater/EasyPost.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../package/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../package/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>
</body>

</html>

Lien du plugin : https://swiperjs.com/

Lien démo : https://oxygen.bulgaweb.com/swiper/

Copyright © 2019 - 2020 Bulgaweb
 | 
Développé par BulgaWeb
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram