ScrollMagicを使ってふわっと要素を出す方法
スクロールと連動させて何かをしたいならScrollMagicを使うことをおすすめします。
理由はいくつかありますが、一番はscrollMagicというだけあって、スクロール時のイベントとを取得しやすいことです。
scrollMagicの公式のデモサイトはこちら
サクッとデモだけ見たい人
サクッと実装だけみたい人は下記より見てください
See the Pen scrollMagic by xhisashix (@xhisashix) on CodePen.
ディレクトリの構成
├── css
│ └── style.css
├── index.html
└── js
└── scrollMagic.jsCDNの読み込み
bodyの閉じタグの上に記載
CDNのリンクに付いてはScrollMagicのデモサイトのページにも記載があります。
<span><script <span class="hljs-attr">src</span>=<span class="hljs-string">"//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"</span>></span><span></script></span>
<span><script <span class="hljs-attr">src</span>=<span class="hljs-string">"//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"</span>></span><span></script></span>サンプルHTML
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>CSS
.section {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto;
max-width: 980px;
width: 100%;
}
.section .box {
margin-top: 20px;
margin-left: 20px;
width: 200px;
height: 200px;
background: #eee;
opacity: 0;
transition: 0.5s;
transform: translateY(15%) rotate(-45deg);
}
.section .box:nth-child(odd) {
transform: translateY(-15%) rotate(45deg);
}
.section .box.active {
opacity: 1;
transform: translateY(0);
}JavaScript
特定のクラスがついてるものすべてにアニメーションを適応點せたかったので
今回は特定のクラスをすべて取得して、取得してきた要素に対してイベントを発火させるようにしました。
class ScrollFadeIn {
constructor() {
let box = document.querySelectorAll('.box:not(.active)');
console.log(box);
if (box.length === null) {
return;
}
let controller = new ScrollMagic.Controller();
for (let i = 0; i < box.length; i++) {
let scene = new ScrollMagic.Scene({
triggerElement: box[i],
triggerHook: 'onEnter',
reverse: false,
offset: 150,
})
.addIndicators()
.addTo(controller);
scene.on('enter', () => {
box[i].classList.add('active');
});
}
}
}
new ScrollFadeIn();解説
querySelectorAll
条件に該当する要素をすべて取得する
let box document.querySelectorAll('.box:not(.active)');
console.log(box);
// ログの結果
NodeList(３) [div.box, div.box, div.box]取得したものを配列で扱いやすくし、用意した配列を使ってあとはループを回すだけ
for (let i = 0; i < box.length; i++) { let scene = new ScrollMagic.Scene({ triggerElement: box[i], triggerHook: 'onEnter', reverse: false, offset: 150, }) .addIndicators() .addTo(controller); scene.on('enter', () => {
box[i].classList.add('active');
});
}イベント発火のタイミング
triggerHook: 'onEnter',- onEnter
- onCenter
- onLeave
クラスの追加
triggerElementが特定の位置に来たときクラスを付与
このクラスをつけアニメーションはCSSで調整を行うようにしています。
scene.on('enter', () => {
box[i].classList.add('active');
});最後に
scrollMagicではあくまでスクロールに対してイベントを発火させるだけで、あとのアニメーションなどはCSSでうまく調整すると、役割がはっきりしているので、混乱しないのでいいと思います。
すべてjsでやろうとすると難しいので、ｊｓはクラスの付与だけアニメーションはCSSなど、切り分けして実装が簡単です。
空前絶後の費用対効果！デザイン・プログラミングの習得なら【Web食いオンラインスクール】
Web系のオンラインスクールの中では、費用対効果がかなり高く、講師のほとんどが現役のフリーランス であるため生きた記述を学ぶことができます。
また、やめたいときにすぐに辞めることができるので、合わないと思ったときすぐに辞めることができます。
学べる内容や言語
- Webデザイン
- Webディレクション
- Web系プログラミング
Webデザイン
- Xd
- Illustrator
- Photoshop
- UI・UXデザイン構築
Webディレクション
- Google Analytics
- SEO
- サーチコンソール
- ウーバーサジェスト
Web系プログラミング
- HTML
- CSS
- Sass
- Bootstrap
- JavaScript
- php
- Laravel
- MySQL
- git
- github
- 現実を見据えて学びたい方
- 高品質な実績を持つWebデザイナーになりたい方
- Web プログラマー・エンジニアになりたい方
- 途中でコースを変更する可能性がある方
- 現役のフリーランスから学びたい方
コメント