Web sitelerinin dikkat çekici olması, kullanıcı deneyimi açısından büyük önem taşır. Özellikle metin ve görsellerin hareketli bir şekilde sunulması, ziyaretçilerin ilgisini artırır. Bu yazıda, Elementor ve basit birkaç CSS kodu kullanarak web sitenize nasıl parallax başlık ve metin animasyonu ekleyebileceğinizi anlatacağız.

Parallax Efekti Nedir?

Parallax, bir nesnenin sayfa kaydırıldığında arka plan veya ön plandaki diğer öğelerden farklı hızlarda hareket etmesiyle oluşan görsel bir derinlik efektidir. Bu yöntem, tasarıma dinamizm katar ve ziyaretçilerin daha uzun süre sitede kalmasına yardımcı olur.

Elementor’da Parallax Başlık Nasıl Oluşturulur?

1. Bölüm ve Görsel Ekleme

Öncelikle Elementor’da tek sütunlu bir bölüm açın. Bölüme üstten ve alttan biraz boşluk verin. Daha sonra istediğiniz bir görseli ekleyin ve boyutlarını ayarlayın. Görseli “kaplama (cover)” modunda kullanarak daha etkileyici bir görünüm elde edebilirsiniz.

2. Başlık Ekleme ve Konumlandırma

Görselin önüne bir başlık ekleyin. Yazı tipini, boyutunu ve kalınlığını ayarlayarak öne çıkmasını sağlayın. Örneğin Roboto veya Montserrat gibi modern yazı tipleri tercih edebilirsiniz.

3. Metni Katmanlara Ayırma

Parallax efekti için metninizi iki katmana ayırın:

• Arka planda kalan metin: Görselin arkasında sabit durur.
• Önde görünen metin: Kontur (outline) efekti ile şeffaf hâlde görünür.

4. CSS ile Outline (Kontur) Efekti Ekleme

Ön plandaki metne özel bir CSS sınıfı verin ve aşağıdaki kodu kullanın:

.outlinetext {
    -webkit-text-stroke: 2px white;
}
Code language: CSS (css)

Bu kod, metninizi şeffaf hale getirir ve yalnızca beyaz bir dış hat görünümü verir. Kontur rengini değiştirebilir, kalınlığını artırabilir veya farklı stiller deneyebilirsiniz.

5. Motion Effects ile Hareket Katma

Son adımda metne Motion Effects ekleyin. Kaydırma sırasında metni sağa, sola veya yukarı hareket ettirerek parallax efektini güçlendirebilirsiniz. Ayrıca “fade-in” gibi giriş animasyonlarıyla daha profesyonel bir görünüm elde edebilirsiniz.

Neden Parallax Başlık Kullanmalısınız?

• İlgi çekici görünüm: Ziyaretçilerin dikkatini hemen çeker.
• Modern tasarım: Sitenizi daha profesyonel gösterir.
• Kolay uygulanabilir: Sadece birkaç CSS satırı ve Elementor ayarıyla yapılabilir.

Elementor ve basit CSS kullanarak web sitenize sadece birkaç adımda etkileyici bir parallax başlık ve metin animasyonu ekleyebilirsiniz. Bu yöntem, ziyaretçilerin dikkatini çekmek ve sitenizi daha modern bir hale getirmek için pratik ve etkili bir çözümdür.

Siz de bu tekniği deneyerek sayfalarınıza dinamizm katabilirsiniz. 🚀