画像を順番に重ねて表示
投稿日:
画像を順番に重ねて表示したい。
画像を遅らせて表示したい。
画像に動きをつけたい。
今回は、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テーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …
-
-
Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …
-
-
VEGAS BACKGROUND SLIDESHOWの使い方
VEGAS BACKGROUND SLIDESHOWの使い方 画像だけを利用した基本的な使い方 独自で作成したjsファイルがあるならそちらに以下のコードを記述 …
- PREV
- ロリポップでサーバー接続エラーの時は
- NEXT
- ポイントスタジアムで小遣いゲット!