محو شدن المنت ها
میخوام وقتی که کاربر المت رو دید محو شدن اون انجام بشه یعنی تا وقتی اون المنت رو ندید حالت محو شدن ایجاد نشه
پاسخ‌ها
7
منظورتون اینه که وقتی کلیک یا hover کرد چه اتفاقی بیفته؟
نه وقتی که seen کرد فرض کنید در انتها صفحه یک المنت هست قراره وقتی که صفحه رو کشید پایین این المنت محو بشه
@mojtaba.b1076
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
سلام
توی جاوااسکریپت میتونید event رو برای اسکرول تعریف کنید و بگید اگه تا یه جای مشخصی اسکرول شد، المان محو بشه
window.addEventListener('scroll',function(){
if(scrollY > 100)
document.getElementById('element').fadeOut();
});
از woo.js استفاده کنید اگه آماده میخواید کار کنید به همراه animation.css
@arminamirinasab
سلام و وقت بخیر.
همون حرف جناب حکیم @sadrahkm درسته . میتونید به scrollY موقعیت المنت رو بگیرید(جواب جناب حکیم این رو کم داشت) و event برای اسکرول تعریف کنید که وقتی به موقعیت المنت مورد نظر اسکرول شد ، محو بشه
موفق و سلامت باشید
@arminamirinasab
درود بر شما.
چند وقت پیش منم به همچین چیزی خوردم
که من این دوتا راه رو پیشنهاد میکنم.
1- استفاده از کتابخونه wow js هست که کلاس های متنوع و آماده ایی داره که به شما زحمت زیادی نمیده
2- ولی اگه دوست دارید خودتون بنوسید از این تیکه کد به عنوان نمونه استفاده کنید که هروقت اسکرول به المنت شما رسید عملیات محوکردن شروع بشه
window.addEventListener('scroll',()=>{
if (((Element.offsetTop - window.innerHeight) - 50) < window.pageYOffset) {
// fadeOut element
}
})
<!DOCTYPE html>
<html lang="fa-IR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>محو شدن با اسکرول</title>
<style>
.mydiv0 {
margin-top: 1500px;
width: 100%;
height: 200px;
background-color: violet;
}
.mydiv {
width: 100%;
height: 200px;
margin-bottom: 300px;
background-color: pink;
transition: 1s;
}
</style>
</head>
<body>
<div class="mydiv0"></div>
<div class="mydiv"></div>
<script>
let mydiv = document.querySelector(".mydiv"), /* انتخاب المان موردنظر */
mydivOffsetTop = mydiv.offsetTop, /* فاصله المان از بالای سند */
mydivOffsetTopMinus = mydivOffsetTop - window.innerHeight / 2; /* کم کردن نصف ارتفاع صفحه‌نمایش.(برای این که المان را در وسط صفحه نمایش محو کنیم نه در بالا.) */
// console.log(mydivOffsetTop);
// console.log(mydivOffsetTopMinus);
window.addEventListener("scroll", () => {
if (
document.body.scrollTop > mydivOffsetTopMinus ||
document.documentElement.scrollTop > mydivOffsetTopMinus
) {
mydiv.style.opacity = "0";
mydiv.addEventListener("transitionend", () => {
// mydiv.style.display = "none";
mydiv.style.visibility = "hidden";
});
}
});
</script>
</body>
</html>
این کدی که با جاوااسکریپت نوشتم بهت کمک می‌کنه.
با جی‌کوئری راحت‌تر میشه پیاده کردش.