جشنواره تکرارنشدنی نوروزی راکت آغاز شد! | هر روز یک سوپرایز ویژه!

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
آرمین امیری نسب
4 سال پیش توسط آرمین امیری نسب مطرح شد
7 پاسخ

محو شدن المنت ها

میخوام وقتی که کاربر المت رو دید محو شدن اون انجام بشه یعنی تا وقتی اون المنت رو ندید حالت محو شدن ایجاد نشه


ثبت پرسش جدید
mojtaba
تخصص : طراح و برنامه نویس وب ( نود جی...
@mojtaba.b1076 4 سال پیش مطرح شد
-3

منظورتون اینه که وقتی کلیک یا hover کرد چه اتفاقی بیفته؟


آرمین امیری نسب
تخصص : برنامه نویس فرانت اند
@arminamirinasab 4 سال پیش مطرح شد
0

نه وقتی که seen کرد فرض کنید در انتها صفحه یک المنت هست قراره وقتی که صفحه رو کشید پایین این المنت محو بشه
@mojtaba.b1076


صدرا حکیم
تخصص : توسعه دهنده لاراول
@sadrahkm 4 سال پیش آپدیت شد
3

سلام
توی جاوااسکریپت میتونید event رو برای اسکرول تعریف کنید و بگید اگه تا یه جای مشخصی اسکرول شد، المان محو بشه

window.addEventListener('scroll',function(){
    if(scrollY > 100)
        document.getElementById('element').fadeOut();
});

Hassan Kalhor
تخصص : فرانت اند
@niwanta 4 سال پیش مطرح شد
0

از woo.js استفاده کنید اگه آماده میخواید کار کنید به همراه animation.css


احسان قربانی
تخصص : PHP ، در حال یادگیری لاراول ،...
@TimeRunner2359 4 سال پیش مطرح شد
1

@arminamirinasab
سلام و وقت بخیر.
همون حرف جناب حکیم @sadrahkm درسته . میتونید به scrollY موقعیت المنت رو بگیرید(جواب جناب حکیم این رو کم داشت) و event برای اسکرول تعریف کنید که وقتی به موقعیت المنت مورد نظر اسکرول شد ، محو بشه
موفق و سلامت باشید


علیرضا
تخصص : فرانت اند وب
@sep28 4 سال پیش آپدیت شد
0

@arminamirinasab
درود بر شما.
چند وقت پیش منم به همچین چیزی خوردم
که من این دوتا راه رو پیشنهاد میکنم.
1- استفاده از کتابخونه wow js هست که کلاس های متنوع و آماده ایی داره که به شما زحمت زیادی نمیده
2- ولی اگه دوست دارید خودتون بنوسید از این تیکه کد به عنوان نمونه استفاده کنید که هروقت اسکرول به المنت شما رسید عملیات محوکردن شروع بشه

window.addEventListener('scroll',()=>{
    if (((Element.offsetTop - window.innerHeight) - 50) < window.pageYOffset) {

        // fadeOut element

    }
})

مسعود فرامرزی‌راد
تخصص : Front-end Developer
@sm.faramarzirad 4 سال پیش مطرح شد
0
<!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>

این کدی که با جاوااسکریپت نوشتم بهت کمک می‌کنه.
با جی‌کوئری راحت‌تر میشه پیاده کردش.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام