BLOG

ブログ

programming

2022.11.29

たった数行のjQueryとCSSで“それっぽい”アニメーションを実装する方法

こんにちは、ティウェブ藤園です。

以前にもWebサイトのアニメーションについての記事を書いておりますが、今回は少しのjQueryとCSSのみで、かんたんにそれっぽくアニメーションを実装する方法をご紹介します。

完成形

まず、完成形を下記のリンクからご覧ください。

デモページ

スクロールすると、上から順番に画像がふわっと表示されているかと思います。

HTML＋jQuery（このjQueryは＜/head＞直前がオススメです）

<html>
<head>

<!-- 省略 -->

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function add_class_in_scrolling(target) {
	var winScroll = $(window).scrollTop();
	var winHeight = $(window).height();
	var scrollPos = winScroll + winHeight;
	if(target.offset().top < scrollPos) {
		target.delay(300).queue(function() {
			$(this).addClass('is_show').dequeue();
		});
	}
}
$(function() {
	$('.is_animation').each(function(){
		add_class_in_scrolling($(this));
	});
});
$(window).on('scroll',function() {
	$('.is_animation').each(function(){
		add_class_in_scrolling($(this));
	});
});
</script>
</head>
<body>

<p class="is_animation"><img src="" alt=""></p>

</body>
</html>

上記のパターンで付与するclassを変える、増やすなどすれば、対応するCSSを作ることで左右動くパターンなども作成可能です。

CSS

.is_animation {
	opacity: 0;
	transition: .8s;
	transform: translate(0,30px);
}
.is_animation.is_show {
	opacity: 1.0;
	transform: translate(0,0);
}

上記のCSSで、少し下からスライドしながら、ふわっと表示されるアニメーションが付与されます。

まとめ

上記のjQueryとCSSはclassの変更やtransformの内容を書き換えれば、その他にもさまざまなアニメーションを付与することが可能です。

もちろん、左右から現れるものやフリップするものなど、たくさんのアニメーションをパッケージングしたライブラリも各種存在します。
しかし、過剰で複雑なアニメーションはページの見やすさ、文章の読みやすさを損ねることもありますし、１・２種類のみのシンプルなものだけで十分な場合は、外部ファイルのライブラリを使用することなく簡素なコードで実装する方が、より軽量化できてストレスなく動かすことが可能です。

ティウェブでは、お客様がWebサイトに掲載したい内容に合わせて様々なご提案をさせていただきますので、Webサイト制作で気になることがありましたらぜひご相談くださいませ。