Elementor'da Kaydırma Üzerine Animasyon Nasıl Eklenir (Apple AirPods gibi)

Yayınlanan: 2022-07-21

Apple ve Sony'nin web sitelerinde kullandığı gibi Elementor'da kaydırma üzerine animasyon eklemenin bir yolunu mu arıyorsunuz?

Elementor Pro, Hareket Efektleri özelliği aracılığıyla her türlü düzgün animasyon efektini içerirken, Apple'ın web sitesinde gördüğünüz gibi kaydırma efektleri üzerinde gerçekten ilgi çekici bir görüntü dizisi oluşturmanıza izin vermez (ve diğer pek çok). Örneğin, AirPods Pro sayfası .

Scrollsequence eklentisi ile bu tür sinematik kaydırma animasyonlarını Elementor'a kolayca ekleyebilirsiniz ( Elementor'un ücretsiz sürümü dahil ).

Sözcüklerle açıklamak zordur, bu nedenle aşağıdaki örneğe bakın ( ziyaretçi sayfayı aşağı kaydırdıkça animasyon hareket eder ):

Genel olarak Scrollsequence hakkında daha fazla bilgi edinmek istiyorsanız, tam Scrollsequence incelememizi okuyabilirsiniz.

Ancak bu gönderide, özellikle Elementor'da Scrollsequence kullanarak kaydırmaya nasıl animasyon ekleneceğine odaklanacağız.

Hadi kazalım!

Scrollsequence ile Elementor'da Sinematik Kaydırma Animasyonları Nasıl Oluşturulur

İşte ilgili adımlara üst düzey bir bakış - ayrıntılı eğitim için okumaya devam edin:

Scrollsequence eklentisini yükleyin
Animasyonunuzu oluşturun
Kaydırma animasyonunu Elementor'a ekleyin

1. Scrollsequence Eklentisini Kurun

Başlamak için, Elementor web sitenize Scrollsequence eklentisini kurmak isteyeceksiniz.

Scrollsequence, WordPress.org'da ücretsiz bir sürüme ve daha fazla özellik ekleyen premium bir sürüme sahiptir. Ücretsiz sürüm, üç adede kadar sahne ve sahne başına maksimum 100 görüntü ile temel animasyonları ayarlamanıza olanak tanırken, premium sürüm tüm sınırları kaldırır ve ayrıca daha gelişmiş animasyonlar ve özellikler ekler.

Scrollsequence – Cinematic Scroll Image Animasyon Eklentisi

Yazar(lar): Scrollsequence

Mevcut Sürüm: 1.2.7

Son Güncelleme: 9 Mayıs 2022

kaydırma sırası.1.2.7.zip

%98 Derecelendirme 1.000+ Yükleme WP 5.0+ Gerekiyor

Ayrıca 14 günlük ücretsiz deneme ile tüm premium özellikleri ücretsiz olarak deneyebilirsiniz, böylece sadece denemek için herhangi bir ödeme yapmanız gerekmez.

Denemeden sonra premium sürümü istediğinize karar verirseniz, 69,99 dolardan başlar. Ancak, %20 tasarruf etmek için özel Scrollsequence kuponumuzu kullanabilirsiniz:

20 İNDİRİM

kaydırma sırası

WPMAYOR20 kuponuyla Scrollsequence'ta özel %20 indirim kazanın. Dakikalar içinde kaydırma animasyonunuzu oluşturun.

WPMAYOR20 kuponuyla Scrollsequence'ta özel %20 indirim kazanın. Dakikalar içinde kaydırma animasyonunuzu oluşturun. Daha az göster

2. Animasyonunuzu Oluşturun

Eklentiyi yükledikten sonra, ilk kaydırma animasyonunuzu ayarlamak için Scrollsequence → Add New Scrollsequence seçeneğine gidin.

Her animasyon bir veya daha fazla sahneden oluşur ve her sahne bir dizi halinde düzenlenmiş birden fazla görüntü içerir. Eklenti daha sonra dizideki tüm görüntülere dayalı olarak animasyonu oluşturacaktır.

Bir "sahne", eksiksiz bir animasyon dizisidir. Birden fazla sahne eklemeye karar verirseniz, kullanıcı ilk sahnenin animasyonunu tamamen kaydırdıktan sonra bir sonraki sahneye ilerleyecektir.

Çoğu durumda, dizinizdeki görüntüleri bir temel videoya dayandırmak isteyeceksiniz. Mevcut bir videoyu bir dizi ayrı görüntüye dönüştürmek için eklentinin belgelerindeki bu araçlardan birini kullanabilirsiniz. En basit seçenek tarayıcı tabanlı Ezgif dönüştürücüdür, ancak özel yazılımla daha iyi kalite elde edersiniz.

Sahneler Oluşturun ve Görüntüler Ekleyin

Üst düzey animasyonunuzu oluşturduktan sonra, ilk sahnenizi eklemek için Sahne Ekle düğmesini tıklayın.

Bu, animasyon diziniz için tüm görüntüleri yüklemenize izin veren yeni bir dizi seçeneği genişletecektir. Geliştiriciler, düzgün bir animasyon sağlamak için sahne başına en az 50-100 resim yüklemenizi önerir.

Resimleri yükledikten sonra, doğru sırada olduklarından emin olmak için sıralama seçeneğini kullanabilirsiniz. Doğru sırada değilse, animasyonunuz doğru görünmeyecektir .

Elementor'da kaydırmada animasyon oluşturmak için sahneye görüntüler ekleyin

Başka bir sahne oluşturmak istiyorsanız, Sahne 0 sekmesinin yanındaki artı simgesine tıklayarak bunu yapabilirsiniz.

Sabit İçerik ve Animasyonlar Ekleyin

Animasyon görüntülerinin üzerinde görünen sabit içeriği eklemek için içeriğin kendisi için Sabit İçerik kutusunu kullanabilirsiniz.

Ardından, animasyon kurallarını ayarlamak için Sabit İçerik Animasyonu bölümünü kullanabilirsiniz. Bunu Scrollsequence incelememizin 4. Adımında ayrıntılı olarak ele alıyoruz, ancak temel fikir aşağıdaki gibidir:

Sabit İçerik kutusundaki içeriğe CSS seçicileri eklersiniz ( Metin sekmesini kullanarak).
Bu CSS seçicilerini hedefleyerek ve ardından bu seçiciler içindeki içeriğin nasıl canlandırılacağına ilişkin zamanlamayı seçerek, Sabit İçerik Animasyonu kutusunda animasyon kurallarınızı ayarlarsınız. Örneğin, 30-55 arası resimler için belirli bir metni göstermek istediğinizi söyleyebilirsiniz.

İçeriğinize CSS seçicileri eklemenin bir örneği:

Ve sonra animasyon kurallarını ayarlamanın nasıl göründüğü:

Sabit içeriğinizi canlandırmanın yanı sıra görüntü süresini de ayarlayabilirsiniz.

Diğer Ayarları Gerektiği Gibi Yapılandırın

Sahnelerinizi, resimlerinizi ve sabit içeriğinizi ayarlamak, bir animasyon oluşturmanın en önemli parçalarıdır.

Ancak Scrollsequence, bu arayüzde keşfetmek isteyebileceğiniz başka ayarlar da sağlar.

Örneğin, sahne ayarları alanının alt kısmında görüntü ölçeğini ve hizalamasını ayarlayabilirsiniz.

Kenar çubuğunun Kaydırma Sırası Ayarları alanında da bazı genel ayarlara ulaşabilirsiniz. Bu widget'ta, görüntü genişliğini ve kaydırma gecikmesini kontrol edebilir ve istenirse özel CSS ekleyebilirsiniz.

Animasyonunuzu Yayınlayın

İşleri bitirmek için, tıpkı bir blog gönderisini yaptığınız gibi, animasyonunuzu yayınlamak için Yayınla düğmesini tıklayın.

Yayınladıktan sonra, bu animasyonun kısa kodunu Scrollsequence → Scrollsequence seçeneğine giderek bulabilirsiniz:

Bu kısa kodu elinizin altında bulundurun çünkü Elementor'da kaydırmaya animasyon eklemek için bir saniye içinde ihtiyacınız olacak.

3. Kaydırma Animasyonunuzu Elementor'a Ekleyin

Kaydırma animasyonunuzdan memnun kaldığınızda, onu Elementor tasarımınıza eklemeye hazırsınız.

Kaydırma animasyonu için özel olarak ayrı bir Elementor tasarımı oluşturabilirsiniz. Veya daha büyük bir tasarımın parçası olarak kaydırma animasyonunu da dahil edebilirsiniz. Bu durumda, kaydırma animasyonunun üstündeki ve altındaki içerik statik kalacaktır.

Başlamak için, kaydırma animasyonunuzu eklemek istediğiniz içerik parçası için Elementor düzenleyicisini başlatın.

Ardından, kaydırma animasyonunu nasıl ekleyeceğiniz aşağıda açıklanmıştır:

Kaydırma animasyonunun görünmesini istediğiniz yere Elementor'ın Kısa Kod widget'ını ekleyin.
Animasyonun kısa kodunu yapıştırın ( yine, bunu Scrollsequence → Scrollsequence seçeneğine giderek bulabilirsiniz) .
Elementor'un düzenleyicide animasyonunuzun canlı bir önizlemesini oluşturmasını sağlamak için Kısa Kod widget'ının ayarlarındaki Uygula düğmesini tıklayın.

Elementor düzenleyicisine animasyon kısa kodu ekleyin.

Elementor düzenleyicisinden ayrılmadan tam animasyonunuzu deneyimleyebilirsiniz - görsel önizlemede aşağı kaydırmanız yeterlidir!

İşte bu kadar – Elementor'da tıpkı Apple'ın birçok açılış sayfasında yaptığı gibi sinematik bir kaydırma animasyonu kurmayı öğrendiniz.

Ek animasyonlar oluşturmak veya animasyonunuza yeni sahneler eklemek istiyorsanız, yukarıdaki adımları tekrarlamanız yeterlidir.

İlk Elementor On Scroll Animasyonunuzu Bugün Oluşturun

İnsanlar, tasarımınızı oluşturma konusunda size sağladığı esneklik nedeniyle Elementor'u seviyor.

Bununla birlikte, Elementor'un tek başına yapamayacağı bir şey, Apple ve diğerlerinden gördüğünüz kaydırma animasyonlarında sinematik türlerini ayarlamaktır.

Elementor'u Scrollsequence ile eşleştirerek, bu tür animasyonları Elementor tasarımlarınıza kolayca ekleyebilirsiniz.

Denemek isterseniz iki seçeneğiniz var:

WordPress.org'da Scrollsequence'ın ücretsiz sürümünü kullanın.
Scrollsequence'ın tüm premium özelliklerine erişmek için 14 günlük ücretsiz denemeyi kullanın.

Scrollsequence'ın premium sürümünü kullanmak istediğinize karar verirseniz, siparişinizde %20 tasarruf etmek için özel Scrollsequence kuponumuzu kullanabilirsiniz.

20 İNDİRİM

kaydırma sırası

WPMAYOR20 kuponuyla Scrollsequence'ta özel %20 indirim kazanın. Dakikalar içinde kaydırma animasyonunuzu oluşturun.

WPMAYOR20 kuponuyla Scrollsequence'ta özel %20 indirim kazanın. Dakikalar içinde kaydırma animasyonunuzu oluşturun. Daha az göster

Elementor'da kaydırmaya nasıl animasyon ekleyeceğiniz hakkında hala sorularınız mı var? Yorumlar bölümünde bize bir not verin ve aklınızda ne olduğunu bize bildirin.

Elementor'da Kaydırma Üzerine Animasyon Nasıl Eklenir (Apple AirPods gibi)

Scrollsequence ile Elementor'da Sinematik Kaydırma Animasyonları Nasıl Oluşturulur

1. Scrollsequence Eklentisini Kurun

20i WordPress Barındırma

Detaylar

astra

Detaylar

Astra Doğum Günü İndirimi

Detaylar

otonom

Detaylar

Avada

Detaylar

ahır2

Detaylar

Kunduz Oluşturucu

Detaylar

mavi ana bilgisayar

Detaylar

Bluehost ile Ücretsiz Alan Adı

Detaylar

Bülten

Detaylar

Elementor Pro

Detaylar

Motor Temaları

Detaylar

Temel Eklenti

Detaylar

Pronto Hepsi Bir Arada

Detaylar

Köstebek

Detaylar

yetiştirici

Detaylar

insan varlığı

Detaylar

ikonikWP

Detaylar

ikonikWP

Detaylar

KBucket

Detaylar

dil

Detaylar

sıvı ağ

Detaylar

sıvı ağ

Detaylar

Magnifi Video Widget'ı

Detaylar

Elementor için Ana Eklentiler

Detaylar

Bülten Tutkalı

Detaylar

Bildirim X

Detaylar

OkyanusWP

Detaylar

sipariş edilebilir

Detaylar

çıkış hunisi

Detaylar

Ödeme Sayfası

Detaylar

PeepSo

Detaylar

quicq

Detaylar

kaydırma sırası

Detaylar

ShopHazır

Detaylar

Spot Işığı PRO

Detaylar

yıldız satışı

Detaylar

yıldız satışı

Detaylar

Tripetto Pro