【サンプルあり】スクロールに連動した要素やマスクのサイズ変更【JavaScript / jQuery】
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
JavaScriptの編集ポイント scroll = $(this).scrollTop(); //8行目 sum = 1 + scroll / 50; //12行目 $(".circle").css(< "transform": "scale(" + sum + ")" >) // 15〜18行目 考え方50で割る理由ですが、そのままスクロール量の値を足してしまうと円があっという間に何十倍もの大きさになってしまうためです。例えば、10px分のスクロール量がそのまま初期値に足された場合、下の図のように.circleとなってしまいますね。（1 + 10 = 11倍）
10px分のスクロール量を50で割ってから初期値に足した場合、下の図のように.circleとなるという考え方です。（1 + 10 / 50 = 1.2倍）
アニメーションをよりスムーズな動きに見せるため50で割っていると考えてください。50の値を変更することでアニメーションの速度（変化の速さ）を調整できます。値を大きくすることで緩やかに変化し、値を小さくすることで劇的に変化します。
スクロールに合わせたマスクのサイズ変更
【jQuery】スクロールに合わせた要素のサイズ変更 /*bodyの背景色と高さ（スクロールさせるため）の指定*/ body < /*コンテンツの高さが十分ある場合heightの指定は不要*/ height: 5000px; background-color: yellow; >/*マスク部分に対する指示*/ .mountain < /*見た目や位置の調整*/ width: 100vw; height: 100vh; position: fixed; left: 0; top: calc(50% - 25vh); background-image: url(sample.jpg); /*マスクの指定*/ mask-image: url("sample.svg"); mask-repeat: no-repeat; mask-position: center top; mask-size: 50%; -webkit-mask-image: url("sample.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center top; -webkit-mask-size: 50%; z-index: 1; >/*コンテンツ部分に対する指示*/ .content< width: 100vw; height: 100vh; padding: 50px; background-color: #fff; /*位置の指定 マスクアニメーションが終わってから表示されるよう*/ position: relative; top: 200vh; left: 0; z-index: 2; > $(function () < /* スクロール量 代入用 */ var scroll; /* マスクの初期サイズ + スクロール量 代入用 */ var sum; /* マスクの初期位置 - スクロール量 代入用 */ var top; $(window).scroll(function () < /* スクロール量を取得 */ scroll = $(this).scrollTop(); /* コンソールログで確認 */ console.log(scroll); /* マスクの初期サイズ+スクロール量 / 10（調整）*/ sum = 50 + scroll / 10; console.log(sum); /* マスクの初期位置 + スクロール量 / 30（調整）*/ top = 25 + scroll / 30; console.log(top); $(".mountain").css(< /* マスクの大きさにスクロール量を足す */ "mask-size": sum + "%", /* マスクの初期位置からスクロール量を引く */ "top": "calc(50% - " + top + "vh)" >) /*マスクの初期サイズ+スクロール量が150を超えた場合*/ if(sum > 150)< /*非表示に*/ $(".mountain").fadeOut(500) >else < /*そうではない場合表示に*/ $(".mountain").fadeIn(500) >>) >)こちらは少々難しくなりますのでHTMLから細かくみていきましょう。ファイル一式をこちらからダウンロードできるので、よろしければファイルを開きながらご覧ください！（一般的なローカル環境ではマスクが表示されないため、VS codeのlive serverや仮想サーバー環境などで動作確認をしてください）
HTMLの編集ポイント CSSの編集ポイント.mountainに指定しているbackground-image（sample.jpg）をmask-image（sample.svg）でマスクしています。（26〜35行目）2024年2月9日現在はEdgeに対してベンダープレフィックスが必要とされているため、-webkit-の記述も入っています。
プロパティ説明値値の説明mask-image要素に適用するマスクの画像を指定します。noneurl(“mask.png”)linear-gradient(blue, green)none: マスクを適用しません。url(“mask.png”): mask.png という画像ファイルをマスクとして使用します。linear-gradient(blue, green): 青から緑への線形グラデーションをマスクとして使用します。mask-repeatマスクの繰り返し方法を指定します。repeatno-repeatspaceroundrepeat: マスクを繰り返します。no-repeat: マスクを一度のみ表示します。space: マスクを均等に配置しながら繰り返します。round: マスクを画像のサイズに合わせて繰り返します。mask-positionマスクの位置を指定します。left topcenter20% 30%left top: マスクの左上に配置します。center: マスクを要素の中央に配置します。20% 30%: マスクを横方向には左から20%、縦方向には上から30%の位置に配置します。mask-sizeマスクのサイズを指定します。autocover50% 50%auto: マスクの元のサイズを保持します。cover: マスクを要素全体に広げて表示します。50% 50%: マスクの幅と高さを要素の50%にします。 ※数値は自由に変更が行えます JavaScriptの編集ポイント scroll = $(this).scrollTop(); //10行目 sum = 50 + scroll / 10; //14行目 top = 25 + scroll / 30; //17行目 "mask-size": sum + "%" //21行目 "top": "calc(50% - " + top + "vh)" //23行目 考え方10で割る理由ですが、そのままスクロール量の値を足してしまうと.mountainがあっという間に何倍もの大きさになってしまうためです。例えば、50px分のスクロール量がそのまま初期値に足された場合、下の図のように.mountainとなってしまいますね。（50 + 50 = 100%）
50px分のスクロール量を10で割ってから初期値に足した場合、下の図のように.mountainとなるという考え方です。（50 + 50 / 10 = 55%）
こちらもアニメーションをよりスムーズな動きに見せるため10で割っていると考えてください。10の値を変更することでアニメーションの速度（変化の速さ）を調整できます。値を大きくすることで緩やかに変化し、値を小さくすることで劇的に変化します。
transform:scale()の場合、中心から外に向かって大きくなりますが、mask-sizeプロパティは下方向に向かって大きくなるため、スクロールを続けると下の図のように見切れてしまいます。
マスク部分の領域を見切れさせないため、下の図のように位置を上にずらすことで要素の位置を調整しています。
30で割る理由ですが、そのままスクロール量の値を足してしまうと.mountainがあっという間に上へ移動をしてしまうためです。30の値を変更することでアニメーションの速度（変化の速さ）を調整できます。値を大きくすることで緩やかに移動し、値を小さくすることで素早く移動します。
/*マスクの初期サイズ+スクロール量が150を超えた場合*/ if(sum > 150)< /*非表示に*/ $(".mountain").fadeOut(500) >else< /*そうではない場合表示に*/ $(".mountain").fadeIn(500) > こちらの記事はいかがでしたか？ Related postsRECENT ENTRIES
- Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
- 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
- GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
- コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説