画像を順番に重ねて表示
投稿日:
画像を順番に重ねて表示したい。
画像を遅らせて表示したい。
画像に動きをつけたい。
今回は、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】子テーマを作ろう
プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】 レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …
-
-
スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた
WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない?って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …
-
-
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …
-
-
【簡単】wordpress スクロールするとヘッダーが固定される
①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …
- PREV
- ロリポップでサーバー接続エラーの時は
- NEXT
- ポイントスタジアムで小遣いゲット!