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

【CSS3とJavaScript】オープニング画面で上下左右から順番にスライドインするアニメーションを実装する方法

CSS

Webデザイン

おしゃれなデザインのウェブサイトで最近実装されているのが、オープニング画面で「上下左右から順番に画像などのコンテンツがスライドイン」しているのをよく見かけるようになりました。

とりあえずCSS3と少しのJavaScriptでデモページを作りましたので、そちらをご覧下さい。

デモページ

CSSと少しのJavaScriptで簡単実装できました

今回は左(左上)からスライドインするアニメーションと、下(右下)からスライドインするアニメーションを順番に表示することを目的としました。

スライドインする際に画像だけでは寂しいので、画像の下にカラーを指定したコンテンツも順番に表示しようと思うので、左用に2つのコンテンツ、右用に2つのコンテンツの合計4つのコンテンツを用意します。

今回は「背景色」と「背景画像」のみで作るのでHTMLは下記のようになります。

<header>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</header>

CSSではスライド前とスライド後の設定をします。

img {
	width: 100%;
	height: auto;
}

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

ul li:nth-of-type(1) {
	opacity: 0;
	transform : translate(-50%, 0);
	-webkit-transform : translate(-50%, 0);
	-moz-transform : translate(-50%, 0);
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(2) {
	opacity: 0;
	transform : translate(-50%, 0);
	-webkit-transform : translate(-50%, 0);
	-moz-transform : translate(-50%, 0);
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(3) {
	opacity: 0;
	transform : translateY(200px);
	-webkit-transform : translateY(200px);
	-moz-transform : translateY(200px);
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(4) {
	opacity: 0;
	transform : translateY(200px);
	-webkit-transform : translateY(200px);
	-moz-transform : translateY(200px);
	transition : all 1000ms;
	-webkit-transition : all 1000ms;
	-moz-transition : all 1000ms;
}

ul li:nth-of-type(1).active {
	width: calc(100% - 40%);
	height: calc(100% - 20%);
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	background: #b5c7d3;
}

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

ul li:nth-of-type(3).active {
	width: calc(100% - 40%);
	height: calc(100% - 50%);
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	background: #b5c7d3;
}

ul li:nth-of-type(4).active {
	width: calc(100% - 40%);
	height: calc(100% - 50%);
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	background: url(https://oki-sitelabo.com/wp-content/uploads/2019/09/04-1.jpg) 50% 50% / cover no-repeat;
}

そこに少しのJavaScriptを書き加えれば完成です♪

$(function() {
    $("ul li").each(function(i) {
        setTimeout(function() {
            $("ul li").eq(i).addClass("active");
        }, 500 * i);
    });
});

応用することでいろんなウェブデザインに役立ちそう！

スライドインの方向やフェードイン、表示されるタイミングなどを工夫することで、いろんな表現ができると想いますので、わたしも試行錯誤して今後のウェブサイト制作に役立てたいと思います。

意外と少ないコードで実装できたので良かった♪

参考にしたページ

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

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

▲ページ先頭へ