Divi ile Paralaks Kullanmak İçin En İyi Kılavuz

Paralaks için doğru boyutta görüntüyü bulmaya çalışmak biraz sinir bozucu olabilir. Görüntü standart bir arka plan görüntüsü olarak harika görünebilir, ancak "Paralaks Efektini Kullan"ı seçtiğiniz anda görüntü patlar ve hiçbir şey doğru görünmez. Gelecekte bu kötüleşmeyi önlemek için, paralaksın ne olduğunu ve paralaks moduna alındığında görüntüye ne olduğunu anlamanız gerekir.

Bugün, paralaksın Divi ile nasıl çalıştığını derinlemesine inceleyeceğim. İki farklı paralaks yöntemini kullandığınızda tam olarak ne olduğunu, hangi boyutta görüntünün en iyi olduğunu açıklayacağım ve hatta görüntülerinizi tam istediğiniz gibi konumlandırmak için bazı özel css tüyoları vereceğim.

Haydi gidelim.

Paralaks nedir?

Web tasarımı ile ilgili olarak, paralaks, bir tür iki boyutlu animasyon kullanarak gerçeğe yakın mesafe ve hareket algısı veren bir etkiyi tanımlamak için kullanılan bir terimdir. Bu, sabit bir noktayı görüntülerken mesafe yanılsaması yaratmak için bir web sayfasındaki farklı öğelerin kaydırma hızlarını değiştirerek gerçekleştirilir. Teknik, web dışındaki yerlerde bir süredir var. Super Mario Brothers'ı hatırlıyor musunuz? 80'lerde (Nintendo NES) video oyunları oynadıysanız, oyunların çoğu sadece 2 boyutlu görüntüler kullanarak hareket izlenimi vermek için bu tekniği kullandı. Öndeki eşyalar, arkadaki ağaçlar/dağlar/bulutlardan daha hızlı hareket ediyordu. Böylece daha canlı bir hareket yaratır.

Bu efekt Divi'deki True Paralaks yöntemine çok benzer. Hareketin yatay yerine dikey olması dışında.

Paralaksın Divi ile Nasıl Çalıştığını Anlama

Divi ile Parallax'ı herhangi bir bölüm, satır, sütun veya modül içindeki herhangi bir arka plan görüntüsüne yerleştirmek gerçekten çok kolay. Tek yapmanız gereken Paralaks Etkisi seçeneğini “YES” olarak ayarlamak ve ardından Paralaks Yönteminizi (CSS veya Gerçek Paralaks) seçmek.

CSS Yöntemi

CSS Yöntemi, paralaks efektiniz için seçebileceğiniz iki yöntemden biridir. Bu yöntemi sitenizde test ederek muhtemelen neler olduğunu tahmin edebilirsiniz. Efekti oluşturmak için yalnızca CSS kullandığından CSS Yöntemi olarak adlandırılır. Bu yöntem, sayfadaki diğer öğeler normal şekilde kaydırılırken arka plan görüntüsünü yerinde sabitlemek için CSS'yi kullanır. Bu, içeriğin arka plan görüntüsünün önünde hareket ettiği izlenimini verir.

Gerçek Paralaks Yöntemi

İkinci yönteme True Parallax denir. Muhtemelen paralaks etkisinin geleneksel fikrini örneklediği için “Doğru” olarak adlandırılmıştır. Bu yöntem, sayfadaki diğer öğelerden biraz daha yavaş bir kaydırma hareketi oluşturmak için CSS ve JavaScript kullanır. Bu, arka planda yavaş hareket eden görüntü ile öndeki daha hızlı hareket eden unsurlar arasında oluşturduğu mesafe algısı nedeniyle hareketin daha gerçekçi bir temsilidir.

Divi'de Paralaks Etkinleştirildiğinde Ne Olur?

Perde arkasında neler olduğunu anlamıyorsanız, bu sinir bozucu olabilir. Bu nedenle, paralaks etkinleştirildiğinde görüntüye tam olarak ne olduğunu bilmek yararlıdır.

CSS Metodu Seçildiğinde Ne Olur?

CSS Paralaks seçildiğinde, görüntü, tarayıcı penceresinin tam boyutunu kapsayan mutlak bir konuma sahip yeni bir div'e sarılır. Divi'de bunu yapan CSS Sınıfları ve kod parçacıkları:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
/*** This sets the image to fixed when using the CSS method ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: fixed;
}

Arka plan boyutu, yüksekliği ve genişliği %100 olan "örtecek" olarak ayarlandığından, görüntü her zaman kabının her bölümünü "kaplayacaktır". Bu durumda, kapsayıcı tarayıcı penceresidir. Bu, arka plan görüntüsü her zaman tarayıcı penceresi boyutuyla birlikte genişlemeye ve daralmaya devam edeceğinden, görüntünün bölümlerinin diğer içerik bölümlerinin arkasına gizleneceği anlamına gelir.

Bunun, sayfanın üst kısmındaki bir başlık modülüne eklenen normal bir arka plan resmi olduğunu hayal edin.

Görüntünün en boy oranı doğrudur (1920×1080) ve görüntünün boyutu, 1366×766 ekran boyutunda görüntülendiğinde herhangi bir örtüşme olmadan bölümü güzelce kaplar ve sığar. Resmin altındaki beyaz alan, sayfadaki içeriğin geri kalanıdır.

Şimdi, görüntünüz için paralaks seçtiğinizde olan budur.

Gördüğünüz gibi, görüntü hem dikey olarak (tarayıcı penceresinin en altına ulaşmak için) hem de yatay olarak (görüntünün en boy oranını korumak için) genişler. Siyah kare monitörünüzü temsil eder, bu nedenle siyah karenin içindeki her şey izleyicinin gördüğü şeydir. Arka plan görüntüsünün arkasına gizlenmiş olarak nerede oturduğunu görebilmeniz için alttaki beyaz içerik bölümünü yarı şeffaf yaptım. Siz kaydırırken görüntü sabit kalır ve diğer öğeler görüntünün önünde yukarı ve aşağı hareket eder.

True Paralaks Yöntemi Seçildiğinde Ne Olur?

True Paralaks setiniz varsa, görüntü aynı CSS sınıfına sahip yeni bir div'e sarılır:

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Ancak, küçük bir JavaScript kullanarak, görüntünün yüksekliği ve konumu, tarayıcı penceresinin boyutuna ve sayfayı aşağı kaydırırken dinamik olarak ayarlanır. Arka plan görüntüsüne dinamik olarak eklenen iki değer, height özelliği için px değeri ve transform özelliği için translate değeridir. Height özelliği değeri görüntünün yüksekliğini belirlerken transform özelliği translate değeri görüntünün x ve y eksenine göre sayfadaki tam konumunu belirler.

Tarayıcı pencerem 1366×766 iken paralaks arka plan resmimin resim etiketine eklenen kod:

    height: 960.8px;
    transform: translate(0px, 220.5px);

transform özelliğindeki iki sayıya dikkat edin. Bu iki sayı, arka plan görüntüsünün konumunu kontrol eder. İlk sayı (0px) görüntüyü x ekseni boyunca (yatay olarak) konumlandırır. 0px olarak ayarlandığından görüntü taşınmaz. İkinci sayı, görüntüyü y ekseni boyunca (dikey olarak) konumlandırır. Şu anda 220,5 piksel olduğundan, bu, görüntünün 220.5 piksel sayfa aşağı itildiği anlamına gelir.

Ayrıca yükseklik değerinin (960.8 piksel), tarayıcı penceremin yüksekliğinden (766 piksel) yaklaşık 200 piksel daha büyük olduğuna dikkat edin. Bu, tarayıcı penceresinin altından 220.5 piksel uzağa itilen görüntüye uyum sağlamak içindir.

True Paralaks Yöntemi seçildiğinde, görüntünüzün CSS Yönteminden daha fazla şiştiğini fark etmiş olabilirsiniz. Bunun nedeni, görüntünün konumunun tarayıcı yüksekliğinin %30'u kadar uzatılmış olmasıdır.

Normal arka plan illüstrasyonumuzu hatırlıyor musunuz?

True Parallax seçildikten sonra (elbette kaydırmaya başlamadan önce) görüntüye ne olur:

Gördüğünüz gibi, görüntü tarayıcı penceresinin altından biraz daha uzağa çekiliyor. Bu tarayıcı penceresi yaklaşık 1080×700 yani oldukça küçük ama size daha küçük bir masaüstü penceresinde neler olduğunu göstermek istedim.

Gerçek Paralaks Görüntüyü Neden O Kadar Uzatır?

En iyi tahminim, daha büyük ekran boyutlarına uyum sağlamak. Tarayıcı penceresi 1920×1080 ekran boyutuna ulaştığında, arka plan görüntüsü artık pencerenin altından geçmez ve güzel bir şekilde sığar.

True Paralaks Neden JavaScript Kullanıyor?

True Parallax'ın JavaScript gerektirmesinin ana nedeni, arka plan görüntüsünün kaydırma sırasında diğer öğelerden farklı bir hızda hareket etmesi gerektiğidir. Mario Brothers'ı hatırlıyor musunuz?

True Paralaks ile, tarayıcımın boyutunu artırırsam, görüntümün tarayıcı için her zaman yeterince büyük olduğundan emin olmak için JavaScript aracılığıyla yükseklik değeri de dinamik olarak artar.

Sayfayı aşağı kaydırırsam, çeviri konumu değeri (yukarıdaki örnekte 220,5 piksel) artar ve görüntünün dikey (y ekseni) konumunu sayfanın aşağısına taşır.

Yukarı kaydırırsam, çeviri konumu değeri düşer ve görüntüyü sayfaya geri çeker. Ancak, kaydırma sırasında görüntü diğer öğelerden farklı bir hızda aşağı itilip yukarı çekildiğinden, Gerçek paralaks efekti elde edersiniz.

Ne Tür Bir Resim Kullanmalıyım?

Sitenizde paralaks efektini kullanmak istiyorsanız, doğru arka plan resmini seçmek çok önemlidir. Arka planın çok dağınık veya dikkat dağıtıcı olmasını istemezsiniz. Ancak diğer yandan sıkıcı bir yan not olmasını da istemezsiniz.

İşte Paralaks için Doğru Görüntü Türünü Seçmek İçin 5 Genel İpuçları

1. Dikkat Dağıtan Fotoğraflardan Kaçının. Çok fazla devam eden görseller kafa karışıklığı yaratır ve içeriğin dikkatini dağıtır.
2. Fotoğrafınızın sitenizin temasıyla eşleştiğinden emin olun. Siteniz bir hikaye anlatıyor olmalıdır. Bu paralaks resmi (diğer resimleriniz gibi) temaya uymalıdır.
3. Büyük ve basit tutun. Unutmayın, paralaks görüntünüz daha küçük ekran boyutlarında da görüntülenecektir. Fotoğrafın ayrıntılarının daha küçük cihazlarda tanınamayacak kadar küçük olmadığından emin olun.
4. Gerektiğinde bir kaplama rengi ekleyin. Bazen iyi bir paralaks görüntüsünün hem karanlık hem de açık yönleri olabilir, bu da kaydırma sırasında metninizi gizlemenize neden olabilir. Koyu veya açık bir kaplama eklemek, metninizin görüntünün herhangi bir yerinde okunabilmesini garanti eder.
   
5. İlginç hale getirin. Sıkıcı bir şeye razı olmak için orada fotoğraf çekmenin bir yolu var. Kitlenizin ilgisini çeken ve dikkatlerini çeken birini bulmak için zaman ayırın.

Hangi Boyutta Paralaks Arka Plan Resmi Kullanmalısınız?

Bu soruya cevap vermek biraz zor. Tüm paralaks görüntülerine uyan tek bir boyut yoktur. Aslında, web tasarımında her şeye uyan tek bir boyut yoktur, en azından duyarlı tasarım ortaya çıktığından beri. Ancak, size kesin bir kural veremesem de, Divi ile doğru boyutta paralaks arka plan resimlerini seçmek için bazı genel yönergeler sunabilirim.

En popüler ekran boyutu yaklaşık 1366×766 olduğundan, kesinlikle tüm arka plan paralaks görüntülerinin en az bu boyutta olmasını sağlardım. Ancak daha büyük monitörlerin popülaritesi nedeniyle 1920 × 1080 gibi daha büyük bir boyutu tercih ederdim. Bu, kullanıcıların daha büyük masaüstlerinde yüksek kaliteli bir görüntü görmesini sağlayacaktır.

1920×1080 boyutlarında bir görüntüye sahip olmanın sorunu, nadiren 1080 piksel yüksekliğinde görünür bir bölüme sahip olmanızdır. Böylece gizli kalan bu görüntülerin altında banka yapabilirsiniz.

Paralaks Arka Plan Resminizin Doğru Görünmesini Sağlamak İçin Yararlı İpuçları

Başlıklar ve Üst Bölümler için

Resminizin tamamen görünür olduğundan ve harika göründüğünden emin olmanın en kolay yolu Tam Genişlik Başlık Modülünü kullanmaktır. Bu şekilde arka plan resminiz, ekran boyutu ne olursa olsun her zaman harika görünecektir. Ancak, Tam Genişlik Başlık Modülünü kullanarak bir paralaks arka plan görüntüsü kullanıyorsanız, görüntünün daha fazlasını göstermek için modülün üstüne ve altına biraz dolgu eklemeniz gerekebilir. Bunu Visual Builder'ı kullanarak yapabilirsiniz. Başlık Modülü Ayarlarına gidin. Gelişmiş Sekmesi altında, Ana Öğe metin kutusuna aşağıdakini girin:

Padding: 250px 0 250px;

Bu sizi doğru yöne götürmeli.

Hala yeterince resim göstermediyseniz, resminizin üst kısmını kırpmanızı ve ardından tekrar yüklemenizi öneririm. Bu yardımcı olabilir.

Ayrıca, görselin alt kısmında önemsiz içeriğe ve üstte daha önemli içeriğe sahip fotoğrafları seçmeye çalışın. Başlıklar için yalnızca paralaks görüntüsünün en üstteki 700 pikselini görmeyi beklemelisiniz.

Normal/Orta Bölümler için

Bölüm kullanıcının merkez bakış açısına ulaştığında tam bir resim elde edebilmeniz için içeriğinizin etrafında arka planı yeterince açığa çıkaracak kadar boşluk bıraktığınızdan emin olun. Dolguyu kendi avantajınıza kullanın. Paralaks kullanacaksanız, kullanıcılarınızın kafasının karışmasına ve görüntünün ne olduğunu görmek için yukarı ve aşağı kaydırma yapmasına izin vermeyin. Onlara ilk kez göstermek daha iyidir.

Alt Bölümler/Alt Bilgiler için

CSS Yöntemini kullanıyorsanız, arka plan resminizin alt kısmından daha fazlasını görmeyi bekleyebilirsiniz (ne kadar alanınız olduğuna bağlı olarak). Bu bölümlerde üst kısmın daha fazlasını göstermek için fotoğrafın altını kırpmayı denerdim.

True Parallax yöntemini kullanıyorsanız, resimlerinizin çoğunlukla üst kısmını göreceksiniz, bu yüzden onlara başlıklarınız gibi davranırdım.

İşte sayfanın üst, orta ve alt kısmındaki Gerçek Paralaks arka plan resimlerine bir örnek.

Bu tür bir köprü görüntüsü iyi çalışır çünkü yan tarafta güzel bir odak noktası vardır ve görüntünün alt kısmı üst kısım kadar önemli değildir, bu nedenle mesaj kullanıcıda asla kaybolmaz.

İşte CSS yöntemini kullanan aynı sayfa. Arka plan görüntüsünün sabit olduğunu ve tarayıcı penceresine genişlediğini gerçekten görebilirsiniz. Hatta tüm zaman boyunca arka planda sabitlenmiş aynı görüntü gibi görünüyor.

Mükemmel görüntüyü aradıktan, gerekli dolguyu ekledikten ve kırptıktan sonra hala memnun değilseniz, her zaman biraz korsanlığa başvurabilirsiniz.

Paralaks Görüntü Hackleri: Özel CSS ile Görüntünün Konumunu Değiştirme

Paralaks arka planının konumunu değiştirmek isterseniz, “.et_parallax_bg” css seçicisini kullanabilirsiniz. Paralaks efekti için görüntüyü konumlandıran varsayılan css buradadır.

.et_parallax_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

Fark ederseniz, varsayılan olarak, css paralaks yönteminin arka plan konumu özelliği "üst merkez" olarak ayarlanmıştır. Ancak arka plan görüntüsünün orijinal konumunu değiştirmek istersem, arka plan konumu özellik değerlerini ayarlayabilirsiniz.

Özel CSS'nizi belirli bir görüntüye yoğunlaştırmak ve tüm paralaks arka planınızı etkilememesini istiyorsanız, css'de hangi arka planı özelleştirmemiz gerektiğini belirleyebilmemiz için bölümünüze bir sınıf eklemeniz gerekir.

Gelişmiş sekmesi altındaki bölüm ayarlarına gidin ve “parahack” adlı bir CSS Sınıfı girin.
Şimdi Sayfa Ayarlarına gidin ve Gelişmiş sekmesini seçin.

Ardından, aşağıdaki Özel CSS örneklerinden herhangi birini girmek için Özel CSS kutusunu kullanın:

CSS Yöntemi kullanıyorsanız, aşağıdaki özel css'yi ekleyerek arka plan görüntüsünü dikey olarak ortalayabilirsiniz:

.parahacks .et_parallax_bg {
    Background-position: center center !important;
}

Arka plan görüntüsünü alta hizalamak için aşağıdaki özel css'yi ekleyin:

.parahacks .et_parallax_bg {
    background-position: bottom center !important;
}

Arka plan görüntüsünü belirli sayıda piksel yukarı taşımak için aşağıdaki özel css'yi ekleyin:

.parahacks .et_parallax_bg {
    background-position: center -150px !important;
}

True Paralaks yöntemini kullanıyorsanız, altta gizlenen fazladan 220 piksel (tarayıcınızın yüksekliğine bağlı olarak aşağı yukarı) hesaba katmanız gerekir. Arka plan görüntüsünü daha dikey olarak ortalamak için, aşağıdaki gibi bir negatif piksel değeri kullanarak arka plan konumu özelliğini ayarlamanız gerekir:

.parahacks .et_parallax_bg {
    background-position: center -100px !important;
}

Arka plan resmini daha aşağıya hizalamak için aşağıdaki özel css'yi ekleyin:

.parahacks .et_parallax_bg {
    background-position: center -220px !important;
}

TL; DR? İşte Ana Noktaların Video Özeti

Youtube Kanalımıza Abone Olun

Kapanışta

Umarım bu rehber paralaksın Divi ile nasıl çalıştığını derinlemesine anlamada yardımcı olmuştur. Neyse ki Divi, bize paralaks işlevselliği sağlamada neredeyse tüm ağır işleri yapıyor. Hem CSS yöntemi hem de True Parallax yöntemi, kutudan çıkar çıkmaz gerçeğe benzer harika efektler yaratır. Ancak, doğru görselleri bulmak ve onları sitemize uygun hale getirmek için ince ayar yapmak bize kalmış. Göreyim seni! Bahse girerim harika bir şey yaratacaksın.

Yorumlarda sizden haber bekliyorum.

Şerefe!