ふわっと現れるアレ
Web
2022年6月5日
F a d e
I n
E f f e c t
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回はウェブサイトでよく見かける「スクロールするとふわっと現れるアレ」について書きます。
正式名称なんていうんでしょう。フェードイン?
CSS
animate.cssを用意します。
GitHubからダウンロードしてヘッダー内で読み込むか、
<link rel="stylesheet" href="css/animate.css">
またはCDNで呼び出します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
ふわっとさせる要素を最初透明にしておくために、CSSでopacity:0に設定します。
.animate-box {
opacity: 0;
}
waypoint.jsを読み込みます。
<script src="js/jquery.waypoints.min.js"></script>
スクリプト
var contentWayPoint = function () {
var i = 0;
$('.animate-box').waypoint(function (direction) {
if (direction === 'down' && !$(this.element).hasClass('animated')) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function () {
$('body .animate-box.item-animate').each(function (k) {
var el = $(this);
setTimeout(function () {
var effect = el.data('animate-effect');
if (effect === 'fadeIn') {
el.addClass('fadeIn animated');
} else if (effect === 'fadeInLeft') {
el.addClass('fadeInLeft animated');
} else if (effect === 'fadeInRight') {
el.addClass('fadeInRight animated');
} else if (effect === 'fadeInDown') {
el.addClass('fadeInDown animated');
} else {
el.addClass('fadeInUp animated');
}
el.removeClass('item-animate');
}, k * 200, 'easeInOutExpo');
});
}, 100);
}
}, {
offset: '85%'
});
};
うーん全然わからない。
少しずつ理解していく
それがいいんだ
ふわっと現れる
<div class="animate-box" data-animate-effect="fadeIn">
Fade in
</div>
Fade in
Fade in
Fade in
Fade in
Fade in
Fade in
左から現れる
<div class="animate-box" data-animate-effect="fadeInLeft">
Fade in Left
</div>
Fade in Left
Fade in Left
Fade in Left
Fade in Left
Fade in Left
Fade in Left
右から現れる
<div class="animate-box" data-animate-effect="fadeInRight">
Fade in Right
</div>
Fade in Right
Fade in Right
Fade in Right
Fade in Right
Fade in Right
Fade in Right
下から現れる
<div class="animate-box" data-animate-effect="fadeInUp">
Fade in Up
</div>
Fade in Up
Fade in Up
Fade in Up
Fade in Up
Fade in Up
Fade in Up
上から現れる
<div class="animate-box" data-animate-effect="fadeInDown">
Fade in Down
</div>
Fade in Down
Fade in Down
Fade in Down
Fade in Down
Fade in Down
Fade in Down
まとめ

Animate.cssを使えば他にもいろいろなアニメーションができそうです。
こういうのがオシャレなサイトへの第一歩だと信じてがんばります。
真のオサレサイトまでは一万歩あるかもしれないがな!