Ken Burns Hover’ın etkisi nasıl eklenir Divi’deki görüntülere, modüllere ve çizgilere
Ken Burns etkisi bir süredir var. Etki, filmindeki görüntüleri açmak için kaydırma ve yakınlaştırma tekniklerinin bir kombinasyonunu kullandığında Amerikan belgeseli Ken Burns tarafından popüler hale getirildi. Bir web tasarımında, Ken Burns efektinin arka plan görüntülerini açmak için popüler bir tasarım tekniği olduğu kanıtlanmıştır. Ken Burns etkisi görüntüler için yüzer bir etki olarak da kullanılabilir. Tabii ki bunun daha önce kullanıldığını gördünüz. Görüntüyü açmak için web tasarımcıları, görüntülerin büyütülmesine, hareket ettirilmesine ve döndürülmesine neden olan görüntülere kayma efektleri ekler. Divi Builder’a bir dönüşüm efekti yayınlayarak, Hover Ken Burn’un imajınıza etkisini sunmak asla bu kadar kolay değildir. Bu dönüşüm seçeneği, dağılmanıza (büyütmenize), taşımanıza (veya kaydırmanıza) ve görüntüyü istediğiniz gibi döndürmenizi sağlar. Ve bu dönüşümü görüntünün yüzen durumuna uygulayabileceğiniz için, tasarımın olasılığı sınırsızdır.
Bu öğreticide, Divi Builder’ı kullanarak resme ve hatta gerçekten özgü bir Hover Ken Burn efekti oluşturmanın ne kadar kolay olduğunu göstereceğim. Başlayalım. Aşağıdaki gizlice göz atma, Divi Dönüşüm seçeneği ile kolayca yapılabilecek Hover Ken Burn efektinin bir görüntüsüdür.
Divi tarafından sağlanan varsayılan ayarları kullanarak Dönüşüm özelliğini ve geçiş özelliklerini kolayca ayarlayabilirsiniz. Bununla birlikte, bu efekt çalışmasını yapmanın anahtarı, görüntünüzü içeren bir sütuna uygulanması gereken basit bir CSS hattı (taşma: gizli) içerir. Görüntüyü dağıtacağınız, hareket ettireceğiniz ve döndüreceğiniz için, onu içeren sütunun dışına gizlenmiş görüntüyü taşmak istersiniz. Temel bir fikriniz ve işlevselliğiniz olduktan sonra, resmi Divi Dönüşüm seçeneğini kullanarak istediğiniz gibi konumlandırmanın ne kadar kolay olduğu gerçekten şaşırtıcı. Ücretsiz Ken Burns Hover Efekt örneğini indirin Ücretsiz Ken Burns Hover efekti örneği almak için, önce aşağıdaki düğmeyi kullanarak indirmelisiniz. İ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 -posta almayacaksınız. ZIP dosyasını indirdikten sonra Unzip klasörünü. Ayrıca, düzenin ithalatı. JSON, Divi Oluşturucu Taşınabilirlik özelliğini kullanır. Veya DIVI sürükleme ve bırak işlevselliğini kullanarak dosyayı Divi Builder’a sürüklersiniz. İşte burada!
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yeni bir sayfadan başlayarak yapmanız gereken ilk şey yeni bir sayfa oluşturmaktır. Ardından size sayfa başlığını verin ve ön uçta Divi Builder’ı kullanın. Ardından “Baştan Oluşturma” seçeneğini seçin. Ken Burns’ün etkisini arka arkaya bir sütunda resme ekleyerek, bu ilk temel örnek için, sütunun bir satırında Ken Burn’un bir resme nasıl geleceğinizi göstereceğim. Bu etkiyi elde etmek için ölçek seçeneğini kullanacağım, tercüme edeceğim ve dönüşüm oynayacağım.
İlk olarak, bir satır bir sütunla yeni bir parça oluşturun. Ardından görüntü modülünü satıra ekleyin.
Resim ayarlarını güncellemeye başlamadan önce, satır ayarlarını açmadan ve Gelişmiş sekmesini tıklamadan önce sütun taşmasını gizleyin. Ardından sütunun ana öğelerine aşağıdaki özel CSS ekleyin: Taşma: Gizli;
Bu, imleci yönlendirirken görüntü daha büyük bir boyuta her gözden kaçırdığında görüntünün sütun kabının dışında genişlemesini (veya taşmasını) önleyecektir. Bunu eklemezseniz, görüntü kaptan çıkar ve diğer sayfa öğelerini gizler. Teknik olarak, bu CSS’yi sütun yerine satırın ana öğesine ekleyebilirsiniz, ancak özel sıra yataklarını da ortadan kaldırmanız gerekir. Görüntünüzü ekleyin Şimdi görüntü modülüne resim ekleyebiliriz. Görüntü ayarlarını açın ve resim ekleyin. Görüntünün sütundan çok daha büyük olduğundan emin olun. Bu, imleci yönlendirirken görüntüleri daha büyük bir boyuta dağıttığınızda görüntünün bulanık görünmemesi için önemlidir. Varsayılan ayarları bir sütun satırı kullanırsanız, sütunun maksimum genişliği 1080 pikseldir. Yani, yaklaşık 1500 piksel ve 900 piksel genişliğe sahip görüntüler kullanıyorum. Önemli: Pratik bir kural olarak, resim ne kadar büyük olursa, görüntü kalitesini kaybetmeden görüntüyü taramanız, hareket ettirmeniz ve oynamanız gerekir. Dönüştürme Hover Effect ekleme Şimdi imajımızı aldıktan sonra, Ken Burns’ü havada uçma efekti oluşturmak için Dönüşüm seçeneğini kullanmanın zamanı geldi. Dönüşüm seçeneğini açmak için Tasarım sekmesine atlayın. Hover efektini etkinleştirin ve Hover sekmesini seçin. Şimdi herhangi bir dönüşüm etkisinin ayarlanması yalnızca görüntü modülünün yüzen durumu için geçerli olacaktır. Sonra Dönüşüm Ölçeği sekmesi altında, aşağıdakileri güncelleyin: x -eksen ölçeğini dönüştürün (imleci işaret et):% 136 y eksen ölçeğini dönüştürün (imleci işaret et):% 136
Ardından aşağıdaki Dönüştürme Dönüştürme sekmesini tıklayın ve güncelleme: Dönüşüm X -ekseni tercüme edin (İmleci Noktalı):% 3 Dönüşüm Y -eksenini çevirin (İmleci Noktalı):% 9 Bu,% 3’ün soluna ve 9’a kadar 9’a doğru hareket eder. %. Bu özel görüntü için, ViewPort sütununun ortasına bir ortağı büyütecek ve getirecek efektler kullanıyorum. Varsayılan olarak, çevirinin uzunluğunun değeri pikselde olacaktır (yüzde değil). Görüntüleri taşımak için piksel kullanabilirsiniz, ancak bir yüzde kullanmanın konumu daha duyarlı hale getirdiğini düşünüyorum. Ardından Dönüş Dönüştürme sekmesini tıklayın ve aşağıdakileri güncelleyin: Dönüştürme X eksenini çevirin (İmleci Bırakın): 6deg Son geçiş seçeneğini güncelleyin, geçiş süresini (Dönüştürme Hover efektini tamamlamanın ne kadar sürmesi) ve hız eğrisini (geçişin süresi boyunca hız değiştirmesine izin veren zaman ayarlama işlevi) güncellememiz gerekir. Bu örnek için, havada daha dramatik (ve klasik) olan Ken Burns etkisi için geçişin daha uzun sürmesini istiyorum. Bunu yapmak için devam eden sekmeyi açın ve geçiş seçeneğini 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 değişmemesini sağlar) Nihai sonuç şimdi sonucuna bakalım. Aşağıdaki GIF’den Choppiness tarafından yanıltılmayın. Geçiş doğrudan sitede çok düzgün. Ken Burns Hover efektini üç sütundaki birkaç görüntüye ekleyin Birkaç sütundaki görüntüye Ken Burn Hover efektini eklemek istiyorsanız, aynı işlem geçerlidir. Yapmanız gereken en önemli şey, görüntünüzü içeren her sütuna “taşma: gizli” CSS parçalarını sağlamak ve eklemektir. Yukarıdaki önceki örneği kullanarak satır sütununun yapısını üç sütun düzenine değiştirmek.
Ardından, satır ayarlarını, her sütunun taşmasını gizleyecek özel CSS görüntüleriyle güncelleyin. Sütun 1 Ana Element CSS: Taşma: Gizli; Sütun 2 Ana öğeler CSS: Taşma: gizli; Sütun 3 Ana öğeler CSS: Taşma: gizli; Ardından görüntü modülünü kopyalayın ve sütun 2 ve sütun 3’e yapıştırın.
İşte burada. Sonuçlar aşağıdadır. Bu tasarım galeri kafes düzeni için daha tipik olduğundan, yüzen animasyonu keskinleştirmek için geçiş süresini hızlandırmak isteyebilirsiniz. Bunu çok seçmeli divi özelliklerini kullanarak kolayca yapabilirsiniz. CTRL veya CMD’yi basılı tutun ve tüm görüntü modüllerini seçin. Ardından sermaye belirleme sermayesini açmak için resimlerden birinde dişli simgesi ayarını tıklayın.
Şimdi öğe ayarlarında yaptığınız her güncelleme tüm görüntülere aynı anda uygulanacaktır. Elemanları aşağıdaki gibi ayarlamada geçiş seçeneğini güncelleyin: Geçiş Süresi: 500ms Aşağıdakiler geçerli olan yeni geçiş süresidir. Ken Burns Hover Etkisi ile Ken Burns Hover efektini ekleyin Ken Burns Hover efektinin arka plan görüntüsü, görüntü modülleri dışındaki modüller için de kullanılabilir. Metin veya simgeyi modülün arka plan görüntüsü ile birlikte değiştirmek istiyorsanız bu iyi çalışır. Ken Burns efektini metin modülüne nasıl ekleyeceğiniz aşağıda açıklanmıştır. İlk olarak, bir sütun satırı ile yeni bir düzenli bölüm oluşturun. Ardından metin modülünü satıra ekleyin. Ardından modüle bir arka plan görüntüsü ekleyin. Ölçeklendirme için yer bırakacak ve yüzerken görüntüleri hareket ettirmek için yeterince büyük bir görüntü eklemeyi unutmayın. Ve ardından Başlık Tasarımı seçeneğini aşağıdaki gibi güncelleyin: Yazı Tipi Başlık: Prata Metin Boyutu Başlık: 6VW Dolgu Özel: 10VW Top, 10VW daha düşük, 3VW Sol Geçiş Süresi: 5000ms Şimdi metin modülüne aşağıdaki dönüşüm ayarlarını ekleyin. X -ekseni ölçeğini dönüştürün (nokta):% 118 dönüşüm y -ekseni ölçeği (nokta imleci):% 118 Dönüşüm X eksenini tercüme edin (imleciye işaret):% 6 dönüşüm y eksenini (nokta imleci) çevirin:% 6 Şimdi, satır ayarlarını sütunlar için aşağıdaki özel CSS ile güncelleyin. CSS Ana Eleman Sütunu: Taşma: Gizli; Şimdi sonuçlara bakın.
İmleçi yönlendirirken metin ve arka plan görüntüsünün nasıl değişeceğine dikkat edin. Ken Burns Hover’ın etkilerini ek havada uçma etkileriyle birleştirerek, modüllere uygulanan Ken Burns Hover’ın daha fazla yaratıcılık için ek etkilerle etkilerini birleştirebilirsiniz. Ken Burns Hover’ın etkilerini unutursanız filtre efektleriyle birleştirerek, filtre efektleri, özellikle imleci yönlendirirken modülünüze yaratıcı stiller eklemenin iyi bir yoludur. Ve bu filtrenin etkilerini, oldukça benzersiz olan bazı vuruş geçişleri için bir dönüşüm etkisi ile birleştirebilirsiniz. Bunu göstermek için, metin modülüne Ken Burn efektini ekleyen örneği kullanalım. Metin modülünün zaten bir dönüşüm noktası efektine sahip olduğundan, görüntüyü siyah beyazdan renge değiştirmek için ek bir filtre efekti ekleyelim. Metin modülünün ayarlarını açın ve aşağıdaki filtre seçeneklerini güncelleyin: Sataturation (Varsayılan):% 0 Satatürasyon (nokta imleç):% 100 Bu geçiş, metin modülünü varsayılan olarak% 0 satrılına ayarlayacak ve böylece rengi ortadan kaldıracak şekilde Siyah beyaz olur. Hakemde% 100’e geri dönen ayarlar, görüntünün orijinal rengine tekrar katkıda bulunacaktır. Aşağıdakiler, Filtre Etkisinin Hover Ken Burn etkisi ile birleştirildiği son etkisidir. Ken Burns Hover efektini bu örnek için sıra dönüşüm efektleriyle birleştirerek, size Hover Ken Burn efektini çizgiye eklenen ek dönüşüm etkileriyle nasıl birleştireceğinizi göstereceğim. Fikir, satırı varsayılan duruma taramak ve döndürmek için dönüşüm efekti kullanmak ve daha sonra yüzerken orijinal tasarımı geri yüklemektir. Not: Bu teknik gerçekten sadece bir modüllü bir sütun için iyi çalışacaktır. Bunun nedeni, ziyaretçilerin imleci modüle ve hatta aynı anda yönlendirmesi gerektiğidir. Bu nedenle, modülün sıralarla dolu yüksekliği ve genişliği alması gerekir. Ek modüller veya boşluklar havada zam bir duruma zarar verecek ve sorunlara neden olacaktır. Bunu yapmak için, Hover Ken Burn efektini ek filtre efektleriyle birleştiren mevcut metin modülü tasarımımızı kullanmaya devam edeceğiz. Yani bu aslında üçlü bir sarkık efekti! Metin modülünü içeren satır ayarlarını açın. Ardından aşağıdakileri güncelleyin: Dolgu özelliği: 0px üst, 0px alt, 0px sol, 0px sağ metin modülü ve satır arasında ek alan olmadığından emin olmak için. Sonra kutunun gölgesini satıra aşağıdaki gibi ekleyeceğiz: Gölge Kutusu : Bkz. Ekran yakalama mukavemeti kutusu: 36px Gölge Renk: RGBA (0.0,0,0.0.17) Şimdi aşağıdaki dönüşüm etkisini ekleyin: x ekseninin dönüşüm ölçeği (varsayılan):% 70 dönüşüm x ekseni ölçeği (nokta):% 100 dönüşüm y -eksen ölçeği (varsayılan):% 70 dönüşü y -eksen ölçeği (nokta imleç) : 100% Y -ekseninin Dönüşümü (Varsayılan): 19 derece dönüşüm Y -ekseni döndür (imleci nokta): 0deg dönüşüm dönüş ekseni z (varsayılan): 23 derece dönüşüm dönüş ekseni z (nokta imleç): 0deg Şimdi sonucuna bakalım.
İlk olarak, bir satır bir sütunla yeni bir parça oluşturun. Ardından görüntü modülünü satıra ekleyin.
Resim ayarlarını güncellemeye başlamadan önce, satır ayarlarını açmadan ve Gelişmiş sekmesini tıklamadan önce sütun taşmasını gizleyin. Ardından sütunun ana öğelerine aşağıdaki özel CSS ekleyin: Taşma: Gizli;
Bu, imleci yönlendirirken görüntü daha büyük bir boyuta her gözden kaçırdığında görüntünün sütun kabının dışında genişlemesini (veya taşmasını) önleyecektir. Bunu eklemezseniz, görüntü kaptan çıkar ve diğer sayfa öğelerini gizler. Teknik olarak, bu CSS’yi sütun yerine satırın ana öğesine ekleyebilirsiniz, ancak özel sıra yataklarını da ortadan kaldırmanız gerekir. Görüntünüzü ekleyin Şimdi görüntü modülüne resim ekleyebiliriz. Görüntü ayarlarını açın ve resim ekleyin. Görüntünün sütundan çok daha büyük olduğundan emin olun. Bu, imleci yönlendirirken görüntüleri daha büyük bir boyuta dağıttığınızda görüntünün bulanık görünmemesi için önemlidir. Varsayılan ayarları bir sütun satırı kullanırsanız, sütunun maksimum genişliği 1080 pikseldir. Yani, yaklaşık 1500 piksel ve 900 piksel genişliğe sahip görüntüler kullanıyorum. Önemli: Pratik bir kural olarak, resim ne kadar büyük olursa, görüntü kalitesini kaybetmeden görüntüyü taramanız, hareket ettirmeniz ve oynamanız gerekir. Dönüştürme Hover Effect ekleme Şimdi imajımızı aldıktan sonra, Ken Burns’ü havada uçma efekti oluşturmak için Dönüşüm seçeneğini kullanmanın zamanı geldi. Dönüşüm seçeneğini açmak için Tasarım sekmesine atlayın. Hover efektini etkinleştirin ve Hover sekmesini seçin. Şimdi herhangi bir dönüşüm etkisinin ayarlanması yalnızca görüntü modülünün yüzen durumu için geçerli olacaktır. Sonra Dönüşüm Ölçeği sekmesi altında, aşağıdakileri güncelleyin: x -eksen ölçeğini dönüştürün (imleci işaret et):% 136 y eksen ölçeğini dönüştürün (imleci işaret et):% 136
Ardından aşağıdaki Dönüştürme Dönüştürme sekmesini tıklayın ve güncelleme: Dönüşüm X -ekseni tercüme edin (İmleci Noktalı):% 3 Dönüşüm Y -eksenini çevirin (İmleci Noktalı):% 9 Bu,% 3’ün soluna ve 9’a kadar 9’a doğru hareket eder. %. Bu özel görüntü için, ViewPort sütununun ortasına bir ortağı büyütecek ve getirecek efektler kullanıyorum. Varsayılan olarak, çevirinin uzunluğunun değeri pikselde olacaktır (yüzde değil). Görüntüleri taşımak için piksel kullanabilirsiniz, ancak bir yüzde kullanmanın konumu daha duyarlı hale getirdiğini düşünüyorum. Ardından Dönüş Dönüştürme sekmesini tıklayın ve aşağıdakileri güncelleyin: Dönüştürme X eksenini çevirin (İmleci Bırakın): 6deg Son geçiş seçeneğini güncelleyin, geçiş süresini (Dönüştürme Hover efektini tamamlamanın ne kadar sürmesi) ve hız eğrisini (geçişin süresi boyunca hız değiştirmesine izin veren zaman ayarlama işlevi) güncellememiz gerekir. Bu örnek için, havada daha dramatik (ve klasik) olan Ken Burns etkisi için geçişin daha uzun sürmesini istiyorum. Bunu yapmak için devam eden sekmeyi açın ve geçiş seçeneğini 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 değişmemesini sağlar) Nihai sonuç şimdi sonucuna bakalım. Aşağıdaki GIF’den Choppiness tarafından yanıltılmayın. Geçiş doğrudan sitede çok düzgün. Ken Burns Hover efektini üç sütundaki birkaç görüntüye ekleyin Birkaç sütundaki görüntüye Ken Burn Hover efektini eklemek istiyorsanız, aynı işlem geçerlidir. Yapmanız gereken en önemli şey, görüntünüzü içeren her sütuna “taşma: gizli” CSS parçalarını sağlamak ve eklemektir. Yukarıdaki önceki örneği kullanarak satır sütununun yapısını üç sütun düzenine değiştirmek.
Ardından, satır ayarlarını, her sütunun taşmasını gizleyecek özel CSS görüntüleriyle güncelleyin. Sütun 1 Ana Element CSS: Taşma: Gizli; Sütun 2 Ana öğeler CSS: Taşma: gizli; Sütun 3 Ana öğeler CSS: Taşma: gizli; Ardından görüntü modülünü kopyalayın ve sütun 2 ve sütun 3’e yapıştırın.
İşte burada. Sonuçlar aşağıdadır. Bu tasarım galeri kafes düzeni için daha tipik olduğundan, yüzen animasyonu keskinleştirmek için geçiş süresini hızlandırmak isteyebilirsiniz. Bunu çok seçmeli divi özelliklerini kullanarak kolayca yapabilirsiniz. CTRL veya CMD’yi basılı tutun ve tüm görüntü modüllerini seçin. Ardından sermaye belirleme sermayesini açmak için resimlerden birinde dişli simgesi ayarını tıklayın.
Şimdi öğe ayarlarında yaptığınız her güncelleme tüm görüntülere aynı anda uygulanacaktır. Elemanları aşağıdaki gibi ayarlamada geçiş seçeneğini güncelleyin: Geçiş Süresi: 500ms Aşağıdakiler geçerli olan yeni geçiş süresidir. Ken Burns Hover Etkisi ile Ken Burns Hover efektini ekleyin Ken Burns Hover efektinin arka plan görüntüsü, görüntü modülleri dışındaki modüller için de kullanılabilir. Metin veya simgeyi modülün arka plan görüntüsü ile birlikte değiştirmek istiyorsanız bu iyi çalışır. Ken Burns efektini metin modülüne nasıl ekleyeceğiniz aşağıda açıklanmıştır. İlk olarak, bir sütun satırı ile yeni bir düzenli bölüm oluşturun. Ardından metin modülünü satıra ekleyin. Ardından modüle bir arka plan görüntüsü ekleyin. Ölçeklendirme için yer bırakacak ve yüzerken görüntüleri hareket ettirmek için yeterince büyük bir görüntü eklemeyi unutmayın. Ve ardından Başlık Tasarımı seçeneğini aşağıdaki gibi güncelleyin: Yazı Tipi Başlık: Prata Metin Boyutu Başlık: 6VW Dolgu Özel: 10VW Top, 10VW daha düşük, 3VW Sol Geçiş Süresi: 5000ms Şimdi metin modülüne aşağıdaki dönüşüm ayarlarını ekleyin. X -ekseni ölçeğini dönüştürün (nokta):% 118 dönüşüm y -ekseni ölçeği (nokta imleci):% 118 Dönüşüm X eksenini tercüme edin (imleciye işaret):% 6 dönüşüm y eksenini (nokta imleci) çevirin:% 6 Şimdi, satır ayarlarını sütunlar için aşağıdaki özel CSS ile güncelleyin. CSS Ana Eleman Sütunu: Taşma: Gizli; Şimdi sonuçlara bakın.
İmleçi yönlendirirken metin ve arka plan görüntüsünün nasıl değişeceğine dikkat edin. Ken Burns Hover’ın etkilerini ek havada uçma etkileriyle birleştirerek, modüllere uygulanan Ken Burns Hover’ın daha fazla yaratıcılık için ek etkilerle etkilerini birleştirebilirsiniz. Ken Burns Hover’ın etkilerini unutursanız filtre efektleriyle birleştirerek, filtre efektleri, özellikle imleci yönlendirirken modülünüze yaratıcı stiller eklemenin iyi bir yoludur. Ve bu filtrenin etkilerini, oldukça benzersiz olan bazı vuruş geçişleri için bir dönüşüm etkisi ile birleştirebilirsiniz. Bunu göstermek için, metin modülüne Ken Burn efektini ekleyen örneği kullanalım. Metin modülünün zaten bir dönüşüm noktası efektine sahip olduğundan, görüntüyü siyah beyazdan renge değiştirmek için ek bir filtre efekti ekleyelim. Metin modülünün ayarlarını açın ve aşağıdaki filtre seçeneklerini güncelleyin: Sataturation (Varsayılan):% 0 Satatürasyon (nokta imleç):% 100 Bu geçiş, metin modülünü varsayılan olarak% 0 satrılına ayarlayacak ve böylece rengi ortadan kaldıracak şekilde Siyah beyaz olur. Hakemde% 100’e geri dönen ayarlar, görüntünün orijinal rengine tekrar katkıda bulunacaktır. Aşağıdakiler, Filtre Etkisinin Hover Ken Burn etkisi ile birleştirildiği son etkisidir. Ken Burns Hover efektini bu örnek için sıra dönüşüm efektleriyle birleştirerek, size Hover Ken Burn efektini çizgiye eklenen ek dönüşüm etkileriyle nasıl birleştireceğinizi göstereceğim. Fikir, satırı varsayılan duruma taramak ve döndürmek için dönüşüm efekti kullanmak ve daha sonra yüzerken orijinal tasarımı geri yüklemektir. Not: Bu teknik gerçekten sadece bir modüllü bir sütun için iyi çalışacaktır. Bunun nedeni, ziyaretçilerin imleci modüle ve hatta aynı anda yönlendirmesi gerektiğidir. Bu nedenle, modülün sıralarla dolu yüksekliği ve genişliği alması gerekir. Ek modüller veya boşluklar havada zam bir duruma zarar verecek ve sorunlara neden olacaktır. Bunu yapmak için, Hover Ken Burn efektini ek filtre efektleriyle birleştiren mevcut metin modülü tasarımımızı kullanmaya devam edeceğiz. Yani bu aslında üçlü bir sarkık efekti! Metin modülünü içeren satır ayarlarını açın. Ardından aşağıdakileri güncelleyin: Dolgu özelliği: 0px üst, 0px alt, 0px sol, 0px sağ metin modülü ve satır arasında ek alan olmadığından emin olmak için. Sonra kutunun gölgesini satıra aşağıdaki gibi ekleyeceğiz: Gölge Kutusu : Bkz. Ekran yakalama mukavemeti kutusu: 36px Gölge Renk: RGBA (0.0,0,0.0.17) Şimdi aşağıdaki dönüşüm etkisini ekleyin: x ekseninin dönüşüm ölçeği (varsayılan):% 70 dönüşüm x ekseni ölçeği (nokta):% 100 dönüşüm y -eksen ölçeği (varsayılan):% 70 dönüşü y -eksen ölçeği (nokta imleç) : 100% Y -ekseninin Dönüşümü (Varsayılan): 19 derece dönüşüm Y -ekseni döndür (imleci nokta): 0deg dönüşüm dönüş ekseni z (varsayılan): 23 derece dönüşüm dönüş ekseni z (nokta imleç): 0deg Şimdi sonucuna bakalım.
