オープニング画面が出た後にページを表示する実装方法（画面内に現れたらフェードするinview付き） │ ここつぶ

1. いい感じのサイトを作りたい時に便利なanime.jsとinview.js
2. HTML
3. CSS
4. jQuery

いい感じのサイトを作りたい時に便利なanime.jsとinview.js

画面がローディングされた後、はじめにロゴなどのオープニング画面が表示された後にページを表示する方法をまとめました。

LPやイメージサイトによく使われる、画面内に現れたら要素がふわっと表示されるinview.js付きです😊

これだけでそれっぽいプロモーションサイトが作れちゃうのでとっても便利ですよ！

今回使用したjsはこちら！

簡単にアニメーションが実装できるanime.js

今回は初めにロゴ画面を表示させたら消えるという簡単なアニメーションですが、サンプルサイトにはさまざまなアニメーションが紹介されています！！

こちらに日本語でわかりやすく解説されたありがたーいサイトがありますので、是非参考にしてみてください！

また、スクロールして要素が画面に表示されたらふわっといい感じにフェードインされるinview.jsも合わせて実装してみました！

こちらは少し検索するとわかりやすく解説されているサイトがたくさん見つかると思います👍

デモサイトはこちら

DEMO

初めにここつぶのロゴが表示され、ふわっと消えたらページが現れます🐈✨

スクロールして表示されたら猫の画像がふわっと表示されます！

雰囲気のあるページが出来そうですね！！

HTML

fadeIn_up：下からふわっと移動させながら表示させる
fadeIn_left：右からふわっと移動させながら表示させる
fadeIn_right：左からふわっと移動させながら表示させる
fadeIn：ふわっと表示させる

<div class="wrapper">
    <div class="cat">
        <section class="cat-photo">
            <div class="cat-photo__inner">
                <div class="cat-photo__box fadeIn_up"><img src="img/neko01.jpg" alt="" width="800" height="533"></div>
                <div class="cat-photo__box fadeIn_up"><img src="img/neko02.jpg" alt="" width="800" height="1200"></div>
                <div class="cat-photo__box fadeIn_left"><img src="img/neko03.jpg" alt="" width="800" height="1200"></div>
                <div class="cat-photo__box fadeIn_right"><img src="img/neko04.jpg" alt="" width="800" height="1200"></div>
                <div class="cat-photo__box fadeIn_up"><img src="img/neko05.jpg" alt="" width="800" height="533"></div>
                <div class="cat-photo__box fadeIn_up"><img src="img/neko06.jpg" alt="" width="800" height="1200"></div>
                <div class="cat-photo__box fadeIn"><img src="img/neko07.jpg" alt="" width="800" height="1200"></div>
                <div class="cat-photo__box fadeIn"><img src="img/neko08.jpg" alt="" width="800" height="1200"></div>
            </div>
        </section>
    </div>
    <div class="opening">
        <h1 class="opening__logo"><img src="img/logo.png" alt="" width="300" height="300"></h1>
    </div>
</div>

CSS

.opening{
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background-color: #fff;
}

.opening .opening__logo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.opening .opening__logo img{
  width: 200px;
  height: auto;
}

.fadeIn{
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
}

.fadeIn.is-show{
  opacity: 1;
}

.fadeIn_left{
  opacity: 0;
  -webkit-transform: translate(-100px, 0);
  transform: translate(-100px, 0);
  -webkit-transition: 2s;
  transition: 2s;
}

.fadeIn_left.is-show{
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.fadeIn_right{
  opacity: 0;
  -webkit-transform: translate(100px, 0);
  transform: translate(100px, 0);
  -webkit-transition: 2s;
  transition: 2s;
}

.fadeIn_right.is-show{
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.fadeIn_up{
  opacity: 0;
  -webkit-transform: translate(0, 100px);
  transform: translate(0, 100px);
  -webkit-transition: 2s;
  transition: 2s;
}

.fadeIn_up.is-show{
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

.cat{
  color: #333;
}

.cat-photo{
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.cat-photo img{
  display: block;
  width: 100%;
  height: auto
}

.cat-photo__inner{
  display: block;
  margin: 0 auto;
}

.cat-photo__box{
  margin-bottom: 50px;
}

.cat-photo__box img{
  width: 70%;
  margin: 0 auto;
}

jQuery

$(window).on("load", function () {

    var splashTl = anime.timeline({});
    splashTl
        .add({
            targets: '.opening .opening__logo',
            opacity: .0,
            duration: 800,
            delay: 1000,
            easing: 'easeOutSine',
            complete: function (anim) {
                $(".opening .opening__logo").css('visibility', 'hidden');
            }
        })
        .add({
            targets: '.opening',
            opacity: .0,
            duration: 2000,
            easing: 'easeOutSine',
            begin: function (anim) {
                window.setTimeout(function () {
                    $(".opening").css('pointer-events', 'none');
                    $("body").css('overflow', 'visible');
                }, 100)
            }
        }, '-=300');

    // 画面に表示されたらフェードを実行
    $(".fadeIn , .fadeIn_left , .fadeIn_right , .fadeIn_up").on("inview", function (event, isInView) {
    if (isInView) {
        $(this).stop().addClass("is-show");
        }
    });

});

是非参考にしてみてください😊