Show Portfolio Title/Overlay on Scroll (Mobile)

To make Portfolio Title and Overlay appears on scroll on Mobile, you can follow these.

#1. Use this code to Custom CSS

a.show-text {
.portfolio-overlay {
    opacity: 0.8 !important;
}
.portfolio-text {
    opacity: 1 !important;
}}

#2. Use this code to Code Injection > Footer

<script>
(function() {
  let lastActiveItem = null;
  function handleScroll() {
    const items = document.querySelectorAll('a.grid-item');
    const viewportHeight = window.innerHeight;
    
    items.forEach(item => {
      const rect = item.getBoundingClientRect();
      const inView = (
        rect.top >= viewportHeight * 0.2 && 
        rect.top <= viewportHeight * 0.8
      );
      if (inView) {
        if (lastActiveItem && lastActiveItem !== item) {
          lastActiveItem.classList.remove('show-text');
        }
        item.classList.add('show-text');
        lastActiveItem = item;
      }
    });
  }
  let scheduled = false;
  window.addEventListener('scroll', () => {
    if (!scheduled) {
      scheduled = true;
      window.requestAnimationFrame(() => {
        handleScroll();
        scheduled = false;
      });
    }
  });
  handleScroll();
})();
</script>

1 Like