スクロール後のアニメーション実装と調整方法について書いてみる
先日noteにて以下の記事を公開しました。
スクロール後のアニメーションについて考えてみた
表示遅延や大きな動きさえしなければ、フェードインアニメーションを実装しても問題はないのでは!?という内容で、実際のサンプルを用意してご確認いただきました。
サンプル
自分が予想していたよりも賛成の方が多い印象です。
遅延やスピードの遅さが影響して閲覧しづらいというのが問題となっていたので、それを解消できるのであればアニメーションを肯定しても良いのかと。使いどころと調整さえすれば魅力的なエフェクトとして捉えてもらえるようになる。
そこで今回は、スクロール後のアニメーション実装方法と、その調整方法についてご紹介します。
※今回もサンプルを用意してあります。PCの方はサンプルで実際の表示と一緒にご確認いただいた方が分かりやすいかと思います。
■今回のサンプル >> スクロールアニメーションのサンプル
-------
ベースとなるアニメーションの実装
まずは、今回使用する『スクロールするとフェードインしながら表示』のベースとなる部分の実装をおこないます。
HTML
<div class="contents-wrap">
<figure class="scroll"><img src="images/photo01.png" alt=""></figure>
<div class="scroll text">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。だけど、設定が過剰になっているんだよね。閲覧しやすい適切な設定にすれば、そこまで気にならないよ。</p>
</div>
</div>動きをつけたい要素に『scroll』というclassをつけておきます。
CSS（レイアウト）
.contents-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.contents-wrap figure {
width: calc(100% - 550px);
}
.contents-wrap .text {
margin-top: 100px;
padding: 0 50px;
width: 550px;
}この辺はお好みで。
jQuery
$(window).on("load scroll", function () {
$('.scroll').each(function(){
var scrollItem = $(this).offset().top,
scroll = $(window).scrollTop(),
windowHeight = $(window).height();
if (scroll > scrollItem - windowHeight + 200){
$(this).addClass('scrollin');
}
});
});スクロールすると『scroll』というclassがついた要素に『scrollin』というclassを追加されるようにしてます。
また、可視範囲に入ってすぐ表示されないように、6行目の『200』という数字で調整してます。数を小さくすれば表示されるタイミングをもっと早めることができます。
これでベースが完成です。
アニメーションを調整する
アニメーションの調整はCSSでおこないます。
CSS（透明度）
.scroll {
opacity: 0;
}
.scroll.scrollin {
opacity: 1;
}『scroll』というclassをつけておいた要素を『opacity: 0』で透明度を0にして非表示にしておきます。そして、『scrollin』というclassが付与されると『opacity: 1』で表示されるという仕組みです。
ただ、これだけでは、可視領域に入った時にパッと表示されるだけになりますので、ここからアニメーション用のCSSを追加していきます。
CSS（下から上に移動しながらフェードイン）
.scroll {
opacity: 0;
transition: all .7s;
transform: translateY(40px);
}
.scroll.scrollin {
opacity: 1;
transform: translateY(0);
}『opacity』以外の部分が追加したアニメーション設定です。
『transition: all .7s』では、アニメーションの速度を設定できます。ここの数字を変更することで表示されるまでの時間を調整できます。
『1s』が1秒。今回設定した『.7s』は0.7秒。
『1ms』も設定できて1000分の1秒。
『transform』で要素の表示位置を移動させることができます。
スクロール前（.scroll）の『transform: translateY(40px)』で、基準からY軸に40px下の位置に移動させています。
スクロール後（.scroll.scrollin）の『transform: translateY(0)』で、基準の位置に戻るようになります。
これらの設定で、スクロールして可視領域に入った際に、基準の位置から40px下にあった要素が0.7秒かけて元の位置へ移動しながら、フェードイン表示できます。
要素ごとにアニメーションを調整する
ここからがこのnoteの本題。
これまでの設定で下から上へフェードインしながら表示させることができるようになるのですが、要素によっては「もう少し早めたい。」とか「移動距離を短くしたい。」など、調整をした方が閲覧しやすくなるケースが出てきます。
例えば、大きめに表示させた写真と、テキストを横並びにしたレイアウトは一般的によくあるものですが、これらの2つの要素のアニメーション設定を同じにすると、ちょっと違和感を感じてしまいます。
なので、私は以下のように設定してます。
HTML
<div class="contents-wrap">
<figure class="scroll left"><img src="images/photo01.png" alt=""></figure>
<div class="text scroll bottom">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。だけど、設定が過剰になっているんだよね。閲覧しやすい適切な設定にすれば、そこまで気にならないよ。</p>
</div>
</div>『scroll』を付与した要素に『left』や『bottom』といったclassを追加します。このclass名はお好みで結構です。
そして、CSSでアニメーションを調整します。
CSS
.scroll.bottom {
transition: all 1s;
transform: translateY(40px);
}
.scroll.bottom.scrollin {
transform: translateY(0);
}
.scroll.left {
transition: all .7s;
transform: translateX(-30px);
}
.scroll.left.scrollin {
transform: translateX(0);
}『bottom』を追加した要素は40px下から移動しながら0.7秒かけてフェードイン。
『left』を追加した要素は−30px左から移動しながら1秒かけてフェードイン。
『scroll』だけではなく追加でclassを付与してアニメーションを調整することで、要素のサイズが異なる場合であっても細かな調整が可能となります。
上から下へ
もちろん上から下へ移動させることも可能で、その場合は、
.scroll.top {
transition: all 1s;
transform: translateY(-60px);
}
.scroll.top.scrollin {
transform: translateY(0);
}
Y軸で−60px移動させれば上から下に移動させることができます。上からの場合はスクロールと同じ方向に進行していくので移動距離を他よりも多少大きめに設定します。
記事一覧で左の要素から順に表示
また、記事一覧など横ならびの要素を左から順番に表示させたいという場合もあるかと思います。この場合は以下のように設定します。
HTML
<div class="archive-wrap">
<div class="item scroll archive-left">
<figure><img src="images/photo01.png" alt=""></figure>
<div class="text">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。</p>
</div>
</div>
<div class="item scroll archive-left">
<figure><img src="images/photo01.png" alt=""></figure>
<div class="text">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。</p>
</div>
</div>
<div class="item scroll archive-left">
<figure><img src="images/photo01.png" alt=""></figure>
<div class="text">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。</p>
</div>
</div>
<div class="item scroll archive-left">
<figure><img src="images/photo01.png" alt=""></figure>
<div class="text">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。</p>
</div>
</div>
</div>
CSS（レイアウト）
.archive-wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 50px;
}
.archive-wrap .item {
width: 23%;
}
.archive-wrap .text {
padding: 20px 30px;
color: #fff;
background-color: #333;
}
.archive-wrap h3 {
font-size: 2.1rem;
}こちらもお好みで。
CSS（アニメーション）
.scroll.archive-left {
transform: translateX(-40px);
}
.scroll.archive-left:nth-child(1) {
transition: all .5s;
}
.scroll.archive-left:nth-child(2) {
transition: all .7s;
}
.scroll.archive-left:nth-child(3) {
transition: all .9s;
}
.scroll.archive-left:nth-child(4) {
transition: all 1.1s;
}
.scroll.archive-left.scrollin {
transform: translateX(0);
}『:nth-child(1) 〜 :nth-child(4)』で、アニメーションする速度をちょっとずつ遅らせることで、左の要素から順番に表示されているように見せております。
ロールイン表示
このアニメーションの名前が分からないのですが、可視領域に入ると左から右へ色付き背景が動いて要素が表示されるアレです。（表現が難しいので、サンプルを見てください）
HTML
<div class="rollin">
<div class="scroll rollin-item">
<figure><img src="images/photo01.png" alt=""></figure>
</div>
<div class="scroll rollin-item">
<h3>Scroll Design</h3>
<p>スクロールすると表示される機能は別に悪くはない。</p>
</div>
</div>
CSS（レイアウト）
.scroll.rollin-item {
margin-bottom: 100px;
text-align: center;
}
.scroll.rollin-item figure {
margin: 0 auto;
width: 800px;
}
.scroll.rollin-item h3 {
display: inline-block;
margin: 0 auto 30px;
padding: 10px;
font-size: 7rem;
line-height: 1;
}こちらもお好みで。
CSS（アニメーション）
.scroll.rollin-item figure {
position: relative;
}
.scroll.rollin-item figure:before {
content: '';
position: absolute;
right: 0;
width: 100%;
height: 100%;
background-color: #111;
transition: all .7s;
}
.scroll.rollin-item.scrollin figure:before {
width: 0;
}
.scroll.rollin-item h3 {
position: relative;
}
.scroll.rollin-item h3:before {
content: '';
position: absolute;
right: 0;
width: 100%;
height: 100%;
background-color: #111;
transition: all .4s;
}
.scroll.rollin-item.scrollin h3:before {
width: 0;
}画像も見出し（h3）も、『:before』で疑似要素を用意し、黒の背景色で要素を隠している状態にします。
スクロールして可視領域に入って『.scrollin』が付与されると、『width: 0』で疑似要素の横幅を0にして黒背景を無くします。
画像は『transition: all .7s』で0.7秒かけてアニメーションさせています。
見出しは『transition: all .4s』で0.4秒。
左から右へ移動させているのは『right: 0』です。要素の右側を基準にし、『width: 0』を『transition: all .7s』もしくは『transition: all .4s』かけてアニメーションさせるので、右へロールしているように見せております。
逆に、右から左へは『left: 0』にします。
-------
このように、
$(window).on("load scroll", function () {
$('.scroll').each(function(){
var scrollItem = $(this).offset().top,
scroll = $(window).scrollTop(),
windowHeight = $(window).height();
if (scroll > scrollItem - windowHeight + 200){
$(this).addClass('scrollin');
}
});
});上のjQueryを設定しておき、あとはHTMLやCSSでさまざまなアニメーションを設定することで、要素ごとにアニメーションを調整させることができるようになります。
細かい調整をおこなう事で、Webサイトのアニメーションに対しての嫌悪感をなくすことだけでなく、逆に心地いいサイト体験を提供することができますので、ぜひ皆さんも試してみてください！
■今回のサンプル >> スクロールアニメーションのサンプル
この記事が気に入ったらサポートをしてみませんか？