Divi ve GSAP ile Bir Öğeyi Her Kaydırdığınızda Bir Animasyonu Yeniden Başlatma

Sayfanızdaki öğeleri canlandırmak söz konusu olduğunda, büyük olasılıkla bir öğenin animasyonunu görüntü alanına girdikten sonra etkinleştirmek isteyeceksiniz. Divi'nin yerleşik animasyon ayarlarıyla, bu öğe görüntülendiğinde ve canlandırıldığında, siz tüm sayfayı yeniden yükleyene kadar statik kalacaktır. Bazı durumlarda, animasyonunuzun her görünüm girişiyle yeniden başladığı daha tutarlı bir yaklaşım arayabilirsiniz. Bunu yapmak, ziyaretçilerin web sitenizdeki deneyimini kolaylaştırmanıza yardımcı olacaktır. Bu öğreticide, GSAP için Divi, GSAP ve ScrollTrigger kullanarak bunu tam olarak nasıl yapacağınızı göstereceğiz. Yaklaşımı aldıktan sonra, onu sayfanızdaki herhangi bir öğeye uygulayabileceksiniz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Bölüm Tasarımı Oluşturun

Yer Tutucu Bölümü Ekle

Tasarımı oluşturmaya başlamadan önce, üzerinde çalıştığımız sayfaya iki yer tutucu bölüm ekleyeceğiz. Bu şekilde, tasarım bittiğinde kaydırma deneyimini görebiliriz. Alternatif olarak, tasarımı daha önce kurduğunuz bir sayfanın içinde kullanabilirsiniz. Yeni bir normal bölüm ekleyin.

boyutlandırma

Bölümün yüksekliğini aşağıdaki gibi değiştirin:

• Yükseklik: 100vh

Yer Tutucu Bölümünü Klonla

Ardından, bölümü bir kez klonlayın.

Yer Tutucu Bölümleri Arasına Yeni Bölüm Ekle

Bu gönderinin önizlemesinde görebileceğiniz tasarımı oluşturmak için yer tutucu bölümlerin arasına yeni bir normal bölüm ekleyeceğiz.

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 2080 piksel

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

Ardından, sütuna ilk Metin Modülünü ekleyin ve istediğiniz içeriği ekleyin.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #f9f9f9
• Yazı Boyutu:
  • Masaüstü: 150 piksel
  • Tablet & Telefon: 11vw
• Metin Satır Yüksekliği: 1.1em
• Metin Hizalama: Merkez

Sütuna Metin Modülü #2 Ekle

H2 İçeriği Ekle

Bir öncekinin altına başka bir Metin Modülü ekleyin ve bazı H2 içeriği ekleyin.

H2 Metin Ayarları

H2 metnini aşağıdaki gibi biçimlendirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Boyutu:
  • Masaüstü: 80 piksel
  • Tablet & Telefon: 10vw

boyutlandırma

%100 genişlik de ekleyin.

• Genişlik: %100

Konum

Ve tüm modülü gelişmiş sekmesinde yeniden konumlandırın.

• Pozisyon: Mutlak
• Yer: Merkez

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak önceki satırın altına başka bir satır ekleyin:

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi yapın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 2080 piksel

Sütun 1 Ayarları

Ardından, sütun 1 ayarlarını açın.

Arka plan görüntüsü

Seçtiğiniz bir arka plan resmini yükleyin.

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez

aralık

Sonraki sütunun boşluk ayarlarını değiştirin.

• Üst Dolgu: 100 piksel
• Alt Dolgu:
  • Masaüstü: 400 piksel
  • Tablet ve Telefon: 200 piksel
• Sol Dolgu: %5.5
• Sağ Dolgu: %5.5

Metin Modülü #1'i Sütun 1'e ekleyin

H4 İçeriği Ekle

Ardından, 1. sütuna H4 içeriği olan bir Metin Modülü ekleyin.

H4 Metin Ayarları

H4 metnini buna göre biçimlendirin:

• Başlık 4 Yazı Tipi: Lato
• Başlık 4 Yazı Tipi Ağırlığı: Ağır
• Başlık 4 Yazı Tipi Stili: Büyük Harf
• Başlık 4 Metin Boyutu: 13px
• Başlık 4 Harf Aralığı: 2px

Metin Modülü #2'yi Sütun 1'e ekleyin

H3 İçeriği Ekle

Bazı H3 içeriğini kullanarak öncekinin altına başka bir Metin Modülü ekleyin.

H3 Metin Ayarları

H3 metin ayarlarını uygun şekilde değiştirin:

• Başlık 3 Yazı Tipi: Montserrat
• Başlık 3 Metin Boyutu: 36px
• Başlık 3 Harf Aralığı: 1px
• Başlık 3 Çizgi Yüksekliği: 1.2em

Sütun 1'e Metin Modülü #3'ü ekleyin

Açıklama İçeriği Ekle

Seçtiğiniz bazı açıklama içeriğini içeren son Metin Modülünü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Lato
• Metin Rengi: #4c4c4c
• Metin Harf Aralığı: 0,5 piksel
• Metin Satır Yüksekliği: 2em

Sütun 1'e Düğme Modülü Ekle

Kopya Ekle

Bu sütunda ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Tasarım sekmesindeki düğmenin stilini belirleyin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Lato
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

Sütun 1'i Yeniden Kullan

Sütun 2 ve 3'ü Sil

1. sütunu ve içindeki tüm modülleri tamamladığınızda, satırın kalan iki sütununu silebilirsiniz.

Klon Sütunu 1 İki Kez

Ve sütun 1'i iki kez klonlayarak yeniden kullanın.

Yinelenen Sütun Arka Plan Resimlerini Değiştir

Yinelenen her sütunun arka plan resmini değiştirdiğinizden emin olun.

Yinelenen Sütunlardaki İçeriği Değiştir

Modül içeriği ile birlikte.

Sütun 2 Ayarlarına Dönüştür Çevir'i Ekle

Ardından, sütun 2 ayarlarını açın ve tasarım sekmesine gidin. Bir kez orada, tasarımı tamamlamak için farklı ekran boyutlarına bazı dönüştürme çevirme değerleri ekleyin.

• Sol:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 0px

2. Yeniden Başlatma Animasyon Tekniğini Tasarıma Uygulayın

2. Satıra CSS Sınıfı Ekle

Artık tasarımımız yerine oturduğuna göre, yeniden başlatma animasyon tekniğine odaklanabiliriz. Bunun için aynı anda birden fazla modülü hedefleyeceğiz. İlk olarak, ikinci satırın ayarlarını açın ve aşağıdaki CSS sınıfını uygulayın:

• CSS Sınıfı: tetik-animasyon-satır

1. Satıra Kod Modülü Ekle

Bu öğreticinin önceki adımında eklediğimiz CSS sınıfı, bu satırdaki tüm modülleri bir kerede hedeflememize yardımcı olacaktır. Yeniden başlatma animasyonunu oluşturmak için bazı JQuery kodlarını, GSAP JavaScript kitaplığını ve GSAP için ScrollTrigger kitaplığını kullanıyoruz. Bu kodu eklemek için, 1. satırdaki ikinci Metin Modülünün altına yeni bir Kod Modülü ekleyeceğiz.

GSAP ve ScrollTrigger Kitaplıkları Ekleme

GSAP ve ScrollTrigger kitaplıklarını yeni komut dosyası etiketlerinin içine eklediğinizden emin olun.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Yeni Komut Dosyası Etiketleri Ekle

Ardından, kitaplık komut dosyası etiketlerinin altına yeni komut dosyası etiketleri ekleyin.

GSAP + ScrollTrigger İşlevi Ekle

Yeni komut dosyası etiketlerinin içine, aşağıdaki JQuery kod satırlarını kopyalayıp yapıştıracağız:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Bu kod, tüm satır modüllerini bir kerede hedefleyecek ve bir ziyaretçi görüntü alanına tekrar girer girmez animasyonu yeniden başlatacaktır. Bu durumda animasyon oldukça basit ve minimaldir. Ancak, GSAP ve ScrollTrigger ile istediğiniz her tür animasyonu oluşturabilirsiniz, bu nedenle kesinlikle incelemeye değer!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, öğe görünüm alanına girer girmez bir animasyonu nasıl yeniden başlatacağınızı gösterdik. Bu yaklaşım, ziyaretçilerinizin nasıl kaydırdığı önemli değil, tutarlı bir deneyim oluşturmanıza yardımcı olur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.