Paper.jsSource
下スクロールで消える・上スクロールで現れる素の JavaScript
今回は、ヘッダーを例とします。 HTML は、非常に単純なものです。 <header id="header">サイト名やナビなどを書く</header> 次は JavaScript です。requestAnimationFrame() を使い、スクロールイベントを設定します。 let offset = 0; let lastPosition = 0; let ticking = false; const header = document.getElementById('header'); const height = 56; const onScroll = () => { if (lastPosition > height) { if (lastPosition > offset) { header.classList.add('head-animation'); } else { h
Canvasだけじゃない！requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA
requestAnimationFrame()というとCanvas APIなどを使ったクリエイティブコーディングでよく使われる手法ですが、クリエイティブコーディングに限ったものではなく、一般的なウェブサイトのアニメーション表現にも役立ちます。 この記事では「トップに戻るアニメーション」を例に、requesetAnimationFrame()の基本的な使い方から、実際のWebサイトで使える実装までチュートリアル形式で解説しています。 この記事で学べること requestAnimationFrame()でアニメーションするやり方 ディスプレイのリフレッシュレートに依存しない実装方法 イージング関数を使ったアニメーション さまざまな作例のサンプルファイルも用意しています。ぜひご覧ください。 サンプルを別ウインドウで再生する setInterval()との違い requestAnimationFr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
Lottie Docs
Vanta.js - 3D & WebGL Background Animations For Your Website