ウェブサイトに雪を降らせる！jQueryの背景アニメーションの作り方

2022.1.10 更新

皆さまごきげんよう。

本日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。

目次

1. cssをワードプレス用に書き換える
2. ワードプレス用にjsファイルを作る
3. ワードプレスに外部ファイルを読み込ませる

1.cssをワードプレス用に書き換える

ワードプレス背景にどうやって雪を降らせるか？

考えたのは、画面の一番上に雪の降るレイヤーを被せる、という方法です。

前回はdivを一粒の雪片としましたが、ワードプレスの中にはたくさんのdivが存在していますので、区別するためにdivにidを付けたいと思います。

今回はsnoowというidを作り、cssを以下のように設定してみました。

 #snoow{
    position: fixed;
    top:0;
    left:0;
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }

z-index: 99;で画面の一番上の層にくるようにします。(Photoshopのレイヤー構造のイメージです)

また、pointer-events: none;にすることで、リンクへのタップ、クリックが可能になります。これを書き加えないと、画面に一枚のガラスが張られたようになってしまい、リンク先をクリック、タップしても動作しませんのでご注意！

あとは前回とほぼ一緒ですが、divに#snoowを付けたところと、スマホでの見え方も考慮してanimationの雪の落下速度をゆっくり目にして単位をemからvwに変更しています。以下cssの全文です。

  #snoow{
    position: fixed;
    top:0;
    left:0;
    overflow: hidden;
    z-index: 99;
    width: 100%;
    height: 100vh;
    pointer-events: none;
  }
  #snoow div {
    background-color: #eee;
    height: 0.3vw;
    width: 0.3vw;
    border-radius:0.3vw;
    position: absolute;
    pointer-events:none;
    box-shadow: 0 -100vh #eee;
    animation:anime1 25s -10s linear infinite;
    filter: blur(0.2em);
  }
  #snoow div:nth-of-type(2n){
    height: 0.7vw;
    width: 0.7vw;
    border-radius:0.7vw;
    animation-duration: 20s;
    filter: blur(0.2em);
  }
  #snoow div:nth-of-type(3n){
    height: 1vw;
    width: 1vw;
    border-radius:1vw;
    animation-duration: 15s;
    filter: blur(0.1em);
  }
  @keyframes anime1{
   0% {
    transform:translateY(0vh);
   }
   100% {
    transform:translateY(100vh);
   }
  }
  

2.ワードプレス用にjsファイルを作る

ワードプレスではコンフリクト（衝突）を避けるため、jQueryで使われる＄が使えません（プラグインなどで既に$を関数に使われていたりするため）。なので前回作ったjsファイルの中で、＄と書いた箇所はすべてjQueryに書き換えます。

今回は単一記事の投稿ページ（single.php）にのみ、雪を降らせようと思っています。

まず、単一記事の投稿ページに付けられているワードプレスのクラス名をfirebugなどのディベロッパツールで調べてみます。すると、単一記事の投稿ページのbodyには必ずクラス.single-postが付いています。

そこで、前回はjQueryの関数appendを使って body にコンテンツ (ここではdivs) を追加していたところを、クラス.single-postのついたbodyに、コンテンツ(divs)をappend（追加）するように書き換えます。

こうすることで、トップページや個別ページでは適用されず、単一記事のページでのみ適用されるようになります。

あるカテゴリーの記事にだけ使いたい、とか、ある特定の記事にのみに使いたい、という時はその記事のbodyに付いている特定のクラスを探しだして試してみて下さいね。

前回の記事との違いは4つです。

• var divsにidがsnoowであるdivを代入した
• forのところでi<=35として雪の降る量を調整した
• 最後から2番目の行、forが終わったあとで、<div id=”snoow”>を</div>で閉じている
• 最後の行で、.single-postの付いたbodyにdivsを足すように変えた

  jQuery(function(){
     var w = jQuery(window).width();//windowの幅を取得する。
     var h = jQuery(window).height();//windowの高さを取得する。
     var divs = '<div id="snoow">';//divsは、idをsnoowにしたdiv。

     for (var i=1 ; i<=35 ; i++) {//i<=35←この数字で雪の量を加減する。
     var sx = Math.floor(Math.random()*w);
     var sy = Math.floor(Math.random()*h);
     divs += "<div style='left:"+ sx +"px; top:"+ sy +"px;'></div>";
     //+=で"<div style='left:"～ を、forが終わるまでひとつづつ増やす。
    }

    divs += "</div>"; //上記の'<div id="snoow">'をここで閉じる。+=は連結の意味。
    jQuery("body.single-post").append(divs);
     //.single-postの付いたbodyにdivsを足す。
     //.single-postはワードプレスの個別記事のクラス名
 });
    

3.ワードプレスに外部ファイルを読み込ませる

では、cssとjsのファイルをお使いのftpにアップロードしましょう。
次にheader.phpに外部ファイルを読み込ませる記述を書いていきます。

ワードプレスで外部ファイルを読み込ませるphp関数は、以下二つを使います。

●wp_enqueue_scriptについての記事　ワードプレスに外部ファイルを読み込ませる方法

また、ワードプレスには親テーマ、子テーマそれぞれのURLを取得する関数があります。

私の場合、子テーマを使っておりますので　get_stylesheet_directory_uri()　の方を使うことになります。

ちなみにURLを取得する、のパスはどこまでか？と言いますと、
…wp-content/themes/お使いの親テーマor子テーマ
ここまでのURLになります。

子テーマフォルダの中にjsフォルダがあり、その中のファイルを指定する場合、私の例でいうとパスは

get_stylesheet_directory_uri().”/js/yuki-02.js”

このようになります。

この二つの関数を使って、header.phpの中の<?php wp_head(); ?>という記述の手前に下記のように書き加えます。

<?php
 wp_enqueue_style( 'snow-02', get_stylesheet_directory_uri()."/snow-02.css");
 wp_enqueue_script( 'yuki-02',get_stylesheet_directory_uri()."/js/yuki-02.js", array( 'jquery' ));
?>

<?php wp_head(); ?>

ウェブサイトの背景画像に p5.js を使う方法

後記

クリスマスや桜の季節になると、SNSのタイムライン上にも雪や花びらが降りますよね。季節や記事によって画面上に何かが現れる、というのも遊び心があって面白い演出になるのではないでしょうか？皆さんのサイトにもぜひ応用してみてくださいね！