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 windowH = $(window).height();
    
  $(window).on("scroll", function() {

    // スクロールした値
    var windowS = $(window).scrollTop();

    // 要素が半分見えたら表示する
    if(windowS > elemO - windowH + (windowH / 2) ){
      elem.addClass("anime");
    }
      
  });
    
});