web-dev-qa-db-fra.com

Ajouter une animation CSS en tant que préchargeur à WordPress

J'ai trouvé un extrait d'animation CSS sur Codepen , et j'aimerais l'ajouter à mon site WordPress pour l'animation de préchargement, mais je n'ai trouvé aucune aide ou plug-in associé qui me permettrait d'ajouter un préchargement avec une animation CSS personnalisée. .

J'ai essayé de googler, mais tout ce que j'ai pu trouver, c'est des plugins acceptant "l'animation GIF" pour l'animation du préchargeur. Mais, je veux utiliser "animation CSS" au lieu de "animation GIF".

Aucune suggestion?

P.S. Je n'ai qu'une connaissance modérée de WordPress.

pluginsphpplugin-developmentcustomizationcss
2
Snazzy Sanoj

Vous pouvez y parvenir en définissant une classe sur le corps et en la supprimant avec JS lorsque la page est chargée. Ceci est juste un exemple de base mais cela fonctionnera hors de la boîte.

 // Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
    // add 'class-name' to the $classes array
    $classes[] = 'preloader-visible';
    // return the $classes array
    return $classes;
}

// Add preloader style
add_action('wp_head', function(){ ?>
  <style>
    /** let's every child  of body know there is a loader visible */
    body.preloader-visible {
      background:red;
    }

    /** by default loader is hidden */
    body > .loader {
       display:none;
    }

    /** when loader is active the loader will show */
    body.preloader-visible > .loader {
       display:block;
    }
  </style>
  <?php
});

// Remove preloader when document is ready
add_action('wp_footer', function(){ ?>
  <script>
    (function($){

      $(function () {

          $('body').removeClass('preloader-visible');

      });

    })(jQuery);
  </script>
  <?php
});
4
jgraup