Home
CSS
【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

【公式あり】jQueryでスクロール量に連動してアニメーションを実装する

どうも!かけちまるです!

Webサイトをコーディングしているとスクロールアニメーションを実装することは多々あると思います。
しかし、そのほとんどが可視範囲に入ったら最後までアニメーションするというものです。

そこで、もしスクロール量に連動してアニメーションさせることができれば表現の幅が広がるし一段上のコーディングができると思います。

少し難しいですが、今回ご紹介する公式を理解すれば簡単に実装できるのでぜひ挑戦してみてください。

この記事では、

  • ・アニメーションの使用例
  • ・公式の説明

がわかります。

デモページ

今回の内容を使うとこんな感じのことができますというのをでもページにまとめました。
デベロッパーツールを使うとコードが見れます。

デモページへリンク

簡単なアニメーション実装例

まず、簡単な実装例から。
可視範囲に入ったら線が伸び始めて画面真ん中でwidth: 100%;になるようなアニメーションを実装します。

デモページへリンク

jQueryの読み込みは各自でお願いしますね。

HTML

HTMLはシンプルにこんな感じです。
section_barwidthを変化させます。

上下の<section class="section_scroll"></section>はスクロール量が欲しいので書きました。
CSSで適当に高さを出します。

HTML
コピー
<section class="section_scroll"></section> <!-- アニメーションする要素--> <section class="section"> <div class="section_bar"></div> </section> <!-- アニメーションする要素--> <section class="section_scroll"></section>

CSS

sectionタグの要素をheight: 100%;にして高さを出して、section_barを中央に配置するようにしています。

CSS
コピー
html, body{ height: 100%; } .section_scroll{ width: 100%; height: 100%; } .section{ background-color: #fafafa; display: flex; align-items: center; width: 100%; height: 100%; } .section_bar{ background-color: #000; /* width: 100%; */ height: 5px; }

JavaScript

JavaScript
コピー
$(window).on('scroll load', function(){ let scrollTop = $(window).scrollTop(); let winH = $(window).height(); let section_bar_pos = $('.section_bar').offset().top; // 公式 let section_bar_now = (1 - (section_bar_pos - scrollTop) / winH) * 2 * 100; $('.section_bar').css('width', section_bar_now + '%'); });

公式の説明

上記のJavaScript6行目あたりで線(.section_bar)のwidthを計算しています。
でその公式が以下のなります。

公式
コピー
(1 - (section_bar_pos - scrollTop) / winH) * 2 * 100 // もっと噛み砕いて書くと (1 - (対象要素の位置 - スクロール量) / windowの高さ) * 2 * 100

こちらの公式だと要素が可視範囲に入ったら値が0になり画面真ん中で値が100になります。
* 2の部分を小さくするほど画面上部で値が100になります。
* 100をやめると0〜1の範囲で値が変化するようになります。
色々アレンジして使ってみてください。

応用アニメーション実装例

今度は公式を応用してアニメーションをしてみます。
可視範囲に入ったら上下左右から枠を出して真ん中に来たら引っ込めるアニメーションです。

デモページへリンク

jQueryの読み込みは各自でお願いしますね。

HTML

HTMLはこんな感じです。
上下左右に配置する要素を用意します。

上下の<section class="section_scroll"></section>はスクロール量が欲しいので書きました。
CSSで適当に高さを出します。

HTML
コピー
<section class="section_scroll"></section> <!-- アニメーションする要素--> <section class="section"> <div class="section_top"></div> <div class="section_right"></div> <div class="section_bottom"></div> <div class="section_left"></div> </section> <!-- アニメーションする要素--> <section class="section_scroll"></section>

CSS

sectionタグの要素をheight: 100%;にして高さを出します。
section_topsection_rightsection_bottomsection_leftをそれぞれ上下左右に配置するようにしています。

CSS
コピー
html, body{ height: 100%; } .section_scroll{ width: 100%; height: 100%; } .section{ background-color: #fafafa; width: 100%; height: 100%; position: relative; } .section_top{ background-color: rgba(0,0,0,0.5); position: absolute; top: 0%; } .section_right{ background-color: rgba(0,0,0,0.5); height: 100%; position: absolute; top: 0%; right: 0%; } .section_bottom{ background-color: rgba(0,0,0,0.5); position: absolute; bottom: 0%; } .section_left{ background-color: rgba(0,0,0,0.5); height: 100%; position: absolute; top: 0%; left: 0%; }

JavaScript

JavaScript
コピー
$(window).on('scroll load', function(){ let scrollTop = $(window).scrollTop(); let winH = $(window).height(); let winW = $(window).width(); let section_pos = $('.section').offset().top; // 公式 let section_now = (1 - (section_pos - scrollTop) / winH) * 80; // 公式 let section_now2 = Math.abs(-1 - (section_pos - scrollTop) / winH) * 80; if(scrollTop > section_pos - winH){ $('.section_top, .section_bottom').css({'height': section_now + 'px', 'width': winW - section_now * 2 + 'px', 'left': section_now }); $('.section_right, .section_left').css('width', section_now + 'px'); } if(scrollTop > section_pos){ $('.section_top, .section_bottom').css({'height': section_now2 + 'px', 'width': winW - section_now2 * 2 + 'px', 'left': section_now2 }); $('.section_right, .section_left').css('width', section_now2 + 'px'); } });

7行目
こちらの公式は、.sectionが可視範囲に入ったら値が0になり、画面上部に来たら値が80になります。

9行目
こちらの公式は、.sectionが画面上部に来たら値が80になり、画面外になる頃に値が0になります。

11行目
.sectionが画面上部に来るまでif文内のCSSが適応されます。

18行目
.sectionが画面上部に来たらif文内のCSSが適応されます。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

Contact Form7の入力エラー表示をCSSのみでカスタマイズ

jQueryでURLやパラメータを取得する方法【location】

jQueryでURLやパラメータを取得する方法【location】

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form7】ログインユーザーのためにテキスト項目にデフォルト値を設定する

【Contact Form7】ログインユーザーのためにテキスト項目にデフォルト値を設定する

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ