《参考》
matchMedia / MediaQueryList / addEventListener

https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html

JavaScript

var mql = window.matchMedia('(max-width: 767.98px)');
function screenTest(e) {
  if (e.matches) {
  // max-width: 767.98pxの時
  // ここに記述
    
  } else {
  // そうでない時 ＝ min-width:768pxともいう
  // ここに記述
    
  }
}
screenTest(mql);
mql.addEventListener('change', screenTest, false);

レスポンシブコーディングをする際は必須といえるかなと思います。
　
　

var mql = window.matchMedia('(max-width: 767.98px)');
function screenTest(e) {
  if (e.matches) {
  // max-width: 767.98pxの時
    window.addEventListener('DOMContentLoaded', () => {
      // ここに実行したい処理を書くとか
    });
  } else {
  // そうでない時 ＝ min-width:768pxともいう
  // 具体的に例えば100pxスクロールしたらheaderにクラス名付与するとか
    window.addEventListener("scroll", function () {
      const header = document.querySelector("header");
      header.classList.toggle("header-fixed", window.scrollY > 100);
    });
  }
}
screenTest(mql);
mql.addEventListener('change', screenTest, false);

ちょっとした具体例でした。

bootstrap5 のモーダル内にページ内リンクがあり、そのリンクをクリックしたらモーダルを閉じたい。

Bootstrap5 Modal

https://getbootstrap.com/docs/5.1/components/modal/

ページ内リンクはスムーススクロール、かつ、モーダルを閉じる。という感じ。

モーダルのHTML

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <ul>
        <li><a href="#contents1">コンテンツ1</a></li>
        <li><a href="#contents2">コンテンツ2</a></li>
        <li><a href="#contents3">コンテンツ3</a></li>
        <li><a href="#contents4">コンテンツ4</a></li>
        <li><a href="#contents5">コンテンツ5</a></li>
      </ul>
    </div>
  </div>
</div>

bootstrap5 モーダルのJavascript

Modal getOrCreateInstance

https://getbootstrap.com/docs/5.1/components/modal/#getorcreateinstance

Modal hide

https://getbootstrap.com/docs/5.1/components/modal/#hide

var myModalEl = document.getElementById('exampleModal');
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);

modal.hide();

スムーススクロール

https://www.fenet.jp/dotnet/column/language/javascript/7491/#JavaScript

↑JavaScriptでのスムーススクロールの実装方法↑

《例》上記サイトのようなJavascriptのみのスムーススクロールを使用する場合

～省略～
// window.scrollToでスクロール
window.scrollTo({
  top: position,
  behavior: 'smooth',
});
// この位置にModal hideを追加（スクロールが実行されたらモーダルを閉じます）
modal.hide();
～省略～

実行順としては、スムーススクロール実行後に「modal.hide();」となります。

スクロールすると、ふんわり表示されるアレ。
今では多くのサイトで見かけるようになりましたし、仕事上でも、「ふんわり表示されるやつを実装してほしい」とのご要望もよくあります。
最近制作担当したサイトでは、数件連続でふんわり実装依頼があったので、やはり流行ってるのですね。

昨今は、jQueryを使わない生のJavaScriptが好まれる傾向にあると思うので
JavaScriptのみでのライブラリをご紹介。

ScrollReveal

有名どころの「ScrollReveal.js」というライブラリですが
こちらは商用利用が有料となっています。
アニメーション演出等も一体になっているので手軽だけどバリエーションが限られるかな。
https://scrollrevealjs.org/pricing/

sal

商用利用もOKなのが、「sal.js」ライブラリですね。
なによりとても軽量なのがよい。私はこれが好きです。
https://github.com/mciastek/sal/blob/master/LICENSE

AOS

こちら「AOS」も商用利用OKなライブラリ。
https://github.com/michalsnik/aos/blob/next/LICENSE

ScrollOut

オープンソースライブラリ「ScrollOut」。
ライセンスがよく分からないｗ MITライセンスらしいのだけど。
こちらはちょっと分かりにくいかもなので、以下に動画も。

Locomotive Scroll

おしゃれなぬるぬる「Locomotive Scroll」商用利用もOK。
一部スマホに対応してない機能もあるようですが、なめらかな動きが特徴で多機能ですね。
https://github.com/locomotivemtl/locomotive-scroll/blob/master/LICENSE

他にも色々とあるかと思いますが、
ふんわりしたいだけなら多機能である必要はないので軽量なものがよいかもですね。

他には・・

ライブラリというわけではないのですが、
検索すると、けっこう多数のエンジニアさんなどが
自前で書かれてあるコードが出てきますね。
　
個人的には、こちらがおすすめかなと思います。
http://noze.space/archives/415
個人の方だと思うので、ライセンスは分からないのですけど💦

YouTubeにも、スクロールしたらふわっと講座がありました😊

移り変わりが激しいweb業界ですが、
ふんわりの流行はいつまでつづくのでしょう！？
そして、次なる流行は・・・！？