TIL 38|★作成茶屋登録ページ7(ヘッダー-バッジ)
クイックキャンパスネット講座で作成した★茶屋登録ページ.横の横断幕を作りました.スクロールすると横断幕が消えます
HTML position: fixed; : ブラウザビューポートベースのレイアウト width:100% 余白-底部:12 px:要素の底部外側距離 box-shadow:シャドウをx軸4 pxに移動し、y軸を4 pxに移動し、blurを10 pxに移動し、rgba関数で黒 を追加 .バッジが来ました.JSコード 、badgeがスクロール中に消えることを許可する JSライブラリ制御 を通過ライブラリlodash cdn:コードをコピーし、インデックスします.html headタグ(ソフト欠陥) に貼り付け _.throttle(関数、時間):制御関数を1時間に1回実行 画面をスクロールするたびに、スクロールウィンドウオブジェクト部分のスクロールが をリフレッシュする. scrolly 画面の上の画素点をデジタルで決定300:300ミリ秒(0.3秒) gsapに代わる要素 バッジ:bagelを表示します.style.display = 'block'; 隠しバッジ:bagel.style.display = 'none'; アニメーションライブラリを使用してバッジを自然に表示および消去:GSAP GSAP cdn:コードをコピーしてインデックスします.html headタグ(ソフト欠陥) に貼り付けの不透明な属性のように、数値で値を入力する属性は、変換効果(遷移属性やGSAPライブラリなど)によって要素の前後状態を自然に中間数値の値に変換することができる.display属性のように、値が数字以外の属性は前後の状態の中間値が存在しないため、自然遷移効果 は適用できない.
HTML
<div class="badges">
<div class="badge">
<img src="./images/badge1.jpg" alt="Badege">
</div>
<div class="badge">
<img src="./images/badge2.jpg" alt="Badege">
</div>
</div>
</header>
</body>
</html>
header {
width: 100%;
/* position: relative; */
position: fixed;
top: 0;
background-color: #f6f5f0;
border-bottom: 1px solid #c8c8c8;
}
header .badges {
position: absolute;
top: 132px;
right: 12px;
}
header .badges .badge {
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
cursor: pointer;
}
const badgeEL = document.querySelector('header .badges');
window.addEventListener('scroll', _.throttle(function () {
console.log(window.scrollY);
if(window.scrollY > 500) {
gsap.to(badgeEL, .6, {
opacity: 0,
display: 'none'
});
} else {
gsap.to(badgeEL, .6, {
opacity: 1,
display: 'block'
});
}
}, 300));
Reference
この問題について(TIL 38|★作成茶屋登録ページ7(ヘッダー-バッジ)), 我々は、より多くの情報をここで見つけました https://velog.io/@yeonbee/TIL-38-다방-랜딩페이지-만들기7헤더-배지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol