Divi’deki CSS paralaksının arka planına karşı doğrudan yönün etkisi nasıl birleştirilir
Divi’de arka plan görüntüleri olan CSS paralaksını kullanmak, çok benzersiz bir havada uçma efekti oluşturmamızı sağlar. Paralaks, web sitemize hayat ekleyebilmemizin birçok yolundan biridir. Paralaks’ı çok çeşitli Hover Divi ile birleştirirken, içeriği daha canlı hale getiriyoruz. Bu öğreticide, Divi’de benzersiz bir CSS paralaktı arka plan havzası efekti hızlı ve kolay bir şekilde tasarlayabileceğinizi göstereceğiz. Özel eklentiler veya kodlama gerekmez! Başlayalım. Aşağıdaki gizlice göz atma, bu öğreticide tasarlayacağımız CSS paralaks arka planının gelişim etkisine bir bakış.
Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: İlk Divi’de bir paralaks havalanma atılım efekti oluşturma, bir sıra sütun ile normal bölümü yapın.
Modülü eklemeden önce, bölüm ayarlarını açın ve CSS paralaksını kullanarak arka plan görüntüsünü ekleyin. Minimum görüntü genişliğinin 1920px olduğundan emin olun. Tasarım, çok fazla dokuya sahip daha koyu bir arka plan görüntüsü ile iyi çalışır. Divi Builder’da bulunan kahve dükkanı düzeni paketlerimizden birini kullanıyorum. Ardından aşağıdaki bölüme biraz dolgu ekleyin: Dolgu: Yukarıdaki 10VW, 10VW Aşağı Blurb modülünü ekleyin Arka plan ve rulmanlar yer aldıktan sonra modülü satıra ekleyin. Ardından, açıklamanın içeriğini birkaç cümle metin cümlesiyle güncelleyin. Varsayılan başlığı buraya kaydedebilirsiniz. Ardından simgeyi kullanmak için tıklayın ve açıklama için kahve simgesini seçin. İçerik hazır olduktan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #fffff yazı tipi boyutu simgesi: 50px metin tesviye: orta yazı tipi başlık: oswald başlık yazı tipi tt tt renk metin başlığı: #fffff aralık harfleri başlık: 2px gövde yazı tipi: nunito Gövde Metin Rengi: #FFFFFF Gövde Mektup Alanı: 1px Dolgu: Top 30px, alt 30px, sol 30px, sağ 30px, açıklama tasarlandıktan sonra satırın genişliğini ayarlama, satır ayarlarına atlayın ve maksimum genişliği ayarlayın. Maksimum genişlik:% 80 Sütun ayarı Bu örnek için, Sütun düzeyinde Hover efektini etkinleştireceğiz. Bu, şimdiki için yalnızca bir modül kullansak da, içerik oluşturmak için birkaç modül kullanmanıza olanak tanır. Bu paralaks vuruş efekti çalışması için, bizim tarafımızdan kullandığımız sütuna aynı arka plan görüntüsünü eklememiz gerekir. Ayrıca sütun arka plan görüntüsünde aynı CSS paralaks yöntemini de kullanmamız gerekiyor. Sütun ayarlarını açın ve CSS paralaksını kullanarak aynı arka plan görüntüsünü ekleyin.
Sütun arka plan görüntüleri ve arka plan görüntüleri arasında herhangi bir fark göremeyeceksiniz, çünkü her ikisi de Web sayfasında tam olarak aynı yerdeki görüntüleri geliştiren CSS paralaksını kullanır. Ancak, Hover etkisi uygulandıktan sonra farkı göreceksiniz. Sütun tasarım ayarlarını aşağıdaki gibi güncellemeye devam edin: Dolgu: 4VW üst, 4vw Yuvarlak açının altında: 10px daha sonra aşağıdaki gibi görünen gölge sütunu verin: Gölge Kutusu: Ekran Yakalama Dikey Konum Gölge Kutusu: 0px Plashed mukavemet Gölge Kutusu: 36px Gölge Renk (Varsayılan): RGBA (0.0,0,0) Gölge Renk (Nokta İmleç): RGBA (0.0.0.0.72) Şimdi Dönüşüm seçeneğini girelim ve imleci yönlendirirken aşağıdaki dönüşüm kuvvetini güncelleyelim: Dönüşüm Ölçeği (İmleci Göster):% 105 Bu, arka plan görüntüsünden hafif bir etki yaratmak için sütunu (ve içeriğini) hafifçe genişletecektir. Y -ekseni çevirin (imleci işaret edin):% -2.5 Bu, biraz asimetrik transfer yapmak için yüzerken sütunu biraz yukarı taşır.
Dönüşüm Kökeni:% 100% 50 (alt orta), çeviri değeri ile birleştirildiğinde ince menteşe etkisine benzeyen merkezi kökenten ölçeklendirme etkisini başlatır. Bu şimdiye kadar CSS paralaksının etkisidir.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve düzenini sayfanıza aktarmak için Haftalık Divi Düzen Paketine erişin! Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: İlk Divi’de bir paralaks havalanma atılım efekti oluşturma, bir sıra sütun ile normal bölümü yapın.
Modülü eklemeden önce, bölüm ayarlarını açın ve CSS paralaksını kullanarak arka plan görüntüsünü ekleyin. Minimum görüntü genişliğinin 1920px olduğundan emin olun. Tasarım, çok fazla dokuya sahip daha koyu bir arka plan görüntüsü ile iyi çalışır. Divi Builder’da bulunan kahve dükkanı düzeni paketlerimizden birini kullanıyorum. Ardından aşağıdaki bölüme biraz dolgu ekleyin: Dolgu: Yukarıdaki 10VW, 10VW Aşağı Blurb modülünü ekleyin Arka plan ve rulmanlar yer aldıktan sonra modülü satıra ekleyin. Ardından, açıklamanın içeriğini birkaç cümle metin cümlesiyle güncelleyin. Varsayılan başlığı buraya kaydedebilirsiniz. Ardından simgeyi kullanmak için tıklayın ve açıklama için kahve simgesini seçin. İçerik hazır olduktan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #fffff yazı tipi boyutu simgesi: 50px metin tesviye: orta yazı tipi başlık: oswald başlık yazı tipi tt tt renk metin başlığı: #fffff aralık harfleri başlık: 2px gövde yazı tipi: nunito Gövde Metin Rengi: #FFFFFF Gövde Mektup Alanı: 1px Dolgu: Top 30px, alt 30px, sol 30px, sağ 30px, açıklama tasarlandıktan sonra satırın genişliğini ayarlama, satır ayarlarına atlayın ve maksimum genişliği ayarlayın. Maksimum genişlik:% 80 Sütun ayarı Bu örnek için, Sütun düzeyinde Hover efektini etkinleştireceğiz. Bu, şimdiki için yalnızca bir modül kullansak da, içerik oluşturmak için birkaç modül kullanmanıza olanak tanır. Bu paralaks vuruş efekti çalışması için, bizim tarafımızdan kullandığımız sütuna aynı arka plan görüntüsünü eklememiz gerekir. Ayrıca sütun arka plan görüntüsünde aynı CSS paralaks yöntemini de kullanmamız gerekiyor. Sütun ayarlarını açın ve CSS paralaksını kullanarak aynı arka plan görüntüsünü ekleyin.
Sütun arka plan görüntüleri ve arka plan görüntüleri arasında herhangi bir fark göremeyeceksiniz, çünkü her ikisi de Web sayfasında tam olarak aynı yerdeki görüntüleri geliştiren CSS paralaksını kullanır. Ancak, Hover etkisi uygulandıktan sonra farkı göreceksiniz. Sütun tasarım ayarlarını aşağıdaki gibi güncellemeye devam edin: Dolgu: 4VW üst, 4vw Yuvarlak açının altında: 10px daha sonra aşağıdaki gibi görünen gölge sütunu verin: Gölge Kutusu: Ekran Yakalama Dikey Konum Gölge Kutusu: 0px Plashed mukavemet Gölge Kutusu: 36px Gölge Renk (Varsayılan): RGBA (0.0,0,0) Gölge Renk (Nokta İmleç): RGBA (0.0.0.0.72) Şimdi Dönüşüm seçeneğini girelim ve imleci yönlendirirken aşağıdaki dönüşüm kuvvetini güncelleyelim: Dönüşüm Ölçeği (İmleci Göster):% 105 Bu, arka plan görüntüsünden hafif bir etki yaratmak için sütunu (ve içeriğini) hafifçe genişletecektir. Y -ekseni çevirin (imleci işaret edin):% -2.5 Bu, biraz asimetrik transfer yapmak için yüzerken sütunu biraz yukarı taşır.
Dönüşüm Kökeni:% 100% 50 (alt orta), çeviri değeri ile birleştirildiğinde ince menteşe etkisine benzeyen merkezi kökenten ölçeklendirme etkisini başlatır. Bu şimdiye kadar CSS paralaksının etkisidir.
Şimdi, her biri aynı bulanıklık ve havada uçma efektine sahip toplam üç sütun oluşturmak için iki kez satır ve yinelenen sütun ayarlarını açın.
Buradaki nihai sonuç son tasarım. Sayfayı aşağı kaydırırken paralaks arka plan görüntüsünün varsayılan olarak nasıl gizlendiğine dikkat edin. Daha sonra imleci göründüğünde her sütuna yönlendirirken görünürler. Ayrıca, imleci sütuna işaretlerken sayfayı aşağı kaydırırken paralaksın hala sütunda çalıştığını görebilirsiniz. Bu pürüzsüz bir sarkma etkisidir, ancak çok benzersizdir. Hover efektine dönüş ekleyerek, tasarıma iyi bir dokunuş katan CSS Paralaks Hover efektine de dönme ekleyebiliriz. Her sütunu açın ve aşağıdakileri güncelleyin: Dönüştürme z ekseni (yüzerken): 5deg Karıştırmak istiyorsanız, orta sütunda -5 derecelik bir dönüş yapabilirsiniz. Sonuçlar aşağıdadır. Ve burada daha parlak bir arka plan görüntüsü ve daha koyu bir metin ile aynı tasarım. Bölüm 2: Divi Taslağında Cam Büyümesinin Paralakslık Kalkanı Etkisi Oluşturun Birinci Tasarımın Bir Parçası Daha sonra bölümün ayarlarını açın ve arka plan görüntüsünü yenisiyle değiştirin. Video oyunu düzeni paketlerimizden birini kullanıyorum çünkü bu gerçekten paralaks havada genişlemenin etkilerini vurguluyor. % Genişlik maks: % 98 Bundan sonra, İçerik sekmesine atlayın ve yalnızca bir tane kalacak şekilde iki sütunu silin. Bu tasarım için sütun ayarları, Hover efektini sütun seviyesi yerine modül seviyesine uygulamamız gerekir, bu nedenle sütun için varsayılan kuvveti sıfırlamamız gerekir. Bunu yapmak için sütun öğesini sağlayın ve “Stil öğesini sıfırla” seçeneğini seçin. Sütun ayarları varsayılan kuvvete döndükten sonra bulanıklık modülünü güncelleyin, açıklama için modül ayarlarını açın ve bölüme eklenen aynı paralaks arka plan görüntüsünü ekleyin. Dairesel bir modül yapmak için yapıştırıcı, her şeyden önce aşağıdaki genişliği ve yüksekliği aşağıdaki gibi vermemiz gerekiyor: Genişlik: 300 piksel hizalama modülü: Orta Yüksek: 300 piksel Dairesel efekti tamamlamak için, yuvarlak açıyı güncellememiz ve biraz sınır vermemiz gerekir. Yuvarlak açı:% 50 sınır genişliği: 1px sınır rengi: RGBA (255,255,255.0.12) Bir sonraki kutu gölgesinin etkisi, gelgitteki kutunun gölgesinin gölgesini aşağıdaki gibi verin: Kutu Gölgesi: Bkz. Ekran Ekranı Kuvvet Kutusu: 36px Gölge Renk (Varsayılan): RGBA (0.0,0,0) Rengi Gölge (nokta imleci): RGBA (0.0,0,0,7) Etkinin Dönüşümü Kutunuzun gölgesi yüklendikten sonra, Dönüşüm seçeneğini şu şekilde güncelleyin: Dönüşüm Kökeni (Varsayılan):% 50% 0 (orta sol), kısa bir açıklama, sayfanın dışına yerleştirildikten sonra uzatılmayacaktır. Üç sıra sütun. Dönüşüm Ölçeği (İmleci Noktalı):% 130, açıklamayı artıracak ve serin havuz efekti için paralaks arka plan görüntüsünü gerçekten büyütecektir. Çift sütun Açıklama tamamlandıktan sonra, her biri aynı açıklama modülüne sahip üç sütun yapmak için sütunu çoğaltabiliriz. Toplam üç sütun için satır ayarlarını ve çoğaltma sütunlarını iki kez açın. Menşe dönüşümünü güncelleyin, tüm açıklama modüllerimiz “orta sol” olarak ayarlanan dönüşüm kaynağına sahip olduğundan, bunu orta ve sağ sütunlardaki açıklama için uygun konumdan ölçeklendirmeleri için ayarlamamız gerekir. Sütun 2’deki açıklama modülü ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Kökeni:% 50% 50 (Orta) Ardından Sütun 3’teki Açıklama Modülü ayarlarını açın ve aşağıdakileri güncelleyin: Dönüşüm Kökeni:% 50% 100 (Orta Sağ) Nihai sonuç şimdi sonucu görüyor. Etkinin açıklamanın arkasındaki CSS paralaks arka plan görüntüsünü gerçekten nasıl büyüttüğüne dikkat edin. Ve imleci bulanıklığa işaret ederken aşağı kaydırdığınızda, büyüteç efekti gibi görünüyor. Aslında, bu o kadar havalı ki, sadece yüzen bir durumda değil, varsayılan bir stil olarak bırakmak isteyebiliriz.