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】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

カスタムスクロールバー

スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた

  WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …

svg div 変形

SVG div で変形を作る

  簡単に変形してダウンロード   おもしろいサイトを見つけましたので、紹介します。   説明をするより、サイトを開いて実用化するのはあなた次第(笑) トップページのヘッ …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

ヘッダー固定

【簡単】wordpress スクロールするとヘッダーが固定される

  ①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …