Divi ve GSAP Kullanarak Tasarımınızı Kaydırma Hızıyla Nasıl Dönüştürebilirsiniz?

Divi'ye ne kadar aşina olursanız, onun çok esnek bir araç olduğunu o kadar çok anlarsınız. Önce diğer tasarım uygulamalarından geçmek zorunda kalmadan doğrudan bir sayfa tasarımına dalmanıza olanak tanır. Ayrıca, kaydırma efektleri ve yapışkan seçenekler gibi bazı yerleşik özellikleriyle daha da gelişmiş deneyimler oluşturmanız için temel oluşturur. Şimdi, bunlar kendi başlarına oldukça güçlü özellikler olsalar da kendi sınırları var. Harici kitaplıklar kullanıyorsanız, kolayca aşabileceğiniz sınırlar. Örneğin bugünün öğreticisinde, Divi, GSAP ve GSAP için ScrollTrigger kullanarak tasarımınızı kaydırma hızıyla nasıl dönüştüreceğinizi göstereceğiz. Tasarımı aşağı kaydırırken, kaydırmak için kullandığınız hıza bağlı olarak belirli öğeler dönüşecek ve bu da yüksek etkileşimli bir deneyime yol açacaktır. 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.

Dikey Eğim

masaüstü

Mobil

Yatay Eğim

masaüstü

Mobil

Döndür

masaüstü

Mobil

Düzenleri ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzenlere koymak için önce aşağıdaki düğmeyi kullanarak bunları 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.

Ne Kullanıyoruz

• Böl
• GSAP
• GSAP için ScrollTrigger
• ScrollTrigger demosu

1. Yapı Elemanı Yapısı

Yeni Bölüm Ekle

Degrade Arka Plan

Bu eğiticiye, öğe yapısını yeni veya mevcut bir sayfada oluşturarak başlayacağız. Yeni bir bölüm ekleyin, bölüm ayarlarını açın ve bir degrade arka planı ekleyin.

• Renk 1: #162c2d
• Renk 2: #122223
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

aralık

Bölümün tasarım sekmesine gidin ve sonraki dolgu değerlerini değiştirin.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

taşmalar

Hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak için bölümün taşmalarını da gizleriz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel

Ana Eleman

Gelişmiş sekmesinde satırın ana öğesine aşağıdaki CSS kodu satırlarını ekleyerek satır içeriğimizi dikey olarak hizalıyoruz:

Masaüstü:

display: flex;
justify-content: center;
align-items: center;

Tablet ve Telefon:

display: block;

Sütun 1 Ayarları

Ana Eleman

Ardından, sütun 1 ayarlarını açacağız ve gelişmiş sekmesinde sütunun genişliğini farklı ekran boyutlarında değiştireceğiz.

Masaüstü:

width: 45% !important;

Tablet ve Telefon:

width: 100% !important;

Sütun 2 Ayarları

Arka plan rengi

Ardından, sütun 2 ayarlarını açacağız ve bir arka plan rengi kullanacağız.

• Arka Plan Rengi: #193738

aralık

Ardından, sütunun boşluk değerlerini değiştireceğiz.

• Üst Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 50 piksel
• Alt Dolgu:
  • Masaüstü: 200 piksel
  • tablet: 100 piksel
  • Telefon: 50 piksel
• Sol Dolgu: %5
• Sağ Dolgu: %5

Ana Eleman

Ve sütunun ana öğesine aşağıdaki CSS kod satırlarını ekleyerek sütun ayarlarını tamamlayacağız:

Masaüstü:

width: 55% !important;

Tablet ve Telefon:

width: 100% !important;

Sütun 1'e Görüntü Modülü Ekle

Görüntü Kutusunu Boş Bırak

Sütun 1'deki Görüntü Modülü ile başlayarak modül eklemeye başlama zamanı. Görüntü kutusunu boş bırakın.

Arka plan görüntüsü

Bunun yerine, bu modül için bir arka plan resmi kullanıyoruz.

boyutlandırma

Tasarım sekmesindeki boyutlandırma ayarlarını değiştireceğiz.

• Genişlik:
  • Masaüstü: %100
  • Tablet & Telefon: %90
• Modül Hizalaması: Merkez

aralık

Ardından, aralık ayarlarına aşağıdaki değerleri uygulayacağız:

• Üst boşluk:
  • Masaüstü: 100 piksel
  • Tablet ve Telefon: 0px
• Alt Kenar Boşluğu:
  • Masaüstü: 100 piksel
  • Tablet ve Telefon: 0px
• Üst Dolgu:
  • Masaüstü: 250 piksel
  • Tablet: 200 piksel
  • Telefon: 150 piksel
• Alt Dolgu:
  • Masaüstü: 250 piksel
  • Tablet: 200 piksel
  • Telefon: 150 piksel

Metin Modülü #1'i Sütun 2'ye ekleyin

H3 İçeriği Ekle

2. sütunda, ihtiyacımız olan ilk modül, bazı H3 içeriğine sahip bir Metin Modülü.

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Karla
• Başlık 3 Metin Rengi: #e0ca9a
• Başlık 3 Metin Boyutu:
  • Masaüstü: 44 piksel
  • Tablet: 30 piksel
  • Telefon: 26px

Metin Modülü #2'yi Sütun 2'ye ekleyin

Açıklama İçeriği Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve seçtiğiniz bazı açıklama içeriğini ekleyin.

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Yazı Tipi: Alata
• Metin Rengi: rgba(255,255,255,0.67)
• Yazı Boyutu:
  • Masaüstü: 17 piksel
  • tablet: 15 piksel
  • Telefon: 14 piksel
• Metin Satırı Yüksekliği: 2.2em

aralık

Ve boşluk ayarlarına biraz üst kenar boşluğu ekleyin.

• Üst Marj: %5

2. Sütun'a Düğme Modülü Ekle

Kopya Ekle

Bu sütuna ekleyeceğimiz sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı kullanın.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 20 piksel
  • Tablet ve Telefon: 18px
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Yazı Tipi: Karla
• Düğme Simgesini Göster: Evet
• Düğme Simge Yerleşimi: Sol
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır

aralık

Sonraki boşluk ayarlarına özel değerler ekleyin.

• Üst Marj: %5
• Üst Dolgu: 20px
• Alt Dolgu: 20px

Satırı İki Kez Klonla

Satırı ve tüm modülleri tamamladıktan sonra, satırı istediğiniz kadar çoğaltabilirsiniz.

Resimleri ve İçeriği Değiştir

Yinelenen satırların her birinde yinelenen içeriği değiştirdiğinizden emin olun.

2. Kaydırma Hızı Etkisi Ekleyin

Eğmek İstediğiniz Öğelere CSS Sınıfı Ekleyin

2. sütun

Artık eleman yapısını yerleştirdiğimize göre, efektin işe yaramasına odaklanabiliriz. Bunu yapmak için, her satırın 2. sütun ayarlarını ayrı ayrı açın ve bir CSS sınıfı atayın.

• CSS Sınıfı: hız dönüşümü

Sütun 1'deki Görüntü Modülü

Aynı CSS sınıfını tasarımımızdaki her Görüntü Modülüne ekliyoruz.

• CSS Sınıfı: hız dönüşümü

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak bölümün altına yeni bir satır ekleyeceğiz:

aralık

Satır ayarlarını açın ve boşluk ayarlarındaki tüm varsayılan üst ve alt dolguları kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Kod Modülü Ekle

Ardından, bu yeni satıra bir Kod Modülü ekleyin.

GSAP ve ScrollTrigger Kitaplıkları Ekleme

Herhangi bir kod eklemeden önce, komut dosyası etiketleri arasına GSAP ve ScrollTrigger kitaplıklarını ekleyeceğiz.

• 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

Komut Dosyası Etiketleri Ekle

Bu kitaplıkların hemen altına yeni komut dosyası etiketleri ekleyeceğiz.

Komut Dosyası Etiketleri Arasına Özel Kod Ekleme (Dikey Eğrilik)

Dikey çarpıklık oluşturmak için aşağıdaki JavaScript kod satırlarını ekleyin:

let proxy = { skew: 0 },
    skewSetter = gsap.quickSetter(".velocity-transform", "skewY", "deg"), 
    clamp = gsap.utils.clamp(-10, 10);

ScrollTrigger.create({
  onUpdate: (self) => {
    let skew = clamp(self.getVelocity() / -400);
    if (Math.abs(skew) > Math.abs(proxy.skew)) {
      proxy.skew = skew;
      gsap.to(proxy, {skew: 0, duration: 0.8, ease: "power0", overwrite: true, onUpdate: () => skewSetter(proxy.skew)});
    }
  }
});

gsap.set(".velocity-transform", {force3D: true});

Bunun Yerine Yatay Eğilme veya Döndürme Kullanın

Bunun yerine yatay eğriltme veya döndürme kullanmak istiyorsanız, bu yazının önizlemesinde görüldüğü gibi, koddaki “SkewY”yi yatay çarpıklık için “SkewX” veya döndürmek için “döndür” ile değiştirebilirsiniz! Bu kadar.

Ön izleme

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

Dikey Eğim

masaüstü

Mobil

Yatay Eğim

masaüstü

Mobil

Döndür

masaüstü

Mobil

Son düşünceler

Bu gönderide, size kaydırmada nasıl etkileşimli bir tasarım oluşturacağınızı gösterdik. Daha spesifik olarak, tasarımınızı kaydırma hızına bağlı olarak nasıl dönüştüreceğinizi gösterdik. Divi'nin en iyilerini, GSAP ve GSAP için ScrollTrigger olmak üzere iki harici JavaScript kitaplığıyla birleştirdik. 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.