مدیاویکی:Common.js

نکته: پس از انتشار ممکن است برای دیدن تغییرات نیاز باشد که حافظهٔ نهانی مرورگر خود را پاک کنید.

فایرفاکس / سافاری: کلید Shift را نگه دارید و روی دکمهٔ Reload کلیک کنید، یا کلید‌های Ctrl-F5 یا Ctrl-R را با هم فشار دهید (در رایانه‌های اپل مکینتاش کلید‌های ⌘-R)
گوگل کروم: کلیدهای Ctrl+Shift+R را با هم فشار دهید (در رایانه‌های اپل مکینتاش کلید‌های ⌘-Shift-R)
Edge: کلید Ctrl را نگه‌دارید و روی دکمهٔ Refresh کلیک کنید، یا کلید‌های Ctrl-F5 را با هم فشار دهید

const fadeElements = document.querySelectorAll('.fadein');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // وقتی حداقل ۶۰٪ المنت داخل ویوپورت است
    if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
      entry.target.classList.remove('fadein');
      entry.target.classList.add('fadedin');
      observer.unobserve(entry.target); // فقط یک بار
    }
  });
}, {
  root: null,         // ویوپورت
  threshold: 0.6,     // ۶۰٪
  rootMargin: '0px'   // بدون حاشیه
});

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

/* counter effect */

const counters = document.querySelectorAll('.value');
const speed = 200;

counters.forEach( counter => {
   const animate = () => {
      const value = +counter.getAttribute('akhi');
      const data = +counter.innerText;
     
      const time = value / speed;
     if(data < value) {
          counter.innerText = Math.ceil(data + time);
          setTimeout(animate, 1);
        }else{
          counter.innerText = value;
        }
     
   }
   
   animate();
});

/* adding links to the header */
(function() {
   document.querySelector('.citizen-header__start').insertAdjacentHTML('beforeend', '<span style="margin-right: 20px">برگریزون</span><span style="margin-right: 20px">فهرست الفبایی</span><span style="margin-right: 20px">کتابت رو بساز</span><span style="margin-right: 20px">درباره ما</span>');
})();