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

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

関連記事

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

リストメニューを順番に表示

メニューリストを横から順番に表示させる jsとcss

  前回の記事では、『メニューリストを横から順番に表示させる cssのみ』ということで、 cssだけで動きのあるメニューを作成しました。   今回は、jsファイルに書き込んで同じよ …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …