ロード終了後にアニメーションさせたい

下記の記事を参考に、アニメーションを色々試しているのですが、アニメーションを動かす順番を制御する方法が分かりません。
https://coco-factory.jp/ugokuweb/move01/4-1-2/

【参考サイト】
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/1-4/1-4.html

一通り動きは全部できています。

【実現したいこと】
参考サイトのように、ローディング画面が終了後に、FV(最初の画面)のアニメーションを動かしたい。
下記のコードですと、.textの文章がロード終了時に右から出てきてほしいです。
今のままだとローディング画面中に動いているようです。

外部読み込みもあるのでheadタグから書きます。

HTML
1<!-- HTML雛形 -->
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
6    <meta charset="UTF-8" />
7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8    <title>template</title>
9    <meta name="”description“" content="““" />
10    <meta name="keywords" content="" />
11    <link rel="stylesheet" href="css/reset.css" />
12    <link rel="stylesheet" href="css/style.css" />
13    <link rel="stylesheet" href="css/animate.css" />
14  </head>
15  <body>
16    <div id="splash">
17      <div id="splash_text"></div>
18      <!--/splash-->
19    </div>
20    <div id="container">
21      <p>ローディング後、この画面が見えます。</p>
22      <!--/container-->
23    </div>
24    <div id="particles-js"></div>
25    <div id="wrapper">
26      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
27      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
28      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
29      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
30      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
31      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
32      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
33      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
34      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
35      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
36      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
37      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
38      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
39      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
40      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
41      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
42      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
43      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
44      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
45      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
46      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
47      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
48      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
49      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
50      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
51      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
52      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
53      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
54      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
55      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
56      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
57      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
58      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
59      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
60      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
61      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
62      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
63      <p class="text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
64
65      <div class="test">
66        <div class="box"></div>
67        <div class="box"></div>
68        <div class="box"></div>
69        <div class="box"></div>
70        <div class="box"></div>
71      </div>
72    </div>
73
74    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
75    <script type="text/javascript" src="/js/jquery.inview.min.js"></script>
76    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
77    <script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
78    <script src="js/script.js"></script>
79  </body>
80</html>
81

CSS
1.text {
2  font-size: 20px;
3  margin: 100px auto;
4  text-align: center;
5  opacity: 0;
6}
7
8.box {
9  width: 700px;
10  height: 700px;
11  background: grey;
12  margin: 1000px auto;
13  position: sticky;
14  top: 0;
15}
16
17.anime-active {
18  opacity: 1;
19}
20
21html,
22body {
23  height: 100%; /*高さを100%にして描画エリアをとる*/
24}
25
26#particles-js {
27  position: fixed; /*描画固定*/
28  z-index: -10; /*描画を一番下に*/
29  width: 100%;
30  height: 100%;
31  top: 0;
32  background-color: #fff; /*背景色*/
33}
34
35#wrapper {
36  position: relative; /*描画を#particles-jsよりも上にするためposition:relative;を指定*/
37  z-index: 1; /*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
38  width: 100%;
39  height: 100%;
40}
41
42/*========= LoadingのためのCSS ===============*/
43
44/* Loading背景画面設定　*/
45
46#splash {
47  /*fixedで全面に固定*/
48  position: fixed;
49  z-index: 999;
50  width: 100%;
51  height: 100%;
52  background: #333;
53  text-align: center;
54  color: #fff;
55}
56
57/* Loadingバー中央配置　*/
58#splash_text {
59  position: absolute;
60  top: 50%;
61  left: 50%;
62  z-index: 999;
63  width: 100%;
64  transform: translate(-50%, -50%);
65  color: #fff;
66}
67
68/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
69#splash_text svg {
70  height: 2px;
71}
72

js
1//テキストのカウントアップ+バーの設定
2var bar = new ProgressBar.Line(splash_text, {
3  //id名を指定
4  easing: "easeInOut", //アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
5  duration: 1000, //時間指定(1000＝1秒)
6  strokeWidth: 0.2, //進捗ゲージの太さ
7  color: "#555", //進捗ゲージのカラー
8  trailWidth: 0.2, //ゲージベースの線の太さ
9  trailColor: "#bbb", //ゲージベースの線のカラー
10  text: {
11    //テキストの形状を直接指定
12    style: {
13      //天地中央に配置
14      position: "absolute",
15      left: "50%",
16      top: "50%",
17      padding: "0",
18      margin: "-30px 0 0 0", //バーより上に配置
19      transform: "translate(-50%,-50%)",
20      "font-size": "1rem",
21      color: "#fff",
22    },
23    autoStyleContainer: false, //自動付与のスタイルを切る
24  },
25  step: function (state, bar) {
26    bar.setText(Math.round(bar.value() * 100) + " %"); //テキストの数値
27  },
28});
29
30//アニメーションスタート
31bar.animate(1.0, function () {
32  //バーを描画する割合を指定します 1.0 なら100%まで描画します
33  $("#splash").delay(500).fadeOut(800); //アニメーションが終わったら#splashエリアをフェードアウト
34});
35
36particlesJS("particles-js", {
37  particles: {
38    number: {
39      value: 38, //この数値を変更すると幾何学模様の数が増減できる
40      density: {
41        enable: true,
42        value_area: 800,
43      },
44    },
45    color: {
46      value: "#333", //色
47    },
48    shape: {
49      type: "polygon", //形状はpolygonを指定
50      stroke: {
51        width: 0,
52      },
53      polygon: {
54        nb_sides: 3, //多角形の角の数
55      },
56      image: {
57        width: 190,
58        height: 100,
59      },
60    },
61    opacity: {
62      value: 0.664994832269074,
63      random: false,
64      anim: {
65        enable: true,
66        speed: 2.2722661797524872,
67        opacity_min: 0.08115236356258881,
68        sync: false,
69      },
70    },
71    size: {
72      value: 3,
73      random: true,
74      anim: {
75        enable: false,
76        speed: 40,
77        size_min: 0.1,
78        sync: false,
79      },
80    },
81    line_linked: {
82      enable: true,
83      distance: 150,
84      color: "#ffffff",
85      opacity: 0.6,
86      width: 1,
87    },
88    move: {
89      enable: true,
90      speed: 6, //この数値を小さくするとゆっくりな動きになる
91      direction: "none", //方向指定なし
92      random: false, //動きはランダムにしない
93      straight: false, //動きをとどめない
94      out_mode: "out", //画面の外に出るように描写
95      bounce: false, //跳ね返りなし
96      attract: {
97        enable: false,
98        rotateX: 600,
99        rotateY: 961.4383117143238,
100      },
101    },
102  },
103  interactivity: {
104    detect_on: "canvas",
105    events: {
106      onhover: {
107        enable: false,
108        mode: "repulse",
109      },
110      onclick: {
111        enable: false,
112      },
113      resize: true,
114    },
115  },
116  retina_detect: true,
117});
118
119$(function () {
120  $(".text").on("inview", function (event, isInView) {
121    if (isInView) {
122      $(this).addClass("animate__animated animate__lightSpeedInRight anime-active");
123    } else {
124      $(this).removeClass("animate__animated animate__lightSpeedInRight anime-active");
125    }
126  });
127});
128

itagagaki

2021/09/28 15:18

animate__animated や animate__lightSpeedInRight の設定が見当たらないのですが。

Goethe

2021/09/28 17:04

ローカルのcssで読み込んでいます。

itagagaki

2021/09/28 17:25

それが提示されていないと他者は問題を再現できないのでは。

Goethe

2021/09/28 17:35

すみません、後ほどcdnに切り替えておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示のコードを試してみましたが、適当にググって見つけたjquery.inviewだと、jQuery3系では動作せず、jQuery1系が必要でした。
githubを見た感じ、Folkされたバージョンがあるみたいなので、別のjquery.inviewなのだと思います。
なので、以下の回答は上手くいかないかもしれません。

ロードイベントで jquery.inview を呼んでしまっているので、アニメーションの終了時に呼ぶように変更してはどうですか？

js
1//アニメーションスタート
2bar.animate(1.0, function () {
3    //バーを描画する割合を指定します 1.0 なら100%まで描画します
4    $("#splash").delay(500).fadeOut(800).promise().done(test); //アニメーションが終わったら#splashエリアをフェードアウト
5});
6
7//...
8
9function test() {
10    $(".text").on("inview", function (event, isInView) {
11        if (isInView) {
12            $(this).addClass("animate__animated animate__lightSpeedInRight anime-active");
13        } else {
14            $(this).removeClass("animate__animated animate__lightSpeedInRight anime-active");
15        }
16    });
17    $(window).trigger('scroll') // これがないとスクロールを待ってしまう？
18};