上記の画像はHTML、CSS、Javascriptを使用して作成しています。

ここでは、上記のように、画像がフェイドインしながらズームアップし、そしてフェイドアウトしていく処理を解説しています。

今回の記事は、https://wemo.tech/1653の記事を参考にして作成させて頂きました。コードについてはほぼ一緒ですが、WordPressで使用するために微妙な違いがあるので、WordPressでJavascriptを実装して画像の操作ををしたい場合に参考になると思います。

では、早速解説しています。

まずは、HTMLの設定から

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//HTMLの設定
<div class="wrapper">//全体のラッパー（画像を囲むdivタグの調整用）
<ul id="slide_wrapper">//スライドのラッパー
  <li class="slide_items">//スライド画像を挟み込むliタグ
    <img src="http://hiro-contribution.com/wp-content/uploads/2020/01/2020-01-03-1711.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-340" />
  </li>
  <li class="slide_items">
    <img src="http://hiro-contribution.com/wp-content/uploads/2020/01/2020-01-03-1713.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-341" />
  </li>
  <li class="slide_items">
    <img src="http://hiro-contribution.com/wp-content/uploads/2020/01/2020-01-03-1714.jpg" alt="" width="640" height="427" class="alignnone size-full wp-image-342" />
  </li>
</ul>
</div>

HTMLの設定はこれだけです。今回は画像を3枚用意しました。

１．divタグで画像の枠全体を囲む。class=”wrapper”を設定。

２．ulタグでliタグを囲む。id=”slide_wrapper”を設定。

３．liタグで画像を囲む。class=”slide_items”を設定。

４．imgタグを挿入。

HTMLの設定としては以上になります。

次にCSSの設定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//CSSの設定
.wrapper{
　padding: 16px;//パディング設定。ここは不要と言えば不要かも。
　margin: 0 auto;//marginのtopとbottomを0設定。左右をauto設定。
　width: 87%;//widthは画像のサイズに合わせて今回は87%にしています。ズームアップ。どれだけズームアップするかで調整が必要。ズームアップの際に余白が
　　　　　　　 //生まれてしまいます。
}
 
#slide_wrapper {
  position: relative;//スライドのラッパーの配置を設定。あとで2枚目以降でposition:absolute;を設定するための準備。
  overflow: hidden;
  margin: 0 auto;
}
#slide_wrapper .slide_items {
  opacity: 0;
  transition: opacity 2s linear, transform 7.5s linear;
  position: relative;
}
#slide_wrapper .slide_items:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
#slide_wrapper .slide_items.show {
  opacity: 1;
}
#slide_wrapper .slide_items.zoom {
  transform: scale(1.3);
}

次にCSSの設定。

CSSは少し複雑に感じるかも知れません。

.wrapperを設定

ulタグを囲む大枠の設定になります。paddingとmarginについてはこれを見ている人ならきっと分ると思います。

ポイントは、width。widthについては、今回は87％としています。ulタグを囲む大枠が大きくなりすぎると、ズームアップの際に

余白が生まれてしまうので、少しずつ縮めていき87％になりました。ここでは画像のサイズとの兼ね合いになるので、調整しながら

適用させていくのが良いですね。

#slide_wrapper

まず、position:relativeでulタグの配置位置を設定しています。あとで、position: absolute;top:0;left:0;を設定する時に、基準の位置がutタグの左上になるようにするためです。

overflow: hidden;ははみ出した部分は非表示にするためです。はみ出すとかっこわるいですから(*^-^)

#slide_wrapper .slide_items

opacity: 0;で一番最初は非表示の状態に。

transition: opacity 2s linear, transform 7.5s linear;であとで設定する.showと.zoomの適用をゆるやかにしています。ここが今回のCSSのポイントになります。

opacity 2s;で#slide_wrapper .slide_itemsのopacity: 0;と.showのopacity: 1;を2秒間かけて実現。

transform 7.5s linear;で.zoomのtransform: scale(1.3);を7.5秒かけて実現する動きを設定しています。

#slide_wrapper .slide_items:not(:first-child)

position: absolute;で#slide_wrapperに設定したposition: relative;の配置を引き継ぎ。

さらに、その配置位置を基準にtop;0;left:0;を設定。つまり#slide_wrapperの左上に配置しています。

#slide_wrapper .slide_items.show

opacity: 1;で画像が表示されるようにする設定。

#slide_wrapper .slide_items.zoom

transform: scale(1.3);で画像を1.3倍に拡大しています。

今回のCSSのポイント

今回のCSSのポイントとしては、#slide_wrapper .slide_items で指定した、transition: opacity 2s linear, transform 7.5s linear;が#slide_wrapper .slide_items.showで指定したopacity: 1;と#slide_wrapper .slide_items.zoomで指定したtransform: scale(1.3);にも適用されるところです。

このあとで説明するJavascriptの設定で、CSSを追加、削除をしているので、#slide_wrapper .slide_itemsのtransition: opacity 2s linear, transform 7.5s linear;が#slide_wrapper .slide_items.showのopacity: 1;と#slide_wrappe .slide_items.zoomで指定したtransform: scale(1.3);にも適用される形になります。

また、CSSの読み込みについては、WordPressに既に適用されているCSSファイルの最後に追記する形で対応できます。（既に設定されているidやclassと重複しないようにだけ注意すればOKです。）

では最後にJavascriptの設定の解説をします。

最後にJavascriptの設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function sliderStart() {
 
    const slide = document.getElementById('slide_wrapper');      //スライダーのslide_wrapper情報取得
    const slideItem = slide.querySelectorAll('.slide_items');   //スライド要素を配列で取得
    const totalNum = slideItem.length - 1;                     //スライドの合計枚数取得、配列取得のため-1
    const FadeTime = 2000;                                     //フェードインの時間設定
    const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
    let nowNum = 0;                                            //現在稼働しているスライド番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド
 
    
    slideItem[0].classList.add('show', 'zoom');// スライドの1枚目を表示・フェードイン（まずは、表示させてから動きを付けていきます。）
 
    
    setInterval(() => {  // 反復処理
        if (nowNum < totalNum) { //if文で条件分岐。現在表示されている画像が最後の画像でないかをチェック。
 
            let nowSlide = slideItem[nowNum];  //現在表示されている画像を変数に格納。
            let NextSlide = slideItem[++nowNum];  //現在表示されている画像に１を足し、次の画像の変数に格納。
 
          
            nowSlide.classList.remove('show'); //.show_削除でフェードアウト。opacity:1を設定しているCSSを削除する事で画像を削除。
            
            NextSlide.classList.add('show', 'zoom');// と同時に、次の画像をにshowとzoomのCSSを設定することで、表示とズームアップ開始。
            
            setTimeout(() => {
                nowSlide.classList.remove('zoom');//2秒後に.zoomをズームアップを停止。
            }, FadeTime);  //フェードアウトする秒数設定。
 
        } else {  //elseで条件分岐。上記のnowNum < totalNum、つまり最後の画像になった場合の処理を以下に記述。
 
            let nowSlide = slideItem[nowNum];  //現在表示されている最後の画像を格納
            let NextSlide = slideItem[nowNum = 0];  //次の画像に0、つまり一番最初の画像を格納。
 
            //以下はif文がtrueの時と同じ処理。
            nowSlide.classList.remove('show');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show', 'zoom');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom');
            }, FadeTime);
 
        };
    }, IntarvalTime);
 
}
window.onload=sliderStart;

使用する変数の定義と宣言

まずは、使用する変数の定義から入っていきます。

const slide = document.getElementById(‘slide_wrapper’);で <ul id=”slide_wrapper”>~~~</ul>の情報全体を取得します。

const slideItem = slide.querySelectorAll(‘.slide_items’);で上記で取得した情報から<li class=”slide_items”>～～～</li>の情報を配列で取得。

const totalNum = slideItem.length – 1;で<li class=”slide_items”>～～～</li>の配列の長さ、つまり配列要素の数を取得。

const FadeTime = 2000;で画像がフェイドアウトする秒数を2秒に指定。

const IntarvalTime = 5000;で関数の繰り返し処理の時間間隔を5秒に指定。

let nowNum = 0;で今の表示している画像変数の初期化。

let nowSlide;で現在表示している画像の変数を宣言。

let NextSlide;で次に表示する画像の変数を宣言。

最初の画像を表示

slideItem[0].classList.add(‘show’, ‘zoom’);で最初のli要素にCSSの.showと.zoomを追加設定。これでまずは一枚目の画像がフェードインしてきます。

条件分岐と関数内の変数設定

if (nowNum < totalNum)で表示している画像が、画像の総数よりも小さい場合に処理を開始する設定。

let nowSlide = slideItem[nowNum];で現在表示している画像を変数に格納（配列変数）。

let NextSlide = slideItem[++nowNum];で現在表示している画像に1を足して、次に表示される画像を変数に格納（配列変数）。

また、画像の総数よりも小さくない、つまり画像の総枚数にnowNumが達した場合は、else以下の処理が実行される事になります。

.showを削除して画像をフェイドアウト

nowSlide.classList.remove(‘show’);で今表示されている画像のclassの.showを削除することで、画像をフェイドアウト。

.showと.zoomを追加して表示、ズームアップ

NextSlide.classList.add(‘show’, ‘zoom’);で次の画像のclassの.showと.zoomを追加することで、表示とズームアップ。

.zoomを削除してズームアップ停止。

nowSlide.classList.remove(‘zoom’);で今表示されている画像のズームアップを停止。

この処理にsetTimeoutを設定することで、2秒後にズームアップが停止する設定になっています。

繰り返し処理

上記の処理の流れをsetInterval関数で囲むことで、これらの処理が繰り返されます。

関数実行

window.onload=sliderStart;で関数を実行しています。

WordPressでjavascriptの読み込み

最後にWordPressでJavascriptを読み込む方法について解説しますね。

WordPressでJavascriptを読み込む場合によく使われるのが、「wp enqueue script」関数。

この関数をfunctions.phpに記述します。記述方法としては以下の通りになります。

1
2
3
4
5
6
7
//Javascriptの読み込み
if(is_single('339')){
function zoom_up() {
wp_enqueue_script('zoomup-script',get_stylesheet_directory_uri().'/js/zoomup.js',array(),'',true);
}
add_action('wp_enqueue_scripts','zoom_up');
}

まず、if文で条件分岐を設定します。

これをしないと、全てのページに今回のJavascriptのスクリプトが読み込ま()れてしまい、不要なスクリプトを読み込んでしまうページが大量発生してしまいますからね。

条件に使っているのは、is_single()です。

この()の中に個別ページの番号を挿入することで、特定の個別ページのみに今回のJavascriptのスクリプトを読み込ませることができます。

因みに、個別ページのページ番号は投稿画面のURLに記されているpost.php?post=○○○の○○○のことです。

このページは「339」と表示されていたので、is_single(‘339’)と記述しています。

そして、wp enqueue script()関数を使って今回のスクリプトを読み込みます。

（wp enqueue script()関数の詳しい使い方を知りたい方は、「WordPressでjavascriptを読み込む2つの方法。あなたはどっち派？」を参照してみて下さい。）

ただ、今回の場合、子テーマを使用してスクリプトを読み込んでいるので、読み込み用のパスを作る時に、get_stylesheet_directory_uri()を使用していますが、子テーマを使わない場合はget_template_directory_uri()を使ってパスを作って下さいね。

ここを間違うとちゃんと読み込んでくれませんから。結構、要注意です。

WordPressでJavascriptを使って画像をズームアップしながらフェイドイン・アウトする方法まとめ。

以上がWordPressでJavascriptを使って、画像をズームアップしながらフェイドイン・フェイドアウトする方法になります。

分ってしまえば、それ程難しくはないですが、普段CSSやJavascriptを触っていない人からすると少し複雑に思えるかも知れないですね。

ただ、今回紹介したコードはCSSのidやclassの重複がなければほぼコピペで使えます。（is_singleのページ番号はコピペ不可）

もし、WordPressでJavascriptの実装をするなら参考にして貰えると嬉しいです。