web-dev-qa-db-ja.com

CSSアニメーションをプレローダーとしてWordPressに追加する

Codepen でCSSアニメーションスニペ​​ットを見つけたので、それを私のWordPressサイトに追加してプレローダーアニメーションを作成したいのですが、カスタムCSSアニメーションでプレローダーを追加できるようなヘルプやプラグインが見つかりません。

グーグルを試してみましたが、プレローダーアニメーションに "GIFアニメーション"を受け付けるプラグインだけが見つかりました。しかし、私は「GIFアニメーション」の代わりに「CSSアニメーション」を使いたいのです。

助言がありますか？

P.S私はWordPressについての中程度の知識しかありません。

pluginsphpplugin-developmentcustomizationcss
2
Snazzy Sanoj

これを実現するには、ボディにクラスを設定し、ページがロードされたときにそれをJSで削除します。これは単なる基本的な例ですが、そのまま使用できます。

 // 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