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

jQuery|スクロールして要素が見えたら表示する javascript
この記事は約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");
    }
      
  });
    
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQuery

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

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

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

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

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

コメント

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