ここに質問の内容を詳しく書いてください。
javascriptで二段階アニメーションの機能を追加しています
写経で二段階アニメーション機能を入れたが画像が消えてしまった
動くwebデザインを作りたい
参考サイト
https://coco-factory.jp/ugokuweb/move02/4-12/
特になし
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SimBa Official Site</title>
<link rel="icon" href="icon.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css"> -->
</head>
<body>
<header id="header" class="wrapper">
<h1 class="site-title"><a href="index.html"><img src="nekonekoneko.png"></a></h1>
<nav>
<nav>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
</nav>
</header>
<main>
<div id="mainvisual">
<img src="12345.jpg" alt="テキストテキストテキスト">
</div>
<section id="about" class="headline">
<h2 class="section-title">About</h2>
<div class="content">
<img src="nekoneko.jpg">
<div class="text">
<h3 class="content-title">SimBa</h3>
<p>
<!-- <a>プロフィールはこちら</a><br> -->
</p>
</div>
</div>
</section>
<section id="hobby" class="headline">
<h2 id="Profile" class="section-title">Profile</h2>
<ul>
<li>
<img src="onair.png">
<h3 class="content-title">知識のアップデート</h3>
<p><a>読書。SNSで「アウトプット」をしています。</a></p>
</li>
<li>
<!-- <img src="img/bicycle2.jpg" alt="テキストテキストテキスト"> -->
<!-- <h3 class="content-title">タイトルタイトル</h3>
<p>テキストテキストテキスト</p>
</li> -->
<li>
<img src="ryori.png" alt="テキストテキストテキスト">
<h3 class="content-title">料理</h3>
<p>人生100年時代。あなたは自分の体に気を遣ってますか？体の健康を維持するため「アンチエイジング」のために料理
をしています。</span>
</p>
</li>
</ul>
</section>
</main>
<div class="contact-bg">
<div class="contact-area inner">
<p id="Contact" class="contact-message">Contact<br>
<div class="contact-inner">
<form method="post">
<table class="contact-table">
<tr class="table-list">
<th>
<label for="name">お名前<span class="essential">必須</span></label>
</th>
<td>
<input type="text" name="yourname" id="name" class="input-area" autocomplete="name">
</td>
</tr>
<tr class="table-list">
<th><label for="furigana">ふりがな<span class="essential">必須</span></label></th>
<td>
<input type="text" name="yourname" id="furigana" class="input-area">
</td>
</tr>
<tr class="table-list">
<th><label for="mail">メールアドレス<span class="essential">必須</span></label></th>
<td>
<input id="mail" type="email" name="mail" class="input-area" autocomplete="email">
</td>
</tr>
<tr class="table-list">
<th><label for="comment">お問い合わせ内容<span class="essential">必須</span></label></th>
<td>
<textarea id="comment" name="comment"></textarea>
</td>
</tr>
</table>
</form>
<input type="submit" value="送信する" class="button">
</div>
</div>
</div>
<footer id="footer">
<p>© 2022 Profile</p>
</footer>
</div>
<!-- アニメーションを追加したい -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
function Scroll() {
let time = 0.2; //時間
let value = time;
$('.delayscroll').each(function () {
let parent = this; //親要素
let elemPos = $(this).offset().top; //要素の位置
let scroll = $(window).scrollTop(); //スクロール
let windowHeight = $(window).height(); // 画面の高さ
let childs = $(this).childern(); //子要素
//｛｝はスクロールをしたら動くまたは親要素にクラスplayがない
if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
$(childs).each(function () {
if (!$(this).hasClass("fadeUp")) {//動くのチェック
$(parent).addClass("play");
$(this).css("animation-delay", value + "s"); //アニメーションの遅延
$(this).addClass("fadeUp"); //アニメにクラス名を追加
value = value + time; // 遅延時間を増やす
let index = $(childs).index(this);
if ((childs.length - 1) == index) {
$(parent).removeClass("play");
}
}
})
} else {
$(childs).removeClass("fedeUp"); //クラス名を削除
value = time; //delay初期値の数値に戻す
}
})
}
//画面をスクロールしたら動かしたい
$(window).scroll(function () {
Scroll();//アニメーション用の関数を呼ぶ
});//ここまで画面をスクロールをしたら動かしたい
//画面が読み込まれたらすぐに動かしたい
$(window).on('load', function () {
Scroll();//アニメーション用の関数を呼ぶ
});//ここまで画面をスクロールをしたらすぐに動かしたい
@charset "UTF-8";
/*-------------------------------------------
About
-------------------------------------------*/
#about .content {
display: flex;
justify-content: center;
align-items: center;
}
#about img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-right: 100px;
opacity: 0;
}
.fadeUp {
animation-name: fadeUpAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0)
}
}
#about .text {
text-align: left;
}
参考サイトを使って画像を二段階アニメーションをつけようとしましたが、画像が消えてまった
スペルミスは確認してます
最初にフワッと表示される部分だけ。
html
bodyの中に、<!DOCTYPE html>とかまたHTMLの始まりがあるのでそこ整理しましょうか。
フワッと表示させたい部分(ul)にclass="delayScroll"をつけてあげましょう。
li にclass="box"を指定し、cssでフワッとさせているみたいです
css
.box { opacity: 0; }
でフワッとさせているみたいです
js
4行目$('.delayscroll').each(function () {delayScroll。Sが大文字ですね。
9行目let childs = $(this).childern(); //子要素がchildrenですね。rの位置が違います。
29行目$(childs).removeClass("fedeUp"); //クラス名を削除 fadeUpですね。eとaが違います
スクロールして範囲外にいった時fadeUpのクラスが削除されていないのが、スクロール時にフワッと表示されない原因だと思うのですが...
@sharp231
Questioner@sharp231
Questioner@sharp231
Questioner