انیمیشن fade in با css

پاسخ داده شد

چطور یک انیمیشن fade in با css بسازیم؟ طوری که چند ثانیه بعد از رندر شدن المان، بصورت fade in نمایشش دهیم؟

CSS css انیمیشن انیمیشن css انیمیشن fade in fade in animation with css

نفیسه افقی 2 سال قبل سوال کرد

شما باید برای ارسال دیدگاه وارد شوید

(3) پاسخ

پاسخ عالی

بصورت زیر می توانید انیمیشن fade in را با css بسازید:

.fade-in {
  opacity: 0; /* Initially hidden */
  animation: fadeIn 1s ease-in-out forwards; /* Apply the animation with 1s duration */
  animation-delay: 1s; /* Delay the animation start by 1s */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

* animation-delay تاخیر قبل از شروع انیمیشن را مشخص می کند.

*کافی است تا fade-in را به عنوان کلاس به هر المان html ای که می خواهید این انیمیشن را اجرا کند بدهید.

نفیسه افقی 2 سال قبل پاسخ داد

شما باید برای ارسال دیدگاه وارد شوید

دقت کنین که چون انیمیشن css یک بار و موقع لود صفحه انجام میشه، المان هایی که با اسکرول نشون داده میشن دیگه این انیمیشن رو ندارن. برای اینکه همه المان ها بتونن این انیمیشن رو بگیرن لازمه تا از جاوااسکریپت هم استفاده کنید ( اگه از وردپرس استفاده میکنید و نمیدونید کجا و چطور باید جاوااسکریپت رو بذارید و ران کنید، این پست رو ببینید)

راه‌حل استاندارد با IntersectionObserver:

CSS:

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

HTML:

<div class="fade-in">بخش اول</div>
<div class="fade-in">بخش دوم</div>
<div class="fade-in">بخش سوم</div>

JAVASCRIPT:

const elements = document.querySelectorAll('.fade-in');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
      observer.unobserve(entry.target); // فقط یکبار اجرا شود
    }
  });
}, {
  threshold: 0.2
});

elements.forEach(el => observer.observe(el));

موستانگ 1 ماه قبل پاسخ داد

شما باید برای ارسال دیدگاه وارد شوید

سلام؛ خیلی ممنون از این کد کاربردی؛ میخواستم بدونم در یک صفحه که محتوا و مطالب زیادی توش وجود دره چیکار باید کرد که با اسکرول روی هر div این افکت اجرا بشه (با اسکرول پایین روی هر div که رسید یکبار دیگه اجرا بشه) آخه اینجوری فقط یکبار اجرا میشه و در div های دیگه که این کلاس رو بهشون میدم دوباره اجرا نمیشه

محمد 1 ماه قبل پاسخ داد

- موستانگ
- 1 ماه قبل
سلام محمد عزیز، درست میگی، چون انیمیشن css فقط موقع لود صفحه اجرا میشه که خب یکباره و اگه المانی پایین صفحه باشه ، بعد اسکرول دیگه انیمیشن دوباره براش لود نمیشه. کاری که باید بکنی اینه که از جاواسکریپت کمک بگیری. من یه نمونه کد در ادامه توی همین صفحه میذارم که میتونی ازش استفاده کنی.