急いでいます！

画面に表示したらアニメーションを開始したい

解決済

質問者：エビゾー
質問日時：2023/01/13 15:38
回答数：3件

border-bottomをアニメーションで出すようにCSSを書きました。
画面上に表示されたら、アニメーションを開始するようにjsで制御したのですがうまくできません。

どのようにしたらよろしいでしょうか。

■HTML
<h2 class="border">期間限定商品</h2>

■CSS
.border{
position: relative;
}
h2.border:before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
border-bottom: solid 2px #e94609;
transform: translateX(-50%);
animation: border_anim 3s linear forwards;
}

@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2023/01/16 18:31

No2です。

＞はじめに出てきたclassについては動作しているのですが
＞以後の同じclassは動作していない状況です。
複数を想定していなかったので、そのようになっています。

仕組みを簡単に説明しておくと、スクリプトで行っているのは
　・指定した要素を監視して、その要素が全部表示されたら、その要素に
　　「active」クラスを追加する。
　（アニメーションが下枠なので「全部表示」で判断しています）
ということだけです。
要素にactiveクラスが追加されたら、アニメーションが行われるのは、CSSでそのように設定してあるからで、これにはスクリプトは関与していません。

＞どのようにしたら動作しますでしょうか
監視対象とする要素をを増やしておけば良いです。
上記のように、スクリプトで行っているのはクラスの付与だけなので、対象によって異なるアニメーションを行うことも可能です。
対象が全て h2.border で良いのなら、以下のような感じにしておくことで可能になると思います。
（h2.border ではなく、.border 全てが対象の場合は、最初の1行目を修正してください）

const t = document.querySelectorAll('h2.border');
const ob = new IntersectionObserver( e => {
e.forEach( e => {
if(e.isIntersecting) e.target.classList.add('active');
});
}, { root: null, threshold: 1.0 });
t.forEach(t => {ob.observe(t)});

- 0
- 件

通報する

この回答へのお礼

解決しました。
最後までご教授・お付き合いいただきありがとうございました。

また詳しい説明を頂きありがとうございます。
JSも必須になりそうなので、勉強をします。
ありがとうございます。

通報する

お礼日時：2023/01/17 09:45

参考程度に

No.2

回答者： fujillin
回答日時：2023/01/13 23:51

No1です。

＞画面に表示したらアニメーションを開始したい
「スクロールして当該要素が画面に表示されたら」という意味だったのですね。

文書の構成や位置関係にもよりますけれど・・・
以下は、ごく簡単な一例です。

※ ご提示のCSSでは@keyframes （＝animation）指定での処理になっていますが、transition に変えてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.border{ position: relative; }
.border:before{
content: '';
position: absolute; left: 50%;
bottom: 0; width: 0;
border-bottom: solid 2px #e94609;
transform: translateX(-50%);
transition: width 3s linear;
}
.border.active:before{ width: 100%; }
</style>
</head>
<body>
<div style="height:1500px;">スペース用DIV</div>
<h2 class="border">期間限定商品</h2>

<script>
const t = document.querySelector('h2.border');
const ob = new IntersectionObserver( e => {
if(e[0].isIntersecting) t.classList.add('active');
}, { root: null, threshold: 1.0 });
ob.observe(t);
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
無礼を承知でお伺いします。

出来たのですが、HTML内にこのborderというclassが複数使用しています。
はじめに出てきたclassについては動作しているのですが以後の同じclassは動作していない状況です。

どのようにしたら動作しますでしょうか。

HTML/CSSは本やgoogleで勉強しながらしているのですが、jsだけが勉強できておらず、まるななげ質問している事に失礼を感じながらのご質問です。

何卒よろしくお願いいたします。

通報する

お礼日時：2023/01/16 14:45