colorsプログラミングprogrammingお問い合わせcontact自作ゲーム置き場ゲームプログラミングお問い合わせホームプログラミング【JavaScript】スクロールに連動したアニメーションをつける【JavaScript】スクロールに連動したアニメーションをつけるスポンサーリンクプログラミング2019.09.03こんにちは!セミマサです。今回はJavaScriptを使ってスクロールに連動したアニメーションをつけてみました。目次デモサイトソースコードHTMLCSSJavaScriptanimation関数おわりにデモサイト今回のデモサイトです。anime-rotate-y">コンテンツ</div></div></section>今回のHTMLです。アニメーションをつけたい要素にanimeクラスとアニメーションの内容に応じたクラスを付与しておきます(anime-bottom等)。0.8rem;}}アニメーションはCSSでつけています。animation);今回のスクリプトです。querySelectorAllを用いてanimeクラスのリストをanimation_listに格納します。ウィンドウが読み込まれた時とスクロールした時にanimation関数を呼び出します。animation関数animeクラスが付与されている要素の数だけ繰り返し処理します。変数element_topにanimeクラスが付与されている各要素の位置を代入します。window.innerHeightで取得したブラウザのビューポートの高さにwindow.scrollYで取得したY方向のスクロール量を加算し、今どこを表示しているかを算出して変数nowDisplayに代入します。要素が画面内にある場合はアニメーションさせながら表示します。変数marginの値を変更することで表示開始のタイミングを調整できるようにしました。上方向へのスクロールやウィンドウの縦幅が小さくなる等でアニメーション済みの要素が画面外に行った場合その要素を非表示に戻しています。おわりに無事動くものが作れました。マサキ今日もwebでセミが鳴く関連記事プログラミングReact公式チュートリアルを試してみたReactの公式チュートリアルをやってみました。プログラミング【JavaScript備忘録】変数を使うJavaScriptの変数に関しての備忘録です。プログラミング【JavaScript】おみくじを作ってみたJavaScriptを使っておみくじを作ってみました。プログラミング【JavaScript】ローカルストレージを使ってみるローカルストレージを使ってみました。プログラミングphina.jsを使ってシンプルなゲームを作ってみたJavaScriptのゲームライブラリ、phina.jsでシンプルなアクションゲームを作ってみました。プログラミング【JavaScript】テキストを1文字ずつ表示してみるJavaScriptでテキストを1文字ずつ表示してみました。マサキなんとなくで生きてきた自分を変えるべく日々努力中のセミです。趣味はゲーム・イラスト制作・プログラミング。なにかありましたらお問い合わせフォームからご連絡ください。マサキなんとなくで生きてきた自分を変えるべく日々努力中のセミです。趣味はゲーム・イラスト制作・プログラミング。なにかありましたらお問い合わせフォームからご連絡ください。書籍紹介スポンサーリンクタイトルとURLをコピーしました。