Divi ile paralaks kullanmanın ana kılavuzu
Paralaks için doğru görüntü boyutunu bulmaya çalışmak biraz sinirli olabilir. Görüntü standart bir arka plan görüntüsü olarak iyi görünebilir, ancak “Paralaks efekti kullanın” ı seçer seçmez görüntü patlayacak ve hiçbir şey doğru görünmüyor. Gelecekte bu ağırlaştırmayı önlemek için paralaksın ne olduğunu ve paralaks moduna eklendiğinde resimde ne olduğunu anlamanız gerekir. Bugün, Divi ile çalışmanın paralaksının derinliklerine dalacağım. İki farklı paralaks yöntemi kullandığınızda, en iyi boyutta hangi boyutta ne olacağını tam olarak açıklayacağım ve hatta görüntünüzü istediğiniz gibi konumlandırmak için bazı özel CSS hack’ini bile vereceğim.
Hadi gidelim. Paralaks nedir? Bir web tasarımı ile bağlantılı olarak, paralaks, bir tür iki boyutlu animasyon kullanarak yaşam gibi mesafe ve hareket algısı sağlayan etkileri tanımlamak için kullanılan bir terimdir. Bu, sabit bir noktaya bakarken bir mesafe yanılsaması oluşturmak için web sayfalarındaki farklı öğelerin hızını değiştirerek yapılır. Bu teknik bir süredir Web dışındaki yerlerde var. Süper Mario Kardeşleri hatırlıyor musun? 80’lerde (Nintendo NES) bir video oyunu oynadıysanız, çoğu oyun bu tekniği sadece 2D görüntüleri kullanarak hareket izlenimini vermek için kullanır. Ön cephedeki öğeler arka plandaki ağaçlardan/dağlardan/bulutlardan daha hızlı hareket eder. Böylece daha canlı bir hareket yaratmak.
Alt: 0;
Sol: 0;
Genişlik:%100;
Yükseklik:%100;
Arka Plan-Tekrar: Yenilenmez;
Arka Plan pozisyonu: üst merkez;
Arka plan boyutu: kapak;
}
/*** Bu, CSS yöntemini kullanırken görüntüyü düzeltmeye ayarlar ***/
.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
Arka Plan Uyarı: Sabit;
}
Arka plan boyutu%100 yükseklik ve genişlik ile “örtecek şekilde” düzenlendiğinden, görüntü kabın her bir parçasını her zaman “kapsayacaktır”. Bu durumda, kap tarayıcı penceresidir. Bu, görüntünün bir kısmının diğer içerik parçalarının arkasına gizleneceği anlamına gelir, çünkü arka plan görüntüsü her zaman tarayıcı penceresinin boyutuna uygun olarak genişleyecek ve küçüleceğidir.
Bunun, sayfanın üst kısmındaki başlık modülüne eklenen sıradan bir arka plan görüntüsü olduğunu hayal edin.
Doğru görüntü yönlerinin oranı (1920 × 1080) ve görüntünün boyutu, 1366 × 766 ekran boyutunda görüntülendiğinde örtüşmeden parçaya düzgün bir şekilde uyuyor. Resmin altındaki beyaz alan sayfada kalan içeriktir. Şimdi, resminiz için paralaks seçtiğinizde olan budur.
Gördüğünüz gibi, görüntüler dikey olarak (tarayıcı penceresinin altına ulaşmak için) ve yatay (görüntünün en boy oranını korumak için) iyi genişler. Kara kutu monitörünüzü temsil eder, böylece Black Box’taki her şey izleyicilerin gördüğü şeydir. Arka plan görüntüsünün arkasında nerede gizlendiğini görebilmeniz için Beyaz İçerik bölümünü yarı saydamın altına yaptım. Kaydırma ve diğer öğeler resmin önünde yukarı ve aşağı hareket ettiğinde resim kalır. Paralaks yöntemi tamamen seçildiğinde ne olur? Gerçek bir paralaks setiniz varsa, görüntü aynı CSS sınıfına sahip yeni bir Div’e sarılır: .et_parallax_bg { Pozisyon: Mutlak; Alt: 0;
Sol: 0;
Genişlik:%100;
Yükseklik:%100;
Arka Plan-Tekrar: Yenilenmez;
Arka Plan pozisyonu: üst merkez;
Arka plan boyutu: kapak;
}
Bununla birlikte, küçük bir JavaScript kullanılarak, görüntünün yüksekliği ve konumu, tarayıcı penceresinin boyutuna ve sayfayı aşağı kaydırırken dinamik olarak düzenlenir. Arka plan görüntüsüne dinamik olarak katma iki katma değer, yükseklik özelliği için PX değeri ve Dönüşüm özelliği için çeviri değeridir. Yükseklik özelliği değeri görüntünün yüksekliğini belirlerken, dönüşüm özelliği değeri, görüntünün sayfadaki tam konumunu x ve y eksenine göre belirler.
Aşağıda, tarayıcı penceremle paralaks arka plan görüntüsümden görüntü etiketine 1366 × 766’ya girilen kod: yükseklik: 960.8px;
Dönüşüm: Çeviri (0px, 220.5px);
Transform özelliğindeki iki sayıya dikkat edin. Bu sayıların her ikisi de arka plan görüntüsünün konumunu kontrol eder. İlk sayı (0px) görüntüleri x ekseni (yatay) boyunca konumlandırır. 0px olarak ayarlandığından, görüntü hareket ettirilmeyecektir. İkinci sayı görüntüleri y ekseni (dikey) boyunca konumlandırır. Şu anda 220.5px çünkü bu, görüntünün aşağı itildiği anlamına gelir. Ayrıca, yükseklik değerinin (960.8px) 200px civarında tarayıcı penceremin (766px) yüksekliğinden daha büyük olduğuna dikkat edin. Bu, tarayıcı penceresinin altından 220.5px itilen görüntüleri barındırmak içindir. Gerçek paralak yöntemi seçildiğinde, görüntünüzün CSS yönteminden daha büyük olduğunu fark etmiş olabilirsiniz. Bunun nedeni, görüntü konumunun tarayıcı yüksekliğinin% 30’unu daha germesidir. Her zamanki arka plan çizimimizi hatırlıyor musunuz?
Gerçek paralaks seçildikten sonra resimde olan şey budur (elbette yuvarlanmaya başlamadan önce):
Gördüğünüz gibi, görüntü tarayıcı penceresinin altından biraz daha çekilir. Bu tarayıcı penceresi 1080×700 civarında ölçülür, bu yüzden oldukça küçüktür, ancak size daha küçük masaüstü penceresine ne olduğunu göstermek istiyorum.
Gerçek paralaks resmi neden şimdiye kadar uzatıyor? En iyi tahminim daha büyük ekran boyutlarına uyum sağlamak. Tarayıcı penceresi 1920×1080 ekran boyutuna ulaştıktan sonra, arka plan görüntüsü artık pencerenin altından geçmez ve iyi eşleşir. Gerçek Paralaks neden JavaScript kullanıyor? True Parallax’ın JavaScript gerektirmesini gerektiren ana nedeni, arka plan görüntüsünün kaydırma yaparken diğer öğelerden farklı bir hızda hareket etmesidir. Mario Brothers’ı hatırlıyor musun? Gerçek paralakla, tarayıcı boyutumu artırırsam, JavaScript aracılığıyla yüksek değer de dinamik olarak artar. Görüntüimin tarayıcı için her zaman yeterince büyük olmasını sağlar. Sayfayı aşağı kaydırırsam, çeviri konumunun değeri (örnekte 220.5px yukarıda) artar, konum dikey (y ekseni) görüntüsünü sayfa altında hareket ettirir. Yuvarlanırsam, çeviri konumunun değeri azalır, görüntüyü sayfaya geri çekin. Ancak, görüntü yuvarlanırken aşağı itilip diğer öğelerden farklı bir hızda yukarı çekildiğinden, Paralax gerçek etkisini elde edersiniz.
Ne tür bir görüntü kullanmalıyım? Sitenizdeki paralaks efekti kullanmak istiyorsanız, doğru arka plan görüntüsünü seçmek çok önemlidir. Arka planın çok dağınık veya sinir bozucu olmasını istemezsiniz. Ancak öte yandan da sıkıcı bir yan rekor olmasını istemezsiniz. İşte paralaks için doğru görüntü türünü seçmek için 5 ortak ipucu Can sıkıcı fotoğraflardan kaçının. İçerikten karışıklık ve dikkat dağıtarak çok fazla ortaya çıkan görüntüler. Fotoğraflarınızın sitenizin temasına uygun olduğundan emin olun.Siteniz bir hikaye anlatmalıdır.Bu paralaks görüntüsü (diğer resminiz gibi) temayla eşleşmelidir. Büyük ve basit.Unutmayın, paralaks resminiz daha küçük bir ekran boyutunda da görülecektir.Fotoğraf detaylarının çok küçük olmadığından emin olun, böylece daha küçük bir cihazda tanınamaz.
Gerekirse renk kaplamasını ekleyin.Bazen iyi paralaks görüntüleri, kaydırma yaparken metninizi gizleyebilecek karanlık ve parlak yönlere sahiptir.Karanlık veya parlak bindirme eklemek, metninizin resimde herhangi bir yerde okunabileceğini garanti edecektir
İlginç hale getirin.Sıkıcı bir şeyi bitirmek için orada fotoğraf çekmenin bir yolu var.Kitlenizi içeren ve dikkatlerini çeken bir tane bulmak için zaman ayırın.
Kullanmanız gereken paralaks arka plan görüntüsünün boyutu nedir?
Buna cevap vermek oldukça zor. Tüm paralaks görüntüleri için uygun tek beden yoktur. Aslında web tasarımındaki her şey için uygun tek bir boyut yoktur, en azından duyarlı tasarım göründüğü için değil. Bununla birlikte, size katı bir kurallar veremeyebilsem de, Divi ile doğru paralaks arka plan görüntüsünü seçmek için bazı genel yönergeler sunabilirim. En popüler ekran boyutu 1366×766 civarında olduğundan, kesinlikle tüm paralaks görüntülerinin en azından bu boyutta olmasını sağlayacağım. Ancak monitörlerin daha büyük popülaritesi nedeniyle, 1920 × 1080 gibi daha büyük bir boyut seçeceğim. Bu, kullanıcıların daha büyük masaüstlerinde yüksek kaliteli görüntüler görmelerini sağlayacaktır. 1920×1080 boyutlarına sahip görüntülere sahip olmanın sorunu, nadiren 1080 piksel yüksekliğe sahip görünür bir parçaya sahip olmanızdır. Böylece gizli kalırken görüntülerin altında saklayabilirsiniz. Paralaks arka plan görüntüsünüzü yapmak için yararlı ipuçları, görüntünüzün tamamen görünür olduğundan ve iyi göründüğünden emin olmak için en kolay yolun başlığı ve üst kısmı için doğru görünür. Bu şekilde, ekran boyutu ne olursa olsun, arka plan görüntüsünüz her zaman iyi görünecektir. Ancak, tam geniş bir başlık modülü kullanarak bir paralaks arka plan görüntüsü kullanıyorsanız, daha fazla görüntü görüntülemek için modülün üstüne ve altına bazı rulmanlar eklemeniz gerekebilir. Bunu görsel bir oluşturucu kullanarak yapabilirsiniz. Başlık Modül ayarlarını açın. Gelişmiş Seviye sekmesinin altında, metin kutusuna aşağıdakileri girin Ana öğe: Dolgu: 250px 0 250px;
Sizi doğru yöne götürmeli. Resmi görüntülemek için hala yeterli değilseniz, resminizin üstünü kesmeyi ve sonra tekrar yüklemenizi öneririm. Bu yardımcı olabilir. Ayrıca, resmin altında önemsiz içeriğe sahip fotoğrafları ve üstte daha önemli içerik seçmeye çalışın. Başlıklar için, paralaks görüntüsünün yalnızca en iyi 700px’ini görmelisiniz. Normal/orta bölüm için, parçanın kullanıcının orta bakış açısına ulaştığında tam bir görüntü alabilmeniz için arka planı ortaya çıkarmak için içeriğinizin etrafında yeterli alan bıraktığınızdan emin olun. Kârınız için rulmanları kullanın. Paralaks kullanacaksanız, kullanıcınızın kafasının karışmasına izin vermeyin ve resmin ne olduğunu görmek için yukarı ve aşağı kaydırmanız gerekmez. İlk kez göstermek daha iyidir. Alt / altbilgi için CSS yöntemini kullanıyorsanız, arka plan görüntüsünüzün altını daha fazla görebilirsiniz (ne kadar alana bağlı olarak). Bu bölümde daha fazla üstü görüntülemek için fotoğrafın altını kesmeye çalışacağım. Gerçek Paralaks yöntemini kullanırsanız, görüntünüzün üst kısmını göreceksiniz, bu yüzden başlığınız gibi davranacağım. Aşağıda, sayfanın üst, orta ve altındaki gerçek paralaks arka plan görüntüsünün bir örneği verilmiştir.
Bu tür köprü görüntüsü iyi çalışır, çünkü yan tarafa iyi bir odak noktası vardır ve görüntünün alt kısmı üst kadar önemli değildir, bu nedenle mesaj asla kullanıcıdan kaybolmaz. CSS yöntemini kullanarak aynı sayfa. Arka plan görüntüsünün sabitlendiğini ve tarayıcı penceresine genişletildiğini gerçekten görebilirsiniz. Aslında, her zaman arka planda kalan aynı resim gibi görünüyor. Hacks Paralaks Görüntü: Görüntünün konumunu özel bir CSS ile değiştirin Paralaks arka plan konumunu değiştirmek istiyorsanız, css “.et_parallax_bg” seçmenlerini kullanabilirsiniz. Aşağıda, görüntüleri paralaks efektleri için konumlandıran varsayılan CSS’dir. .et_parallax_bg {
Pozisyon: Mutlak;
Sol: 0;
Genişlik:%100; Yükseklik:%100; Arka Plan-Tekrar: Yenilenmez; Arka Plan pozisyonu: üst merkez;
Arka plan boyutu: kapak;
}
Dikkat ederseniz, varsayılan olarak, CSS paralaks yöntemi için arka plan konumu özelliği “Top Center” a düzenlenecek şekilde aşağıdaki gibidir. Ancak arka plan görüntüsünün orijinal konumunu değiştirmek istersem, arka plan konumunun özellik değerini ayarlayabilirsiniz. Özel CSS’nizi belirli görüntülere yoğunlaştırmak istiyorsanız ve tüm paralaks arka planlarınızı etkilemiyorsanız, ayarlamamız gereken CSS arka planında tanımlayabilmemiz için bölümünüze sınıflar eklemeniz gerekir. İlerleme sekmesinin altındaki bölüm ayarlarını açın ve “Parahacks” adlı CSS sınıfına girin. Şimdi sayfa ayarlarını açın ve Gelişmiş sekmesini seçin. Ardından, aşağıdaki özel CSS örneklerinden birini girmek için Özel CSS kutusunu kullanın: CSS yöntemini kullanırsanız, aşağıdaki özel CSS ekleyerek ortada bir arka plan görüntüsü oluşturabilirsiniz. :
Arka Plan pozisyonu: Merkez Merkez! Önemli;
}
Aşağıda düz bir arka plan resmi oluşturmak için aşağıdaki özel CSS’yi ekleyin:
Arka Plan pozisyonu: Alt Merkez! Önemli;
}
Bir arka plan görüntüsünün birkaç pikselin tepesine geçmesi için aşağıdaki özel CSS’yi ekleyin: .paracks .et_parallax_bg {
Arka Plan -Pozisyon: Merkez -150px! Önemli; }
Gerçek Paralaks yöntemini kullanırsanız, altta gizlenmiş görüntüyü (yaklaşık olarak tarayıcı yüksekliğinize bağlı olarak) ekstra 220px’i (yaklaşık olarak tarayıcı yüksekliğinize bağlı olarak) dikkate almalısınız. Bir arka plan görüntüsünü dikey olarak daha merkezi hale getirmek için,: .paracks .et_parallax_bg {gibi negatif piksel değerlerini kullanarak arka plan pozisyonu özelliğini ayarlamanız gerekir.
Arka Plan -Pozisyon: Merkez -100 piksel! Önemli;}
Bir arka plan görüntüsünü daha düz hale getirmek için aşağıdaki özel CSS’yi ekleyin:
Arka Plan -Pozisyon: Merkez -220px! Önemli;
}
TL;Dr.?Aşağıda, kapanıştaki YouTube kanalımıza abone olmanın ana noktasından videonun bir özetidir. Bu kılavuz, Parallax’ın Divi ile nasıl çalıştığını derinlemesine anlamaya yardımcı olur.Neyse ki Divi bize paralaks işlevselliği vermek için neredeyse tüm ağır işleri yaptı.CSS yöntemi ve gerçek paralak yöntemi, yaşam gibi olağanüstü efektler yaratır.Ancak, doğru resmi bulmak ve sitemiz için işlevini sağlamak için doğru bir şekilde değiştirmek bize kalmıştır.Buna git!Eminim olağanüstü bir şey yaratacaksınız.Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
