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

jQuery

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

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

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

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

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

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

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

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

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

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

アニメーションの流れ

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

全てのコード

まず,コードを載せます。もちろんコピー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秒かけてアニメーションします

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

はる | Webコーダー on Twitter
✅transform プロパティでcssがガタつくときの対処法 “-webkit-backface-visibility:hidden;” ”backface-visibility:hidden;” これ入れただけで本当に動きカクカクしちゃうのが抑えられた(´・ω・`)すごい

参考サイトはこちらです!

 

次に、最後に出現する固定ボタンのCSSです。

・最初は、display:noneで非表示
・画面下に固定したいので、bottom:0
・固定ボタンは何よりもレイヤー上にしたいので、z-index:3

.fixe-btnクラスをつけると、display:blockになるように設定しておきます

解説:jQuery

先ほど書いたのですが、openクラスをつけて対応するのはfv__bottomのみです。よく使うので、変数fv_bottomを定義しました。

100px以上スクロールすると、

  • fv__topは、slideUp()で上にスライドして消える
  • fv__bottomは、openクラスをつける

openはtransformで下に900px動かす内容でした。

ここまででだと、スクロールでスライドしてもfv__bottomは消えません。

 

そこで、on("transitioned webkitTransitionEnd")を使い、transformプロパティの内容が完了したら、function()以下の関数を実行するようにします。

  • fv__bottomをhide()で隠します
  • .btnにfixed-btnをつけることで、下部に固定ボタンを出します

on("transitioned webkitTransitionEnd")についての参考リンクはこちらです↓

完成版

最後に、もう一度完成版です( ﹡ˆoˆ﹡ )

(もう、良いか・・・せっかく作ったから・・・笑)

画面が上下に分かれて、下から別のページが出てくるアニメーション - CodeSandbox
画面が上下に分かれて、下から別のページが出てくるアニメーション by haru-programming

 

あとがき

今回は、ありそうでない(?)実装を1から作りました。自分で作ったので最適解でないかもしれません。。

もっと良い方法があればぜひ教えてください!✨

  • on("transitioned webkitTransitionEnd")でCSSのtransformが完了したら実行
  • アニメーションのがたつきが気になる時のハック

など勉強になりました〜!

今日は以上です。

 

*ただいま、もりけん塾に所属しています*
Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

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