Bugün yeni bir güncelleme hakkında bilgilendirildik Divi hangi sözde kaydırma animasyon efektleri sunar. Buna bir göz attık ve bu derste ne beklemeniz gerektiğini özetleyeceğiz.
Başlayalım.
Kaydırma efektleri nelerdir?
Kaydırma efektleri, hareketlerinize tepki veren özelleştirilebilir animasyonlardır. ziyaretçi sayfayı yukarı ve aşağı kaydırırken. Geleneksel animasyonlardan farklı olarak kaydırma efektleri, doğrudan ekranınızın kaydırma davranışıyla ilgilidir. ziyaretçi. Animasyonun hızı ve yönü, kaydırmanın hızına ve yönüne bağlıdır. ziyaretçi. Animasyon zaman çizelgesi, öğenin tarayıcı penceresindeki konumuna bağlıdır.
Kulağa karmaşık geliyor, ancak Divi, oldukça basit
Herhangi bir öğe, ölçek, döndürme, yatay ve dikey hareket, opaklık ve bulanıklık efektlerinin bir kombinasyonu kullanılarak canlandırılabilir. Her efektin büyüklüğünü animasyonun farklı noktalarında kontrol edersiniz, ardından Divi gerisini halleder ve bu öğeler görüş alanınıza girip hareket ettikçe güzel geçişler yaratır. ziyaretçi. İnce bir derinlik ve gelişmişlik katan basit animasyonlar oluşturun veya efektleri birleştirerek birden fazla öğeyi canlandırarak hayranlarınızı şaşırtacak muhteşem aktivite patlamaları yaratın. ziyaretçi!
6 yeni altı benzersiz efekt
Aralarından veya kombinasyonlardan seçim yapabileceğiniz efektler. Divi, her biri yeni kaydırma efektleri kullanıcı arayüzümüz kullanılarak ayrı ayrı özelleştirilebilen altı farklı kaydırma efektiyle birlikte gelir. Daha karmaşık animasyonlar oluşturmak için efektlerden herhangi birini de birleştirebilirsiniz.
Dikey hareket
Dikey hareket efekti, bir ziyaretçinin kaydırma hızına ve yönüne bağlı olarak herhangi bir öğenin sayfada yukarı ve aşağı hareket etmesini sağlar. Sonuç bir paralaks etkisidir! Artık Divi ile paralaks efektleri oluşturmak için her şey kullanılabilir. Hatta gerçekten etkileyici tasarımlar oluşturmak için dikey hareketi paralaks arka plan görüntüleriyle birleştirebilirsiniz.
Yatay hareket
Yatay hareket efekti, bir ziyaretçinin yönüne ve kaydırma hızına bağlı olarak öğelerin ekranda soldan sağa hareket etmesine izin vermesi dışında dikey hareket efektine benzer. . Dikey ve yatay hareketi bile birleştirerek herhangi bir öğenin hareketi üzerinde tam kontrol sahibi olmanızı sağlar!
Bağlamsal bulanıklık
Bulanıklaştırma efekti, ziyaretçinin kaydırdığı hıza ve yöne bağlı olarak öğeleri odak noktasına ve dışına çıkarır. Divi, başlangıç, orta ve bitiş bulanıklık değerlerini kontrol etmenize izin verdiği için, öğeleri ziyaretçinin gözünün önündeyken odak noktasına getirebilirsiniz. Önemli bilgilere dikkat çekmenin harika bir yolu.
erimiş
Öğelerdeki solma efekti, ziyaretçinin kaydırmasının hızına ve yönüne bağlı olarak belirir ve kaybolur. Öğeleri karıştırabilir, yok edebilir veya her ikisini birden yapabilirsiniz. Soldurma, bulanıklaştırma ve ölçekleme kombinasyonu, tasarımlarınıza fazladan bir "o" faktörü ekleyen bazı gerçekten karmaşık animasyonlar oluşturabilir.
Ölçekleme etkisi
Ölçek efekti, bir ziyaretçinin kaydırmasının hızına ve yönüne bağlı olarak herhangi bir öğenin boyutunu artırır veya azaltır. Harekete geçirme ifadesi gibi belirli bir öğeye dikkat çekmek istiyorsanız, çerçevenin merkezine yaklaştıkça öğenin boyutunu artırmak için ölçek efektini ayarlayabilirsiniz. pencere. Elbette başka birçok olasılık da var!
Dönme efekti
Döndürme efekti, ziyaretçinin kaydırma hızına ve yönüne bağlı olarak bir öğeyi her iki yönde de döndürür. İnce rotasyon sahneleri gerçekten canlandırabilir. Yatay hareketle birleştirildiğinde sadece biraz döndürmek harika görünebilir! Ya da öğelerin daireler çizmesine izin verin.
Yeni bir sezgisel arayüz
Divi'nin kaydırma efektlerinin gerçek güzelliği kullanım kolaylığıdır! Herkesin erişebilmesi için web animasyonları oluşturma sürecini basitleştiren yeni bir kullanıcı arayüzü var. Tek bir tıklama ile Divi'nin altı kaydırma efektinden birini ekleyebilir veya birleştirebilirsiniz. Kutudan çıkar çıkmaz harika görünecekler! Ardından, daha da gelişmiş animasyonlar oluşturmak için efektlerde ince ayar yapabilirsiniz.
Tek tıklama ve hepsi bu!
Bir modüle kaydırma efekti eklemek ister misiniz? Tek bir tıklama efekti ekleyecek ve harika görünecek! Kaydırma efekti eklemek için, herhangi bir modül, satır, sütun veya bölümün Gelişmiş sekmesindeki yeni Kaydırma Efektleri seçenek grubuna erişin. Birden fazla efekt aynı anda etkinleştirilebilir ve efektler, kaydırdıkça güzel bir şekilde dönüşen tek bir pürüzsüz animasyonda birleştirilir.
Tam kontrol istiyor musunuz? ona sahipsin !
Bir kaydırma efektini etkinleştirdiğinizde, animasyonun her noktasında efektin büyüklüğü üzerinde tam kontrole sahip olursunuz. Başlangıç, orta ve bitiş değerlerini kontrol ederek, ne yapar animasyon. Değerler ayarlandıktan sonra, Divi gerisini halleder ve öğenin tarayıcı penceresinde hareket ederken geçişini yaparak bir animasyon oluşturur.
- Başlangıç değeri - Öğe, tarayıcı penceresinin alt kısmına girdiğinde kullanılan başlangıç animasyonunun durumu.
- Ara değer - Öğe pencerenin ortasına hareket ettiğinde aktarılacak ara animasyon durumu.
- Bitiş değeri - Öğe, ekranın üst kısmında tarayıcı penceresinden ayrıldığında oluşan bitiş animasyonu durumu.
Örneğin, başlangıç değeri 0 (görünmez), medyan değeri 100 (tamamen görünür) ve bitiş değeri 0 (görünmez) olan bir opaklık efekti, girdiğinde görünmez bir durumdan değişecektir. pencerenin ortasında% 100 görünene kadar pencere, pencereden çıkıldığında görünmez bir durumda kaybolacaktır.
Animasyon zaman çizelgesini ayarlama
Yalnızca animasyon değerlerini ayarlamakla kalmaz, aynı zamanda animasyon zaman çizelgesini de ayarlayabilirsiniz. Zaman çizelgesi kullanıcı arayüzü, tarayıcı penceresinin yüksekliğini temsil eder. Her animasyon ana karesi, görünüm alanında farklı bir konumda tetiklenebilir. Bu, animasyonlu öğenin tarayıcı penceresinin y eksenindeki konumuna bağlı olarak animasyon animasyonunun başlangıcını, bitişini ve zamanlamasını kontrol etmenizi sağlar.
- Ana kare konumunu başlatma - Bu seçenek, animasyonun başlangıcını kontrol eder. Animasyonu geciktirmek istiyorsanız, başlangıç ana karesinin konumunu içe doğru sürükleyin.
- Merkez ana kare konumu - Bu, animasyonun merkez animasyon değerine ulaştığı noktayı kontrol eder. Tam olarak animasyon zaman çizelgesinin ortasında olmak zorunda değildir. Ortadaki ana kareyi pencerede herhangi bir konuma taşıyabilirsiniz.
- Anahtar kare konumunun sonu - Bu kontrol, animasyonu sonlandırmak için kullanılır. Klip tarayıcı penceresinden çıkmadan önce animasyonun bitmesini istiyorsanız, son ana kare konumunu içe doğru sürükleyebilirsiniz.
Herhangi bir animasyona statik durumlar ekleyin
Statik orta efekt değerinizin süresini artırarak animasyonlarınıza duraklamalar da ekleyebilirsiniz. Statik bir animasyon süresi oluşturmak için, orta anahtar karenin üzerine geldiğinizde iki oku tıklayın. Daha sonra, kenarlarını ileri geri sürükleyerek orta anahtar kareyi genişletebilirsiniz. Animasyondaki bu noktada, eleman statik kalacaktır. Statik süre sona erdikten sonra, animasyon son değerine geçmeye devam edecektir.
Bu yeni özellikler hakkında ne düşünüyorsunuz? Görüşlerinizi yorumlarda paylaşmaktan çekinmeyin.
