【jQuery】スクロールで画面が上下に分かれる＆固定ボタンが出現【day133】

今日は、【jQuery】スクロールで画面が上下に分かれる＆固定ボタンが出現するアニメーションを実装したので、アウトプットします！

こんにちは。駆け出しコーダーのharuです。

＊わたしについて＊
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

【jQuery】スクロールで画面が上下に分かれる＆固定ボタンが出現
あとがき

【jQuery】スクロールで画面が上下に分かれる＆固定ボタンが出現

今回、実務で「スクロールで画面が上下に分かれる＆固定ボタンが出現するアニメーション」を実装しました。

ちょっと言葉では伝わらないので、デモを作りました笑
こんな感じです！

実際にほんの少しだけスクロールしてみてください( ﹡ˆoˆ﹡ )

100vhにしてあるfv部分が、スクロールすると上下に開く→メインのページが出てくるという、珍しいアニメーションです。なかなかソースなかったので1から作りました。

今回は実装どおりに「アニメーションが全て終わったら、固定ボタンが出現」まで解説を入れてみたいと思います(*･ᴗ･*)و

アニメーションの流れ

下に100px以上スクロールする
fvの画像が上下にスライドして消える
中からmainのページが出てくる
アニメーションが全て終わったら、ページ下部に固定ボタンが出現

全てのコード

まず,コードを載せます。もちろんコピーOKですが、なかなか同じ実装はないと思いますw

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="fv">
      <div class="fv__top">上</div>
      <div class="fv__bottom">下</div>
    </div>
    <div class="btn">
      <img src="kuma.png" alt="くまさん" />
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f4ffcd;
  position: relative;
  height: 2000px;
}
.fv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.fv__top {
  width: 100vw;
  height: 50vh;
  background-color: #ffe3b3;
  padding: 15px;
}
.fv__bottom {
  width: 100vw;
  height: 50vh;
  background-color: #f3c9bd;
  padding: 15px;
}
.open {
  transform: translate(0, 900px);
  transition: 1.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.btn {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 3;
}
.btn img {
  width: 110px;
  height: 100px;
}
.fixed-btn {
  display: block;
}

JavaScript(jQuery)

$(document).ready(function () {
  //ファーストビューをスクロールで上下に開閉する
  $(window).scroll(function () {
    let fv_bottom = $(".fv__bottom");

    if ($(window).scrollTop() > 100) {
      $(".fv__top").slideUp(1600);
      fv_bottom.addClass("open");

      //---cssのtransformプロパティが完了したら実行
      fv_bottom.on("transitionend webkitTransitionEnd", function () {
        fv_bottom.hide();
        $(".btn").addClass("fixed-btn");
      });
    }
  });
});

解説：HTML

・<body>がメインのページ部分です
・fvクラスのついたdivの中に、上下それぞれのスライド部分があります
・btnクラスには、最後に固定されるボタンの画像を入れてあります

解説：CSS

・スライドするfv周りに余白ができないように、paddingとmarginは0
・わかりやすいように、bodyに背景色を付けました
・bodyの上に、fvが重なるので position:relative にしておきます

次にfvです。

・fvはposition:absolute、z-index:2にして、メインページより上に来るようにします
・topとbottomは画面いっぱいにしたいので、width:100vwとheight:50vhずつにします
・それぞれわかりやすいように別の背景色にしました

このfvに、openクラスをつけると動くようにします。

後ほどJSのところで解説を入れますが、openクラスのアニメーションはfv__bottom用です。topは、jQueryのSlideUp()を使っています。

・transform:translate() で y軸方向に900px下げます
・刻んじゃいましたが、1.9秒かけてアニメーションします

アニメーションのがたつきが気になったので、これらを入れました↓

✅transform プロパティでcssがガタつくときの対処法

“-webkit-backface-visibility:hidden;”
”backface-visibility:hidden;”

これ入れただけで本当に動きカクカクしちゃうのが抑えられた(´･ω･`)すごいhttps://t.co/aNSShvNUM4

— はる🌸ARUTEGA (@fuwafuwahappy) September 18, 2020