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で作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …

メンバー一覧選手一覧

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

  1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

秒後に切り替わる

WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】 たぶんこれを使う理由としては、 ・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURL …

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

ブログとは

ブログとは

ブログ (blog) は、ウェブサイトの一種で、「WebをLogする」という意味でウェブログ (weblog) と名付けられ、それが略されてブログ(Blog)と呼ばれるようになった。 作者の個人的な日 …