Ana İçeriğe Geç

Divi'deki yeni kayan animasyon efektlerini keşfedin

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Bugün, kayan animasyon efektleri denen şeyi sunan Divi ile ilgili yeni bir güncellemeden haberdar olduk. Buna bir göz attık ve bu eğitimde ne bekleyeceğimizi özetleyeceğiz.

Başlayalım.

Kaydırma efektleri nelerdir?

Kaydırma efektleri, ziyaretçilerinize sayfanın yukarıdan aşağıya doğru kaydırdıklarında tepki veren özelleştirilebilir animasyonlardır. Geleneksel animasyonların aksine, kaydırma efektleri doğrudan ziyaretçinizin kaydırma davranışıyla ilgilidir. Animasyonun hızı ve yönü, ziyaretçinin kaydırmasının hızına ve yönüne bağlıdır. Animasyon zaman çizelgesi, klibin tarayıcı penceresindeki konumuna bağlıdır.

Karmaşık görünüyor, ancak Divi ile oldukça basitleştirildi

Ölçek, döndürme, yatay ve dikey hareket, opaklık ve bulanıklık efektlerinin bir kombinasyonu kullanılarak herhangi bir öğe canlandırılabilir. Her efektin büyüklüğünü animasyonun farklı noktalarında kontrol ediyorsunuz, ardından Divi gerisini hallediyor ve bu öğeler gelip ziyaretçinizin görüş alanı etrafında hareket ederken güzel geçişler yaratıyor. İnce derinlik ve incelik katan basit animasyonlar oluşturun veya efektleri birleştirin ve ziyaretçilerinizi şaşırtacak muhteşem aktivite patlamaları oluşturmak için birden fazla öğeyi canlandırın!

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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.

Divi görüntü ayarları

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!

Divi animasyon efektleri

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.

Divi bağlamsal bulanıklık ayarı

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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Divi fade etkisi

Ö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!

Ölçekleme etkisi

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.

Görüntü ayarlamaları divi döndürme efekti

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, pencerede farklı bir konumda tetiklenebilir. Bu, animasyon animasyonunun başlangıcını, bitişini ve zamanlamasını, animasyonlu klibin tarayıcı penceresinin y eksenindeki konumuna göre kontrol etmenize olanak tanır.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • 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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
5 hisseleri
hisse5
cıvıltı
Enregistrer