wordpress

画像を順番に重ねて表示

投稿日:

画像を順番に表示

 

画像を順番に重ねて表示したい。

画像を遅らせて表示したい。

画像に動きをつけたい。

 

今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示したいと思います。

 

分割した画像を用意

 

順番に表示する画像を用意しますが、ここでは透過を使ってやってみたいと思いますので、png形式の画像を用意します。

1つ目の画像

レイヤー画像

 

2つ目の画像

レイヤー画像

 

3つ目の画像

レイヤー画像

 

以上3つの画像を時間差で合体させます。

 

WordPressでの記述

 

header.phpに記述

 
表示させたい部分に記述します。


<?php if ( is_front_page()): ?>
    <div class="top-img">
     <ul class="top-layer">
      <li><img src="https://◯◯◯.com/wp-content/themes/△△△/images/top01.png"></li>
      <li><img src="https://◯◯◯.com/wp-content/themes/△△△/images/top02.png"></li>
      <li><img src="https://◯◯◯.com/wp-content/themes/△△△/images/top03.png"></li>
     </ul>
    </div>
<?php endif;?>

 

CSSを記述

 
cssの部分は、自分のイメージと合うようにサイズなどを調整してください。


.home .top-img{
  width:120rem;
  margin:0 auto;
  display:block;
}
.home .top-img ul{
  position:relative;
  padding-top:70%;
}
.home .top-img ul li{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin:0 auto;
  list-style:none;
}

 

JavaScriptを記述

 


jQuery(function() {
    jQuery('.home .top-img ul li')
        .css({opacity: 0})
        .each(function(i){
            $(this).delay(1000 * i).animate({opacity:1}, 1500);
        });
});

 

 



 

 

まとめ

 
ざっくりと紹介しましたが、phpやcss、jQueryの部分は必要ない記述も含まれているかもしれませんが、いろいろ試してみてください。

-wordpress
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた②

  4.まずは、function.phpに追加 テーマによっては、変更しなくてもきれいに表示されることもあります。 ※function.phpに追加する前に、念のためfunction.php …