NEWS2021.08.26【カラーミーショップ】フリーページで作ったコンテンツを共通ページ等で呼び出す方法
MORE

【CSS3とJavaScript】全画面表示から時間差で枠をつけるアニメーションを実装する方法

CSS

Webデザイン

前回の「オープニング画面で上下左右から順番にスライドインするアニメーションを実装する方法」でご紹介の応用で、オープニング画面の全画面表示に時間差でアニメーションで枠をつける方法を無理やり気味に実装してみました！

デモページ

オープニング画面の想定

今回はオープニングで画像を全画面表示して、一定時間経過後に外側からアニメーションで枠が重なってくる感じのものを作ります。

HTMLはこんな感じ

<header>
<ul>
<li> </li><!-- 画像の部分 -->
<li> </li><!-- 枠の部分 -->
</ul>
</header>

CSSはこんな感じ

header {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

ul li:nth-of-type(1) {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(1).active {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 1;
	background: url(https://oki-sitelabo.com/wp-content/uploads/2019/10/01-3.jpg) 50% 50% / cover no-repeat;
}

ul li:nth-of-type(2) {
	width: 100%;
	height: 100%;
	opacity: 1;
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(2).active {
	width: calc(100% - 200px);
	height: calc(100% - 200px);
	border: 100px #fff solid;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
}

@media (max-width: 450px) {
	ul li:nth-of-type(2).active {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		border: 20px #fff solid;

}
}

1つめの「li」で背景画像を全画面表示してから、2つめの「li」にアニメーションで枠を指定した要素を時間差で表示しています。

JavaScriptはこんな感じ

<script type="text/javascript">
$(function() {
    $("ul li").each(function(i) {
        setTimeout(function() {
            $("ul li").eq(i).addClass("active");
        }, 2000 * i);
    });
});
</script>

前回とは時間差を調整しているくらいです。

3つめ以降に「li」のアニメーションを追加する場合は、「addClass」の行を追加して時間を調整することができます。

$(function() {
    $setTimeout(function() {
        $("ul li").eq(0).addClass("active");
    }, 100 * 0);
    $setTimeout(function() {
        $("ul li").eq(1).addClass("active");
    }, 100 * 1);
    $setTimeout(function() {
        $("ul li").eq(2).addClass("active");
    }, 100 * 2);
    $setTimeout(function() {
        $("ul li").eq(3).addClass("active");
    }, 100 * 3);
});

応用することでウェブサイト制作に役立ちそう

こういったアニメーションを使ったデザインのウェブサイトも増えてきているので、いろいろと組み合わせてウェブサイト制作に役立てたいですね。

liタグを順番にアニメーションさせていく方法

https://reiwinn-web.net/2017/12/29/eq_each/

▲ページ先頭へ