こんにちは、まろCです。
今回は、ScrollMagicを使ったアニメーション表現をご紹介します。
スクロールにあわせて文字が出てくる表現は、その文字に目を向けさせて、読み手を引き込む効果があります。また、easingをうまく使うことで、サイト内の雰囲気も演出できるので重宝します。
使い回しができるJavaScriptを作成していましたので、それを使ってできる簡単な表現を解説したいと思います。sassやES6で記述していますが、初心者の方も最後までお付き合いいただけると幸いです。
- ＼この記事を読んだらできるようになること／
-
- 簡単にスクロールアニメーションが実装出来るようになる
- cssのアニメーションだけ変えれば、いろんなサイトに使える
目次
▼ScrollMagicの紹介と基本はこちら ScrollMagic2系を使って、スクロールに応じたアニメーションをさせてみよう jQueryプラグイン「ScroolMagic」2系でよく使う機能を紹介します
Kazuya Takato
Kazuya Takato
必要なファイル
作成する上で必要になるファイルは、下記の4点。
- ScrollMagic本体
- 汎用クラスが記述されたjavascript
- アニメーションを記述したcss
- html
実装の手順
はじめに全体が見えたほうがわかりやすいと思うので、全容をcodepenにまとめました。まずはこちらをご覧ください。
See the Pen GEoZBR by maroc (@maroc) on CodePen.
スクロールすると、TITLEの文字、テキストがふわっと出てきました。
では、これを実現する実装の流れをステップにまとめましたので、見ていきましょう。
《STEP1》 動かしたい箇所のhtmlに.js-scroll-fadeクラスをつける
今回は、タイトルとテキストをふわっとアニメーションさせていきたいので、.page__title、.page__textをもつクラスに.js-scroll-fadeクラスを付与します。
タイトルやテキスト自体の装飾は、それぞれのクラスにて行います。また、次の章で.js-scroll-fadeにアニメーションの装飾を行っていきます。
<secrion class="page">
<div class="page__space">SCROLL DOWN</div>
<h2 class="page__title js-scroll-fade">TITLE</h2>
<p class="page__text js-scroll-fade">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
<!--中略-->
</secrion>.page {
//中略
&__title {
text-align: center;
font-size: 56px;
margin: 0 0 40px;
}
&__text {
font-size: 20px;
line-height: 2;
margin: 0 0 40px;
}
}《STEP2》 cssでアニメーションを設定する
.js-scroll-fadeクラスに、下からふわっと出てくるようなアニメーションをつけてみました。初期状態の要素に.is-animationクラスをつけることで、アニメーションします。
.js-scroll-fade {
position: relative;
opacity: 0;
transform: translate(0, 40px);
transition: all 1s cubic-bezier(0.155, 0.910, 0.695, 0.950);
&.is-animation {
opacity: 1;
transform: translate(0, 0);
}
}サイトによって、速度や、位置、イージングを変えてみましょう。
《STEP3》 JSの対象の箇所に、ScrollMagicでsceneを作成する
.js-scroll-fadeクラスを持つ要素に対して、ScrollMagicのイベントを付与していきます。
class ScrollFade {
constructor() {
this.ANIMATION_CLASS = 'is-animation';
let $section = document.querySelectorAll('.js-scroll-fade:not(.is-animation)');
if($section.length === null) {
return;
}
let controller = new ScrollMagic.Controller();
for(let i = 0; i < $section.length; i++) {
let scene = new ScrollMagic.Scene({
triggerElement: $section[i],
triggerHook: 'onEnter',
reverse: false,
offset: 100
})
.addTo(controller);
scene.on('enter', ()=>{
$section[i].classList.add(this.ANIMATION_CLASS);
});
scene.on('end', ()=>{
scene.destroy(true);
});
}
}
}
new ScrollFade();.js-scroll-fadeを持つ要素の位置に来たら、その要素に.is-animationクラスを付与してアニメーションを開始させます。
▼scene.on(‘enter’, …);の箇所
scene.on('enter', ()=>{
$section[i].classList.add(this.ANIMATION_CLASS);
});このjsでは、各要素一回きりのアニメーションにしていますので、アニメーション開始位置をはずれたら、その設定を破棄しています。
▼scene.on(‘end’, …);の箇所
scene.on('end', ()=>{
scene.destroy(true);
});まとめ
いかがでしたか？ 使い回せるものを作ることで、どんどん効率化が進んで行きますね。
いいアニメーションライフを。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
