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

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

関連記事

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …

メンバー紹介選手紹介

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた①

  WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

カスタムフィールド カテゴリー

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

  いろいろ試してみた結果、やっとできたので覚書として記事にしました。   カスタムフィールドのカテゴリー画像作成   Advanced Custom Fieldsのプラ …