《参考》
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);

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

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

昨今は、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業界ですが、
ふんわりの流行はいつまでつづくのでしょう！？
そして、次なる流行は・・・！？

“min-width: 768px”時には〇〇〇という感じ。

HTML

<div class="card card-body">
  <h3 class="card-title">タイトルタイトルタイトルタイトル</h3>
  <p class="lines">文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります。文章が入ります文章が入ります文章が入ります文章が入ります。</p>
</div>

Javascript/jQuery

// min-width: 768px クラスを付与・差し替える

$(window).on('load', function() {
  $('.card-body').find('.lines').each(function ( index, value ) {
    if (window.matchMedia('(min-width: 768px)').matches) {
      $(this).attr('class', 'card-text lines-1');
    } else {
      $(this).attr('class', 'card-text lines-2');
    }
  });
});

min-width: 768px は、タブレットやパソコンの時。
でなければ、スマホの時、と考えられますので
スマホとそれ以外の時で変化するものがある場合に使えます。

find ～ each は、上記の例でいうと
.card-bodyの下（子）にある.linesを探します。（ひとつだけではなくループ。繰り返し処理。）
もし”min-width: 768px” だったら、”card-text lines-1″クラスを付与。
でなければ、”card-text lines-2″クラスを付与、となります。