Divi'deki Görüntülere, Modüllere ve Satırlara Ken Burns Hover Efektleri Nasıl Eklenir

Ken Burns Etkisi bir süredir ortalıkta dolaşıyordu. Efekt, filmlerinde görüntülere hayat vermek için kaydırma ve yakınlaştırma tekniklerinin bir kombinasyonunu kullandığı için Amerikalı belgeselci Ken Burns tarafından ünlendi. Web tasarımında, Ken Burns Etkisi arka plan resimlerine hayat vermek için popüler bir tasarım tekniği olduğunu kanıtlamıştır.

Ken Burns Effect, görüntüler için fareyle üzerine gelme efekti olarak da kullanılabilir. Elbette bunun daha önce kullanıldığını gördünüz. Web tasarımcıları, görsellere hayat vermek için görsellerin yakınlaştırmasına, hareket etmesine ve dönmesine neden olan fareyle üzerine gelme efektleri ekler.

Divi Builder'a Dönüştürme efektlerinin piyasaya sürülmesiyle, resimlerinize ken yanıkları vurgulu efektleri getirmek hiç bu kadar kolay olmamıştı. Bu dönüştürme seçenekleri, bir görüntüyü istediğiniz gibi ölçeklemenize (yakınlaştırmanıza), taşımanıza (veya kaydırmanıza) ve döndürmenize olanak tanır. Ve bu dönüşümleri görüntünün üzerine gelme durumuna uygulayabildiğiniz için, tasarım olasılıkları hemen hemen sonsuzdur.

Bu eğitimde, Divi Builder'ı kullanarak görüntülere ve satırlara tamamen benzersiz ken yanıkları vurgulu efektleri oluşturmanın ne kadar kolay olduğunu göstereceğim.

Başlayalım.

Gizlice Bakış

İşte Divi'nin dönüştürme seçenekleriyle kolayca gerçekleştirilebilen ken yanıkları vurgulu efektine bir bakış.

Açıklanan Temel Kavram

Ken Burns vurgulu efektini oluşturmanın temel konsepti, görüntünün üzerine gelindiğinde görüntüyü ölçeklendirmek, konumlandırmak ve döndürmek için Divi'nin yeni dönüştürme seçeneklerini kullanmayı içerir. Fareyle üzerine gelindiğinde görüntünün daha da büyümesini sağlamak için ölçek dönüştürme özelliğini belirli bir yüzdeyle artırabilirsiniz. Görüntüyü x ve y ekseni boyunca hareket ettirmek için translate transform özelliğini kullanabilirsiniz. Ve belirli bir derece değeri (bu durumda x ekseninde döndürme için derece değeri) ayarlayarak döndürme dönüştürme özelliğini kullanarak görüntüyü döndürebilirsiniz. Son olarak, ken burns vurgulu efektinin akışının hızını kontrol etmek için geçiş süresini (hız) ve hız eğrisini kontrol edebilirsiniz. Üç dönüştürme özelliği ve geçiş özelliği, fotoğraflarınızı hayata geçiren bir ken yanıkları vurgulu efekti oluşturmak için birlikte çalışır.

Divi'nin sağladığı yerleşik ayarları kullanarak dönüştürme özelliklerine ve geçiş özelliklerine kolayca ince ayar yapabilirsiniz. Ancak, bu efekti çalıştırmanın anahtarı, resminizi içeren sütuna uygulanması gereken basit bir css satırı (taşma:gizli) içerir. Görüntüyü ölçeklendireceğiniz, hareket ettireceğiniz ve döndüreceğiniz için, görüntünün taşmasının onu içeren sütunun dışına gizlenmesini istiyorsunuz.

Temel fikre ve işlevselliğe sahip olduğunuzda, Divi'nin dönüştürme seçeneklerini kullanarak görüntüyü tam olarak istediğiniz gibi konumlandırmanın ne kadar kolay olduğu dikkat çekicidir.

Ken Burns Hover Etkisi Örneklerini ÜCRETSİZ İndirin

Ücretsiz Ken Burns Hover Etkisi Örneklerine el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Zip dosyasını indirdikten sonra klasörü açın. Ardından, Divi Builder Taşınabilirlik özelliğini kullanarak .json düzenini içe aktarın. Veya Divi'nin Sürükle ve Bırak işlevini kullanarak dosyayı Divi Builder'a sürükleyebilirsiniz. Bu kadar!

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeni Bir Sayfaya Başlarken

Yapmanız gereken ilk şey yeni bir sayfa oluşturmak. Ardından sayfanıza bir başlık verin ve Divi Builder'ı ön uçta dağıtın. Ardından “Sıfırdan Oluştur” seçeneğini seçin.

Bir Sütun Satırındaki Bir Görüntüye Ken Burns Etkisi Ekleme

Bu ilk temel örnek için, bir sütun satırındaki tek bir görüntüye ken yanıkları vurgulu efektinin nasıl ekleneceğini göstereceğim. Bu efekti elde etmek için ölçekleme, çevirme ve döndürme dönüştürme seçeneklerini kullanacağım.

İlk olarak, tek sütunlu bir satırla yeni bir bölüm oluşturun. Ardından satıra bir görüntü modülü ekleyin.

Sütun Taşmasını Gizleme

Görüntü ayarlarını güncellemeye başlamadan önce, satır ayarlarını açın ve Gelişmiş Sekmesine tıklayın. Ardından, aşağıdaki özel CSS'yi Sütun Ana Öğesine ekleyin:

overflow: hidden;

Bu, görüntü üzerine gelindiğinde daha büyük bir boyuta ölçeklendiğinde görüntünün sütun kabının ötesine uzanmasını (veya taşmasını) önleyecektir. Bunu eklemezseniz, resim kapsayıcıdan ayrılacak ve sayfanın diğer öğelerini gizleyecektir. Teknik olarak, bu css'yi sütun yerine satır ana öğesine ekleyebilirsiniz, ancak herhangi bir özel satır dolgusundan da kurtulmanız gerekir.

Satır ayarlarını kaydedin.

Resminizi Ekleme

Artık image modülüne image ekleyebiliriz. Görüntü modülü ayarlarını açın ve bir görüntü ekleyin.

Resmin sütundan önemli ölçüde daha büyük olduğundan emin olun. Bu, fareyle üzerine gelindiğinde görüntüyü daha büyük bir boyuta ölçeklediğinizde görüntünün bulanık görünmesini önlemek için önemlidir. Tek sütunlu bir satırın varsayılan ayarlarını kullanıyorsanız, sütunun maksimum genişliği 1080 piksel olacaktır. Bu yüzden, yaklaşık 1500 piksel genişliğinde ve 900 piksel yüksekliğinde bir resim kullanıyorum.

Önemli: Genel bir kural olarak, görüntü ne kadar büyükse, görüntü kalitesini kaybetmeden görüntüyü ölçeklendirmek, taşımak ve döndürmek için o kadar fazla alana sahip olursunuz.

Dönüştürme Vurgulu Efektleri Ekleme

Artık imajımızı yerleştirdiğimize göre, Ken Burns vurgulu efekti oluşturmak için bu dönüştürme seçeneklerini kullanma zamanı. Tasarım sekmesine gidin ve Dönüştür seçeneklerini açın. Vurgulu efektleri etkinleştirin ve vurgulu sekmesini seçin. Artık herhangi bir dönüştürme efekti özelleştirmesi, yalnızca görüntü modülünün fareyle üzerine gelme durumu için geçerli olacaktır. Ardından, Dönüştürme Ölçeği sekmesi altında aşağıdakileri güncelleyin:

Dönüştürme Ölçeği x ekseni (fareyle üzerine gelme): %136
Ölçeği y eksenini dönüştür (fareyle üzerine gelme): %136

Ardından Dönüştür Çevir sekmesine tıklayın ve aşağıdakileri güncelleyin:

Dönüştür x eksenini çevir (fareyle üzerine gelme): %3
Dönüştür Y eksenini çevir (fareyle üzerine gelme): %9

Bu, görüntüyü %3 sola ve %9 aşağı kaydırır. Bu özel görüntü için, yakınlaştıracak ve çifti sütun görünüm penceresinin merkezine getirecek bir efekt arıyordum.

Varsayılan olarak, çevirme uzunluğu değerleri piksel cinsinden olacaktır (yüzde değil). Görüntüyü hareket ettirmek için pikselleri kullanabilirsiniz, ancak yüzde kullanmanın konumlandırmayı daha duyarlı hale getirdiğini görüyorum.

Ardından Dönüştür Döndür sekmesine tıklayın ve aşağıdakileri güncelleyin:

Dönüştür Döndür x ekseni (vurgu): 6deg

Geçiş Seçeneklerini Güncelle

Son olarak, geçiş süresini (dönüşüm vurgulu efektinin tamamlanması ne kadar sürer) ve hız eğrisini (geçişin süresi boyunca hızı değiştirmesine izin veren zamanlama işlevi) güncellememiz gerekir. Bu örnekte, fareyle üzerine gelindiğinde daha dramatik (ve klasik) bir Ken Burns efekti için geçişin daha uzun sürmesini istiyorum. Bunu yapmak için gelişmiş sekmesine gidin ve geçiş seçeneklerini aşağıdaki gibi güncelleyin:

Geçiş Süresi: 2000ms (veya 2 saniye)
Geçiş Hızı Eğrisi: Doğrusal (bu, geçiş hızının süre içinde değişmemesini sağlar)

Son sonuç

Şimdi nihai sonucu kontrol edelim. Aşağıdaki gifin tutarsızlığı sizi yanıltmasın. Canlı bir sitede geçiş gerçekten pürüzsüz.

Üç Sütunlu Satırda birden çok görüntüye Ken Burns Hover Efekti ekleme

Birden çok sütundaki görüntülere ken yanıkları vurgulu efekti eklemek istiyorsanız, aynı işlem geçerlidir. Yapmanız gereken ana şey, emin olmak ve resminizi içeren sütunların her birine "overflow:hidden" css snippet'ini eklemektir.

Yukarıdaki önceki örneğimizi kullanarak, satırın sütun yapısını üç sütunlu bir düzene değiştirin.

Ardından, her sütunun taşmasını gizleyecek özel CSS parçacıklarıyla satır ayarlarını güncelleyin.

Sütun 1 Ana Öğe CSS:

overflow:hidden;

Sütun 2 Ana Öğe CSS:

overflow:hidden;

Sütun 3 Ana Öğe CSS:

overflow:hidden;

Ardından görüntü modülünü kopyalayın ve 2. ve 3. sütunlara yapıştırın.

Bu kadar. İşte nihai sonuç.

Bu tasarım daha tipik bir galeri ızgarası düzeni olduğundan, fareyle üzerine gelme animasyonunu keskinleştirmek için muhtemelen geçiş süresini biraz hızlandırmak isteyeceksiniz. Divi'nin çoklu seçim özelliğini kullanarak bunu kolayca yapabilirsiniz. Ctrl veya cmd tuşunu basılı tutun ve tüm görüntü modüllerini seçin. Ardından, Öğe Ayarları modunu açmak için resimlerden birinin üzerindeki ayarlar dişli çark simgesine tıklayın.

Artık öğe ayarlarında yaptığınız tüm güncellemeler tüm resimlere aynı anda uygulanacaktır. Öğe ayarlarındaki geçiş seçeneklerini aşağıdaki gibi güncelleyin:

Geçiş Süresi: 500ms

İşte yürürlükte olan yeni geçiş süresi.

Arka Plan Görüntüsüyle Herhangi Bir Modüle Ken Burns Hover Etkisi Ekleme

Ken Burns vurgulu efekti, Görüntü Modülü dışındaki modüller için de kullanılabilir. Bu, bir modülün arka plan görüntüsüyle birlikte metni veya simgeleri dönüştürmek istiyorsanız işe yarar.

Bir Metin Modülüne Ken Burns efektini nasıl ekleyeceğiniz aşağıda açıklanmıştır.

Önce tek sütunlu bir satırla yeni bir normal bölüm oluşturun. Ardından satıra bir metin modülü ekleyin.

Metin modülünü aşağıdaki içerikle güncelleyin:

<h1>We're Engaged!</h1>

Ardından modüle bir arka plan resmi ekleyin. Fareyle üzerine gelindiğinde görüntüyü ölçeklendirmek ve taşımak için yeterli alan bırakacak kadar büyük bir görüntü eklemeyi unutmayın.

Ardından başlık tasarımı seçeneklerini aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Prata
Başlık Metni Boyutu: 6vw
Özel Dolgu: 10vw üst, 10vw alt, 3vw sol

Geçiş Süresi: 5000ms

Şimdi metin modülüne aşağıdaki Dönüştürme Ayarlarını ekleyin.

Dönüştürme Ölçeği x ekseni (fareyle üzerine gelme): %118
Ölçeği y eksenini dönüştür (fareyle üzerine gelme): %118

Dönüştür x eksenini çevir (fareyle üzerine gelin): %6
Dönüştür y eksenini çevir (fareyle üzerine gelin): %6

Şimdi, Sütun için aşağıdaki özel CSS ile Satır Ayarlarını güncelleyin.

Sütun Ana Öğe CSS'si:

overflow:hidden;

Şimdi sonucu kontrol edin.

Fareyle üzerine gelindiğinde metnin ve arka plan görüntüsünün birlikte nasıl dönüşeceğine dikkat edin.

Ken Burns Hover Efektini Ek Hover Efektleriyle Birleştirme

Ayrıca daha fazla yaratıcılık için bir modüle uygulanan Ken Burns Hover Effect'i ek efektlerle birleştirebilirsiniz.

Ken Burns Hover Efektini Filtre Efektleriyle Birleştirme

Bunları unuttuysanız, filtre efektleri, özellikle fareyle üzerine gelindiğinde modüllerinize yaratıcı stil eklemenin harika bir yoludur. Ve bazı oldukça benzersiz vurgulu geçişler için bu filtre efektlerini dönüştürme efektiyle birleştirebilirsiniz.

Size göstermek için, bir metin modülüne ken burns efekti ekleyen yukarıdaki örneği kullanalım. Metin modülü zaten dönüşüm vurgulu efektine sahip olduğundan, görüntüyü siyah beyazdan renkliye değiştirmek için ek bir filtre efekti ekleyelim.

Metin modülü ayarlarını açın ve aşağıdaki filtre seçeneğini güncelleyin:

Doygunluk (varsayılan): %0
Doygunluk (fareyle üzerine gelme): %100

Bu geçiş, metin modülünü varsayılan olarak %0 doygunluğa ayarlayacak ve bu da rengi çıkarıp siyah beyaz yapacaktır. Fareyle üzerine gelindiğinde %100'e geri dönmek, görüntünün orijinal rengini geri ekleyecektir.

İşte ken burns vurgulu efektiyle birleştirilmiş filtre efektinin son etkisi.

Ken Burns Hover Efektini Satır Dönüşümü Efektleriyle Birleştirme

Bu örnek için, size ken burns vurgulu efektini satıra eklenen ek bir dönüştürme efektiyle nasıl birleştireceğinizi göstereceğim. Buradaki fikir, satırı varsayılan durumunda ölçeklemek ve döndürmek için dönüştürme efektlerini kullanmak ve ardından üzerine gelindiğinde orijinal tasarımı geri yüklemektir.

NOT: Bu teknik gerçekten yalnızca tek bir modüle sahip tek sütunlu bir satır için işe yarar. Bunun nedeni, ziyaretçinin aynı anda modülün ve satırın üzerine gelmesi gerekmesidir. Bu nedenle modülün satırın tam yüksekliğini ve genişliğini alması gerekir. Ek modüller veya boşluk, vurgulu durumunu bozar ve sorunlara neden olur.

Bunu yapmak için, zaten ken burns vurgulu efektini ek bir filtre efektiyle birleştiren mevcut metin modülü tasarımımızla kalacağız. Yani bu aslında üçlü vurgulu bir etkidir!

Metin modülünü içeren satırın ayarlarını açın. Ardından aşağıdakileri güncelleyin:

Özel Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol, 0 piksel sağ

Bu, metin modülü ile satır arasında ek boşluk olmadığından emin olmak içindir.

Ardından, satıra aşağıdaki gibi bir kutu gölgesi ekleyeceğiz:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 36px
Gölge Rengi: rgba(0,0,0,0.17)

Şimdi aşağıdaki Dönüştürme efektlerini ekleyin:

Ölçeği x eksenini dönüştür (varsayılan): %70
Ölçeği x eksenini dönüştür (fareyle üzerine gelme): %100
Ölçeği y eksenini dönüştür (varsayılan): %70
Ölçeği y eksenini dönüştür (fareyle üzerine gelme): %100

Dönüştür Y eksenini döndür (varsayılan): 19deg
Dönüştür Y eksenini döndür (fareyle üzerine gelin): 0deg
Dönüştür Döndür z ekseni (varsayılan): 23 derece
Dönüştür Döndür z ekseni (vurgu): 0deg

Şimdi nihai sonucu kontrol edelim.

Tüm İçerik Satırına Ken Burns Hover Etkisi Ekleme

Merak ediyorsanız, Ken Burns vurgulu efekti, vurgulu olarak tüm bir içerik satırını hayata geçirmek için de kullanılabilir. Bu, çok fazla içeriğe sahip satırlar için pek pratik olmayacaktır çünkü ziyaretçiler için kafa karıştırıcı veya dikkat dağıtıcı bir yol olacaktır. Ancak başlıklar gibi şeyler için bu kullanışlı bir tasarım tekniği olabilir. İşin püf noktası, bölüme özel CSS pasajını "overflow:hidden" eklemektir. Ardından, dönüşüm efektlerini satıra ekleyebilirsiniz.

Son düşünceler

Ken Burns Etkisi bir süredir var olmasına rağmen, Divi'deki resimleriniz ve modülleriniz için oldukça benzersiz bazı vurgulu efektler oluşturmak için hala yararlı bulabilirsiniz. İşin püf noktası, şaşırtıcı derecede sezgisel olan Divi Transform seçeneklerinin nasıl kullanılacağını bilmektir. Bu eğitimde verilen bu örnekler, konsepti tanıtmayı ve umarım kendi kullanımınız için biraz ilham vermeyi amaçlamaktadır. Dönüştürme seçeneklerini Divi'de bulunan diğer tüm stil seçenekleriyle birleştirmenin tüm yollarını düşündüğünüzde, tonlarca fikir ortaya çıkmaya başlar.

Yorumlarda sizden haber bekliyorum.

Şerefe!