質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2629閲覧

ローディングアニメーション終了を感知して次のアニメーションを開始したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/09/29 01:24

編集2020/09/29 01:26

メインビジュアルの文字をCSSアニメーションで動かしています。
ですがページローディングアニメーション中にメインビジュアルのアニメーションが動いてしまいます。
ローディングアニメーションが終わったことを感知してメインビジュアルのアニメーションを始めたいです。
コードの書き方がよく分からないのでアドバイスがありましたらよろしくお願いいたします。

参考URL

HTML

1<!-- ローディング画面 --> 2 <div id="loading" class="loading active"> 3 <div class="spinner"> 4 <span>Loading...</span> 5 </div> 6 </div> 7 8<!-- メインビジュアル --> 9 <div class="mv"> 10 <div id="fly-in"> 11 <div><span>Welcome to</span>My portfolio</div> 12 <div><span>My name is</span>Kazuki Matsuda</div> 13 <div><span>I am a</span> Web engineer</div> 14 <div><span>I would be happy</span>if I could help you</div> 15 </div> 16 <div class="scroll"> 17 </div> 18 </div>

JavaScript

1// ローディング画面を消す 2window.addEventListener('load', function () { 3 document.getElementById('loading').classList.remove('active'); 4})

CSS

1// /* ========= ローディング画面 ========= */ 2.loading { 3 position: fixed; 4 top: 0; 5 left: 0; 6 width: 100vw; 7 height: 100vh; 8 z-index: 9999; 9 transition: all 1s ease; 10 color: #ffffff; 11 background-color: #333; 12 visibility: hidden; 13 14 &.active { 15 opacity: 1; 16 visibility: visible; 17 } 18} 19 20.spinner { 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 transform: translate(-50%, -50%); 25 transform-origin: center; 26 width: 150px; 27 height: 150px; 28 border-radius: 50%; 29 border-width: 6px; 30 border-style: solid; 31 border-color: #fff transparent transparent; 32 animation: spinner1 1.8s infinite linear forwards reverse; 33 34 &::before, 35 &::after { 36 content: ''; 37 position: absolute; 38 top: 0; 39 left: 0; 40 width: 50%; 41 height: 50%; 42 opacity: 0.6; 43 } 44 45 &::before { 46 transform-origin: right bottom; 47 border-right: 1px solid; 48 z-index: 1; 49 animation: spinner2 .4s infinite linear forwards; 50 } 51 52 &::after { 53 transform-origin: calc(100% - 2px) bottom; 54 border-right: 4px solid; 55 z-index: 2; 56 animation: spinner3 1.5s infinite linear forwards; 57 } 58 59 span { 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 transform: translate(-50%, -50%); 64 font-size: 15px; 65 z-index: 3; 66 animation: spinner_loading_text 1.8s infinite linear forwards; 67 } 68} 69 70/* Spinner animation */ 71@keyframes spinner1 { 72 0% { 73 transform: translate(-50%, -50%) rotate(0); 74 } 75 76 100% { 77 transform: translate(-50%, -50%) rotate(360deg); 78 } 79} 80 81@keyframes spinner2 { 82 0% { 83 transform: rotate(0deg); 84 } 85 86 100% { 87 transform: rotate(360deg); 88 } 89} 90 91@keyframes spinner3 { 92 0% { 93 transform: translateX(2px) translateZ(0) rotate(0deg); 94 } 95 96 100% { 97 transform: translateX(2px) translateZ(0) rotate(360deg); 98 } 99} 100 101@keyframes spinner_loading_text { 102 0% { 103 opacity: 1; 104 transform: translate(-50%, -50%) rotate(0deg); 105 } 106 107 50% { 108 opacity: 0; 109 transform: translate(-50%, -50%) rotate(180deg); 110 } 111 112 100% { 113 opacity: 1; 114 transform: translate(-50%, -50%) rotate(360deg); 115 } 116} 117 118/* ========= mv ========= */ 119.mv { 120 position: relative; 121 height: 100vh; 122 width: 100vw; 123 background-image: url(../img/mv.jpg); 124 background-size: cover; 125 background-repeat: no-repeat; 126 background-position: 0 55%; 127 background-attachment: fixed; 128 color: #fff; 129 text-align: right; 130 font-weight: bold; 131 overflow: hidden; 132 font-family: 'Montserrat', sans-serif; 133 134 #fly-in { 135 font-size: 6.7rem; 136 font-style: italic; 137 margin: 50vh auto 30vh; 138 height: 20vh; 139 text-transform: uppercase; 140 user-select: none; 141 142 143 span { 144 display: block; 145 font-size: 2.8rem; 146 opacity: .8; 147 } 148 149 div { 150 position: absolute; 151 opacity: 0; 152 right: 10vw; 153 width: 90vw; 154 animation: switch 18.8s linear infinite; 155 156 &:nth-child(2) { 157 animation-delay: 4.7s; 158 } 159 160 &:nth-child(3) { 161 animation-delay: 9.4s; 162 } 163 164 &:nth-child(4) { 165 animation-delay: 14.1s; 166 } 167 168 } 169 170 @keyframes switch { 171 0% { 172 opacity: 0; 173 filter: blur(20px); 174 transform: scale(50) 175 } 176 177 8% { 178 opacity: 0; 179 filter: blur(17px); 180 transform: scale(25) 181 } 182 183 12% { 184 opacity: 1; 185 filter: blur(0); 186 transform: scale(1) 187 } 188 189 25% { 190 opacity: 1; 191 filter: blur(0); 192 transform: scale(.9) 193 } 194 195 28% { 196 opacity: 0; 197 filter: blur(10px); 198 transform: scale(.1) 199 } 200 201 80% { 202 opacity: 0 203 } 204 205 100% { 206 opacity: 0 207 } 208 } 209 } 210 211 .scroll { 212 position: absolute; 213 bottom: 20px; 214 left: 48.3%; 215 transform: translateY(-48.3%); 216 217 &::after { 218 content: ""; 219 opacity: 0.7; 220 border-top: 3px solid #fff; 221 border-right: 3px solid #fff; 222 display: block; 223 width: 40px; 224 height: 40px; 225 transform: rotate(135deg); 226 } 227 } 228} 229 230 231/* ========= about ========= */ 232.about { 233 color: $maincolor; 234 background-color: #fff; 235 236 .container { 237 margin-bottom: 35px; 238 } 239 240 &-box { 241 width: 100%; 242 padding: 50px; 243 display: flex; 244 justify-content: space-between; 245 align-items: center; 246 border: 4px solid #666; 247 border-radius: 30px; 248 box-shadow: 10px 10px 10px $maincolor; 249 250 &-left { 251 margin: 0 auto; 252 width: 330px; 253 height: 330px; 254 } 255 256 &-right { 257 font-size: 1.8rem; 258 259 p { 260 padding-bottom: 30px; 261 262 &:last-child { 263 padding-bottom: 0; 264 } 265 } 266 } 267 } 268}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

load時にローディング画面を消していますが、その直後に #fly-in にクラスを追加して、
そのクラスに対してアニメーションを設定すればどうでしょう。

js

1window.addEventListener('load', function () { 2 document.getElementById('loading').classList.remove('active'); 3 document.getElementById('fly-in').classList.add('after-load'); 4})

css

1#fly-in.after-load div { 2 animation: switch 18.8s linear infinite; 3}

コード全体を精査していないですがこんな感じのコードでいけるかと。

投稿2020/09/29 02:01

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/09/29 02:41

回答ありがとうございます! 自分のコードの書き方が悪いと思うんですが、うまく動きませんでした... もう少しいじってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問