【Javascript】スクロールして要素が画面内に入った時にふわっと表示させるアニメーション【初心者向け】

画面をスクロールして、要素が画面内に入った時にふわっと表示させるアニメーションは、色んなサイトで見かけるしクライアントの要望も多いです。
このページに辿りついたあなたは、AOS や Animation.css でも納得いく動きにならなかったのでしょう。

そんなあなたに、とっても簡単に実装できるスクリプトを公開しているサイトがあったのでご紹介します。
移動量をCSSで制御しているのでレスポンシブにも最適です。

参考サイトはこちら。まさに神！初心者向けです。
【JavaScript・CSS】スクロールしたらフワッと要素を表示させるスクリプトの使い勝手を良くしてみる

こちらのサイトをもっと簡単にご紹介します。

この記事の目次

  1. 動かしたい要素にclassを追加
  2. CSS
  3. Javascript
  4. カスタマイズ

動かしたい要素にclassを追加

  1. アニメーションさせたい要素にclass "sa" を追加
  2. 次にどのような動きにするかのclass 例："sa--up" を追加

HTML側は、この２つのclassをセットで追加するだけです。
「２」の動き方については以下の通り。

<div class="sa sa--up">下から上にフェードイン</div>
<div class="sa sa--down">上から下にフェードイン</div>
<div class="sa sa--lr">左から右にフェードイン</div>
<div class="sa sa--rl">右から左にフェードイン</div>
<div class="sa sa--scaleUp">拡大しながらフェードイン</div>
<div class="sa sa--scaleDown">縮小しながらフェードイン</div>
<div class="sa sa--rotateL">左に回転しながらフェードイン</div>
<div class="sa sa--rotateR">右に回転しながらフェードイン</div>

CSS

それぞれの値は読み込まれる初期状態です。
.sa--lrでは初期状態を左に100px移動させておき、
アニメーションしながら0pxに戻るため、左から右に動きます。
.sa--upは最初に上から100px下に移動しているものを、アニメーションで上から0pxに移動させるという意味です。

.sa {
opacity: 0;
transition: all .5s ease;
}
.sa.show {
opacity: 1;
transform: none;
}
.sa--lr {
transform: translate(-100px, 0);
}
.sa--rl {
transform: translate(100px, 0);
}
.sa--up {
transform: translate(0, 100px);
}
.sa--down {
transform: translate(0, -100px);
}
.sa--scaleUp {
transform: scale(.5);
}
.sa--scaleDown {
transform: scale(1.5);
}
.sa--rotateL {
transform: rotate(180deg);
}
.sa--rotateR {
transform: rotate(-180deg);
}

Javascript

まずjQueryを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

次に下記コードを</body>の直前にコピペします。
4行目の”300″は、要素が画面の下から入って300pxになったらアニメーションを開始するという意味です。

<script>
var scrollAnimationClass = 'sa';
var scrollAnimationShowClass = 'show';
var triggerMarginDefault = 300;

var scrollAnimationElm = document.querySelectorAll('.' + scrollAnimationClass);
var scrollAnimationFunc = function() {
var dataMargin = scrollAnimationClass + '_margin';
var dataTrigger = scrollAnimationClass + '_trigger';
var dataDelay = scrollAnimationClass + '_delay';
for(var i = 0; i < scrollAnimationElm.length; i++) {
var triggerMargin = triggerMarginDefault;
var elm = scrollAnimationElm[i];
var showPos = 0;
if(elm.dataset[dataMargin] != null) {
triggerMargin = parseInt(elm.dataset[dataMargin]);
}
if(elm.dataset[dataTrigger]) {
showPos = document.querySelector(elm.dataset[dataTrigger]).getBoundingClientRect().top + triggerMargin;
} else {
showPos = elm.getBoundingClientRect().top + triggerMargin;
}
if (window.innerHeight > showPos) {
var delay = (elm.dataset[dataDelay])? elm.dataset[dataDelay] : 0;
setTimeout(function(index) {
scrollAnimationElm[index].classList.add('show');
}.bind(null, i), delay);
}
}
}
window.addEventListener('load', scrollAnimationFunc);
window.addEventListener('scroll', scrollAnimationFunc);
</script>

カスタマイズ

スクロール量で表示タイミングをずらす

javascriptで要素が画面内に入って300pxになったらアニメーションをするようになっていますが、
date属性を追加することで個々に設定が出来ます。
data-sa_margin="100" を追加すれば、300pxではなく100px移動したらアニメーションを開始します。

<div class="sa sa--up" data-sa_margin="100">画面内に要素が入って100pxでアニメーション開始</div>

時間で表示タイミングをずらす

スクロール量ではなく時間でずらすことも出来ます。
data-sa_delay="200"を追加すれば 200ミリ秒遅くアニメーションを開始します。

<div class="sa sa--up" data-sa_delay="200">200ミリ秒遅くアニメーションを開始</div>

© GOKAN DESIGN STUDIO