実現したいこと
現在初心者ながらwebサイトを作成しています。
webページのheaderの部分でロゴが出てきた後にメインの写真がふわっと出てくるような表現をしたいのですがうまくいきません。
試したこと
html
1~省略〜 2<body> 3 <header> 4 <div class="container"> 5 <div class="row"> 6 <div class="col span-12 header" style="padding: 20px;"> 7 <h1><a href=""> <img src="{% static 'img/logo.png' %}" alt="ロゴ" class="logo"></a></h1> 8 <div class="header-box"><a href=""><span class="contact-button">お問い合わせ</span></a></div> 9 </div> 10 </div> 11 </header> 12 13 <div class="mainimg"> 14 <img src="{% static 'img/header.jpg' %}" alt="メイン画像" class='imgs'> 15 </div>
css
1.logo,.mainimg img { 2 opacity: 0; 3 transition: opacity 1s ease-in-out; 4} 5 6.fade-in { 7 opacity: 1; 8}
javascript
1window.addEventListener('load', function() { 2 var logo = document.querySelector('.logo'); 3 var mainImg = document.querySelector('.imgs'); 4 5 setTimeout(function() { 6 logo.classList.add('fade-in'); 7 setTimeout(function() { 8 mainImg.classList.add('fade-in'); 9 }, 1000); // ロゴの表示後、1秒の遅延時間 10 }, 1000); // メイン画像の表示を1秒遅延させる 11});
上記のようにhtmlの7行目のロゴがふわっと出てきてから、14行目メイン画像をふわっと出すように書いたつもりなのですが、ロゴだけがふわっと出てくるだけでメイン画像が表示されませんでした。
どう改善すればいいか迷っています。
わかる方がいたら教えていただきたいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。