jQuery｜スクロールして要素が見えたら表示し見えなくなったら非表示にする

スクロールしたら画像やコンテンツが表示するサイトは、凝っているなと思ってしまいます。
(スクロールしたら表示されっぱなしを作るセットはこちら)
そしてもっと凝っているなっと思うのは、スクロールして見えなくなると、そのコンテンツが消えるサイト。
そんな凝ってるサイトをコピペで簡単に作れるセットのご紹介です。

初めての目次

基本となるHTMLとCSS
要素が見えたら表示して、見えなくなったら非表示に

基本となるHTMLとCSS

基本となるHTMLとCSSは、下に記載します。
CSSの「.anime」は、表示、非表示をアニメーションさせるクラスです。

【HTML】

  <div id="elem"></div>

【CSS】

#elem {
  margin: 30px 0;
  width: 100%;
  height: 200px;
  background: #26ebbb;
  display: block;
  transform: scale(3) rotate(360deg);
  transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
}
.anime {
  transform: scale(1) rotate(0deg) !important;
  opacity: 1 !important;
}

次にdemoのご紹介です。
「transform」であらかじめ拡大させて、360度回転して非表示にしてあります。

【DEMO】

要素が見えたら表示して、見えなくなったら非表示に

要素が半分見えたら表示して、下にスクロールして半分消えたら非表示にするjQueryです。

【jQuery】

$(function() {

  // 変化させる要素
  var elem = $("#elem");
  // ページトップからの要素の高さ
  var elemO = elem.offset().top;
  // 変化させる要素の高さ
  var elemH = elem.height();
  // ウィンドウの高さ
  var windowH = $(window).height();

  $(window).on("scroll", function() {
    
    // スクロールした値
    var windowS = $(window).scrollTop();

    // 要素が半分見えたら表示して、要素がウィンドウから半分消えたら非表示にする
    if(windowS > elemO - windowH + (windowH / 2) && windowS < elemO + elemH - (elemH / 2)){
      elem.addClass("anime");
    } else {
      elem.removeClass("anime");
    }
    
  });
    
});