Skip to content Skip to sidebar Skip to footer
Close

Scroll Word Reveal Nedir?

Web sitenizde metinleri sıradan bir şekilde göstermek yerine, ziyaretçilerin ilgisini çeken dinamik bir sunum yapmak ister misiniz? Scroll Word Reveal efekti, kullanıcı sayfada aşağı kaydıkça kelimelerin tek tek ortaya çıkmasını sağlayarak metinleri adeta bir hikâye anlatımı gibi sunar. Bu efekt özellikle hero alanlarında, storytelling içeriklerde ve interaktif blog yazılarında mükemmel bir kullanıcı deneyimi yaratır.

“Scroll Word Reveal”, ziyaretçi sayfayı kaydırdıkça metinlerin sırayla opacity (opaklık) ve blur (bulanıklık) değerleriyle oynanarak görünür hâle gelmesini sağlayan bir efekt türüdür.

  • İlk hâl: Kelimeler soluk ve hafif bulanık görünür.

  • Scroll esnası: Görüş alanına giren kelimeler netleşir ve vurgulanır.

  • Yukarı çıkıldığında: Kelimeler yeniden silik hâline döner.

Bu sayede statik bir paragraf, dinamik bir hikâye akışına dönüşür.

Elementor’da Scroll Word Reveal Nasıl Yapılır?

1. HTML Kodu Ekle

Elementor sayfa düzenleyicide istediğiniz alana bir HTML widget ekleyin ve aşağıdaki yapıyı yerleştirin:

				
					<div class="srw-text">
  In the vibrant world of Framer, a powerful secret was discovered. By implementing 
  the Scroll Word Reveal component in your canvas, you could now glide effortlessly 
  through the content, transforming a static page into a dynamic journey.
</div>

2. CSS Stilleri Tanımla

Aynı HTML widget’ının içine veya Özelleştir → Ek CSS alanına şu kodu ekleyin:

				
					.srw-text{
  --active-color: inherit;       /* aktif kelime rengi */
  --passive-color: #9aa;         /* pasif kelime rengi */
  --accent-color: #16a34a;       /* vurgu rengi */
  --passive-opacity: .32;
  --passive-blur: 3px;

  font-size: clamp(1.25rem, 4.2vw, 3rem);
  line-height: 1.4;
  font-weight: 600;
  max-width: 900px;
  margin: 8vh auto;
}
.srw-text .word{
  display:inline-block;
  color: var(--passive-color);
  opacity: var(--passive-opacity);
  filter: blur(var(--passive-blur));
  transition: color .25s linear, opacity .25s linear, filter .3s ease;
}
.srw-text .word.active{
  color: var(--active-color);
  opacity: 1;
  filter: blur(0);
}
.srw-text .accent{ color: var(--accent-color); }

3. JavaScript ile Efekti Çalıştır

Son olarak aynı HTML widget’ının içine şu script’i ekleyin:

				
					<script>
(() => {
  const container = document.querySelector('.srw-text');
  const raw = (container.textContent || '').replace(/\s+/g,' ').trim();
  container.textContent = '';
  raw.split(/(\s+)/).forEach(tok => {
    const span = document.createElement('span');
    span.textContent = tok;
    span.className = /^\s+$/.test(tok) ? 'space' : 'word';
    container.appendChild(span);
  });
  const words = container.querySelectorAll('.word');

  const onScroll = () => {
    const winH = window.innerHeight;
    words.forEach(w => {
      const r = w.getBoundingClientRect();
      const middle = r.top + r.height/2;
      const proximity = 1 - Math.min(Math.abs(middle - winH/2)/(winH/2), 1);
      if (proximity > 0.45) w.classList.add('active');
      else w.classList.remove('active');
    });
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
})();
</script>

Nerelerde Kullanabilirsiniz?

  • Hero bölümleri: İlk bakışta çarpıcı bir etki yaratır.

  • Storytelling sayfaları: Kullanıcıyı adım adım içeriğe çeker.

  • Blog yazıları: Metinlerin akıcı ve canlı görünmesini sağlar.

  • Portföy siteleri: Kendi hikâyenizi veya projenizi etkileyici bir şekilde anlatabilirsiniz.

Scroll Word Reveal, Elementor ile hazırladığınız web sitenize modern ve dinamik bir hava katmanın en pratik yollarından biridir. Küçük bir HTML–CSS–JS dokunuşuyla ziyaretçilerinizin metinlere bakış açısını tamamen değiştirebilirsiniz.

👉 Siz de bu etkiyi deneyerek sitenizi sıradanlıktan çıkarabilir, içeriklerinizi görsel bir hikâyeye dönüştürebilirsiniz.

In the vibrant world of Framer, a powerful secret was discovered. By implementing the Scroll Word Reveal component in your canvas, you could now glide effortlessly through the content, transforming a static page into a dynamic journey.

1. HTML Kodu Ekleyin

Elementor editörünüzde HTML Widget açın ve aşağıdaki kodu yapıştırın:

				
					<div class="typewriter">
  <h2 id="tw-text"></h2>
</div>

2. CSS ile Efekti Tasarlayın

Aynı HTML widget’ının içine veya Özelleştir → Ek CSS bölümüne şu CSS kodunu ekleyin:

				
					.typewriter h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b; /* Tema rengi */
  border-right: 3px solid #16a34a; /* Yanıp sönen imleç */
  white-space: nowrap;
  overflow: hidden;
}

3. JavaScript ile Yazma Animasyonunu Ekleyin

HTML widget’ının içine şu script’i de ekleyin:

				
					<script>
const textEl = document.getElementById('tw-text');
const words = ["Elementor ile Efektli Başlıklar", "WordPress'te Dinamik Tasarım", "Blogunuza Canlılık Katın!"];
let i = 0, j = 0, current = "", isDeleting = false;

function type() {
  if (i < words.length) {
    if (!isDeleting && j <= words[i].length) {
      current = words[i].substring(0, j++);
      textEl.textContent = current;
    } else if (isDeleting && j >= 0) {
      current = words[i].substring(0, j--);
      textEl.textContent = current;
    }
    if (j === words[i].length + 1) {
      isDeleting = true;
      setTimeout(type, 1000);
      return;
    } else if (isDeleting && j === 0) {
      isDeleting = false;
      i++;
      if (i === words.length) i = 0;
    }
    setTimeout(type, isDeleting ? 50 : 100);
  }
}
type();
</script>

Nerelerde Kullanabilirsiniz?

  • Hero alanı başlıklarında

  • Blog yazısı girişlerinde

  • “Hakkımızda” sayfanızda slogan vurgusu için

  • Satış sayfalarında dikkat çekici CTA metinleri için

Typewriter efekti sayesinde Elementor sitenizdeki başlıkları çok daha canlı ve ilgi çekici hâle getirebilirsiniz. Bu sayede ziyaretçileriniz metinlere göz atmak yerine, onları adım adım takip eder ve sitenizde daha uzun süre vakit geçirir.