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

jQuery|スクロールして要素が見えたら表示し見えなくなったら非表示にする javascript
この記事は約3分で読めます。
スポンサーリンク

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

基本となる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");
    }
    
  });
    
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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