Bölümlere/Satırlara Animasyon Ekleme

Bir zamanlar internette sitenize animasyon eklemek zahmetli, biraz özel bir işti. Ancak Divi, çok fazla teknik uzmanlığa ihtiyaç duymadan uygulayabileceğiniz güçlü animasyon araçlarına ve kaydırma efektlerine sahiptir. Herkes bu efektleri sitelerine minimum çabayla ekleyebilir. Bu öğreticinin süreçleri Divi içindeki herhangi bir öğeye uygulanabilirken, bunları kullanarak belirli efektler elde etmek için bugün bölümlere ve satırlara odaklanacağız. Animasyonları inceleyelim!

Ön izleme

masaüstü

Mobil

Divi Builder'ı bir Sayfaya veya Gönderiye yükleyin

Yapmanız gereken ilk şey Divi Builder'a girmek. Düzen paketlerimizden birini (bu makale için tenis kulübü düzen paketini kullanacağız) veya kendi tasarımınızı seçseniz de, tüm adımlar Bölüm ve Sıra ayarlarında gerçekleşir.

Bu tasarımla, sıralı bir yükleme efekti elde etmek için 1 bölüm ve 3 satır canlandıracağız.

Hazır Düzen Seçin

Profesyonel olarak tasarlanmış düzen paketlerimizden birini uygulamak için Divi Builder'a girin ve Hazır Düzen Kullan öğesini seçin. Bu, sunduğumuz tüm bedavaların listesini getirecektir.

Bir Düzen Seçin

Ardından, kullanmak istediğiniz düzen paketini seçmeniz yeterlidir. Sizin için oluşturduklarımızı görmek için kategoriye göre sıralayabilir veya anahtar kelimeleri arayabilirsiniz.

Canlandırılacak Bölümleri ve Satırları Bulun

Düzen tüm varlıkları içe aktardığında ve sayfa yüklendiğinde, animasyon eklemek istediğiniz bölümü ve satırları bulmak isteyeceksiniz. Divi Builder'da Bölümlerin Mavi renk kodlu olduğunu ve Satırların Yeşil olduğunu unutmayın .

Bu haritayı çıkardıktan sonra, bu animasyonları eklemeye başlayalım!

Bölümlere ve Satırlara Animasyon Nasıl Eklenir – Seçenek 1

Divi bölümüne animasyon eklemek çok basittir. Önce Bölüm ayarlarına girmeniz gerekir. Ardından Tasarım sekmesine gidin ve Animasyon seçeneklerini görene kadar kaydırın.

Animasyon seçenekleri altında, seçtiğiniz animasyon için 8'e kadar farklı seçenek ayarlayacaksınız.

1. Animasyon Stilleri , animasyonun nasıl görüneceğini seçtiğiniz yerdir. Bölüm uçtan uca yuvarlanacaksa veya sayfanın kenarından bir top gibi sekecekse. En yaygın olanları Soldur ve Kaydır .
2. Yön – Elemanın hareket ettiği yönü ayarlarsınız. Yukarı değeri, bölümün alttan başlayıp yukarı doğru hareket edeceği anlamına gelir. Yukarı çıkış noktası değildir.
3. Süre – Animasyonun baştan sona ne kadar sürdüğü. Daha düşük bir değer onu hızlandıracak ve daha yüksek bir değer yavaşlatacaktır.
4. Gecikme – Bu seçenek, animasyonun mümkün olan en kısa sürede tetiklenmesini önler ve hemen tetiklenmesinden daha fazla dikkat çekmeye yardımcı olabilir.
5. Yoğunluk – Değer ne kadar düşükse, animasyondan o kadar yumuşak, yüksek değerler ise daha hızlı ve daha agresiftir.
6. Opaklığın Başlatılması – 0 değeri, animasyonun görünmez başlamasına ve süre boyunca odaklanmasına neden olur. 100, öğenin animasyon başlamadan önce bile tamamen görünür olduğu anlamına gelir.
7. Hız Eğrisi – Bu, animasyonun ne kadar düzgün başladığını ve bittiğini ayarlamanıza olanak tanır.
8. Tekrarla - Animasyonunuz bir kerelik bir efekt mi yoksa tekrar tekrar döngüye almak istediğiniz bir şey mi? Bir animasyon Bir Kez olarak ayarlanmışsa, yeniden başlatmak için sayfanın yeniden yüklenmesi gerekir.

Bölümlere ve Satırlara Animasyon Nasıl Eklenir – Seçenek 2

Divi ayrıca Scroll Effects adlı bir özelliğe sahiptir. Bunlar, kullanıcı görünüm penceresini öğeye kaydırdığında tetiklenen animasyonlardır. Kaydırma efektleri herhangi bir öğeye ayarlanabilir ve yukarıda bahsettiğimiz Animasyon seçenekleriyle birleştirilebilir.

Kaydırma Efektleri Nasıl Etkinleştirilir

Yine, Divi'deki herhangi bir öğe, Kaydırma Efektlerini etkinleştirecek şekilde ayarlanabilir, ancak bugün bölümler ve satırlarla uğraşıyoruz. Bu yüzden Bölüm ayarlarınızı girin, Gelişmiş sekmesine gidin ve Kaydırma Efektleri başlığını bulun.

Efektleri ve Tetikleyicileri Seçin

Kaydırma Efektleri seçeneklerinde, kaydırma sırasında tetikleyebileceğiniz farklı türde animasyonlar için çeşitli sekmeler bulacaksınız.

• Yapışkan Konum – Bölümün veya satırın, kullanıcı ekranı kaydırırken ekranına yapışıp yapışmadığı.
• Dönüştürme Efektleri – Bunlar gerçek animasyon efektleridir: yatay ve dikey hareket, solma/uzaklaşma, boyut ölçeklendirme, döndürme ve bulanıklaştırma.
• [Özelliği] Ayarla – Efektin ekranda en çok nerede görüneceğini ve ne zaman/nerede oluşacağını ayarlayabileceksiniz.
• Hareket Efekti Tetikleyicisi – Animasyonun, öğenin üst kısmı görüntü alanına, öğenin merkezine veya altına girdiğinde başlayıp başlamayacağını belirleyeceksiniz.

Bir önceki bölümdeki Animasyon seçeneklerini kullanmakla bunlar arasındaki temel fark, animasyonun otomatikleştirilmesini mi yoksa kullanıcı her eylem gerçekleştirdiğinde tetiklenmesini mi istediğinizdir. Ana öğreticinin efekti için kullanacağımız Kaydırma Efektleri ve Animasyon seçeneklerini kullanarak animasyonları birleştirebilirsiniz.

Bölümler ve Satırlar için Animasyonları Birleştirme

Farklı zamanlarda tetiklenecek çeşitli animasyonları birleştirerek siteleriniz için çarpıcı efektler oluşturabilirsiniz. Animasyon Gecikmesi seçeneğini kullanarak siteniz, etkileyici görseller elde etmek için bir dizi bölümü, satırı ve öğeyi sırayla canlandırabilir.

Başlangıç ​​olarak, Bölüm ayarlarındaki Animasyon Stilini , Animasyon Yönü Yukarı olarak ayarlıyken Kaydır olarak ayarlayacağız.

Seçeneklerin geri kalanını varsayılanlarında tutacağız. Özellikle Animasyon Gecikmesi . Bölüm'ün görüntülendiğinde tetiklenmesini istiyoruz.

Satır 1 için Animasyon Ayarları

Ardından, bölümdeki ilk satırı ayarlayacağız. Satır ayarlarına giriyoruz, Tasarım sekmesi altındaki Animasyon seçeneklerine gidiyoruz ve tekrar Slayt'ı seçiyoruz. Bu sefer Yönü Aşağı ve Animasyon Gecikmesini 5 00ms olarak değiştirmek istiyoruz. 1000ms 1 saniyeye eşittir, unutmayın.

Hemen tetiklemek için Bölüm zamanlamasını 0ms'de bıraktığımızdan, satırın biraz kaymasını ve ilk animasyonun çoğunlukla bu başlamadan önce bitmesini sağlamak istiyoruz.

2. Sıra için Animasyon Ayarları

Ardından, sayfanın ikinci Satırı için ayarlara gideceğiz ve Animasyon seçeneklerine gideceğiz. Yine Animasyon Stili için Slide seçeceğiz ve bu satır Sağa doğru kayacak.

Ek olarak, Animasyon Gecikmesini 1000ms olarak ayarlayacağız, yani bu, ilk animasyon biter bitmez tetiklenecek.

Satır 3 için Animasyon Ayarları

Animasyon yaptığımız üçüncü satır için hedeflerimize ulaşmak için Scroll Effects kullanacağız. Üçüncü sıramız ekranın hemen üstünde başladığından, diğer öğelerde yaptığımız gibi bir zaman gecikmesi kullansaydık çoğu animasyon görünmez olurdu. Bu yüzden durum böyle olmayacak şekilde yapacağız.

Animasyon Seçenekleri

Öncelikle yukarıdaki işlemleri tekrarlayacağız. Sadece bu satır ile Animasyon Stilini Fade olarak ayarlıyoruz. Ardından, bu satırın animasyonu sırasında daha hızlı görünmesi için Süreyi 500 ms'ye ayarlayacağız. Bu başlamadan önce diğer animasyonların tamamen tamamlanmasını sağlamak için 1500ms geciktireceğiz .

Son olarak, Başlangıç ​​Opaklığının %0 olarak ayarlandığından emin olun. Bu satırın görünmeye hazır olana kadar görünmez olmasını istiyoruz.

Kaydırma Efektleri Ayarları

Efektleri birleştirdiğimiz için işlerin eğlenceli hale geldiği yer burasıdır. Satır için Gelişmiş sekmesine tıklayın ve Kaydırma Efektlerini bulun. Yatay Hareket sekmesini bulun ve açtığınızdan emin olun. Ardından Hareket Efekti Tetikleyicisini Öğenin Ortasına ayarlayın . Kullanıcı ekranının satırın üstünü göstermesi durumunda, kullanıcı kaydırma yapana kadar efektin etkili olmaya başlamamasını sağlamak için üst yerine ortayı kullanıyoruz.

Bu setle, satır, diğer her şeyin görünmesi için animasyon bitene kadar bekleyecek ve ardından kullanıcı ona doğru kaydırdığında, tüm satır ekranın kenarından kayıyor gibi görünecektir.

Nihai sonuçlar

Bunların hepsini bitirdiğinizde, sonuçlarınız buna benzer olmalıdır.

masaüstü

Mobil

Çözüm

Animasyon efektleri eklemek, sitenizi daha dinamik, daha ilginç ve görsel olarak daha çekici hale getirmenin kesin bir yoludur. Divi'nin yerleşik animasyon ve kaydırma efektleri araçlarını kullanarak, uğrayan herhangi bir ziyaretçiyi şaşırtacak harika kombinasyonlar oluşturabilirsiniz.

Bölümlerinizden ve satırlarınızdan oluşturmak için Divi animasyon efektlerini ne kullandınız? Onları yorumlarda görelim!

Makale özellikli görsel Vectorchok / Shutterstock.com