jQuery|スクロールして要素が見えたら表示する

jQuery|スクロールして要素が見えたら表示する
この記事は約2分で読めます。
広告

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

基本となる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");
    }
      
  });
    
});
javascriptjQuery
広告

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました