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%;
}
}
No.3ベストアンサー
- 回答日時:
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)});
解決しました。
最後までご教授・お付き合いいただきありがとうございました。
また詳しい説明を頂きありがとうございます。
JSも必須になりそうなので、勉強をします。
ありがとうございます。
No.2
- 回答日時:
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>
ありがとうございます!
無礼を承知でお伺いします。
出来たのですが、HTML内にこのborderというclassが複数使用しています。
はじめに出てきたclassについては動作しているのですが以後の同じclassは動作していない状況です。
どのようにしたら動作しますでしょうか。
HTML/CSSは本やgoogleで勉強しながらしているのですが、jsだけが勉強できておらず、まるななげ質問している事に失礼を感じながらのご質問です。
何卒よろしくお願いいたします。
No.1
- 回答日時:
こんにちは
>画面上に表示されたら、アニメーションを開始するように
>jsで制御したのですがうまくできません。
どのような処理を行っているのか不明ですが、そのjsとやらを削除すれば上手くいくのではないでしょうか?
ご提示のHTMLとCSSだけで、ちゃんと動作しますよ。
動くのは確認できているのですが、当ソースコードが表示される画面外にありまして、スクロールする頃には動作が完了し、borderの線が引かれている状態になります。
スクロールした後に、画面に表示された段階で、アニメーションが開始するように設定をしたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
Firefoxで見るとli要素レイアウ...
-
定義リストに下線をつけたいと...
-
CSSでボックスのheightが0になる
-
Flexslider2のカーセルスライダ...
-
投稿フォームの整列
-
Firefoxでheight:100%がきかない?
-
初心者html・CSS ウィンドウを...
-
画像の位置指定
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
回り込みについて(間隔が空く)
-
FFにおけるDIVタグ間の隙間につ...
-
html初めてです、教えてください!
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報