Divi ve GSAP ile Dikey Kaydırırken Otomatik Olarak Yatay Kaydırma

Web'de web sitelerini ne kadar çok keşfederseniz, gerçekten özelleştirilmiş bazı sayfa içi deneyimlerle o kadar çok karşılaşırsınız. Belirli gelişmiş işlevleri nasıl elde edeceğinizi merak ediyor olabilirsiniz ve yanıt genellikle şudur: bir animasyon JavaScript kitaplığı kullanarak. Günümüzde popüler bir animasyon kütüphanesi GSAP'dir. Ancak bir şey için JavaScript Kitaplığı kullanmak istemeniz, HTML ve CSS bölümünü de manuel olarak gözden geçirmeniz gerektiği anlamına gelmez. Divi, web tasarım sürecinizin daha büyük bir bölümünü devralabilir; özel işlevsellik ve animasyona odaklanmak için size daha fazla zaman bırakan bina ve tasarım. Örneğin bugünün öğreticisinde, Divi ve GSAP kullanarak dikey olarak kaydırırken yatay olarak nasıl kaydıracağınızı göstereceğiz. Bu, istediğiniz gibi özelleştirebileceğiniz gelişmiş bir animasyon efektiyle sonuçlanı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.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene 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.

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!

Yaklaşıma Genel Bakış

Ne Kullanıyoruz

• Böl
• GSAP JavaScript Kitaplığı
• GSAP için ScrollTrigger Eklentisi
• ScrollTrigger Demosu

Ne Yaratıyoruz

• Dikey olarak kaydırırken sahte yatay kaydırma
• Sabitleme efekti
• Efektin, seçtiğimiz birkaç bölümde çalışmasını sağlamak (mutlaka tüm sayfa değil)
• Tüm ekran boyutlarında zahmetsiz yatay ekran deneyimi

1. Yer Tutucu Bölümleri Ekleyin

1. Bölüm Ekle

Üzerinde çalıştığınız sayfaya bir ilk bölüm ekleyerek başlayın. Bu bölüm, etkinin yerine oturmasını izleyebilmemiz için bir yer tutucu görevi görecek.

boyutlandırma

Bölüm ayarlarını açın ve boyutlandırma ayarlarına bir yükseklik atayın.

• Yükseklik: 60vh

Klon Bölüm #1

Ardından, yer tutucu bölümünü bir kez klonlayın. Bu, yatay kaydırmanın bir parçası olmadan sayfamızın üstünde ve altında biraz boşluk oluşturmamıza yardımcı olacaktır (önizlemeye bakın).

1. Bölüm Tasarımı İnşa Et

Bölümler Arasına Yeni Bölüm Ekle

Artık iki yer tutucu bölümü yerleştirdiğimize göre, yatay kaydırmada kullanacağımız ilk bölümü oluşturmanın zamanı geldi. Bu bölümü, iki yer tutucu bölümün tam ortasına ekleyin.

boyutlandırma

Bölüm ayarlarını açın ve boyutlandırma ayarlarında bir maksimum yükseklik atayın.

• Maksimum Yükseklik: 100vh

taşmalar

Ayrıca dikey taşmayı otomatik olarak ayarlıyoruz. Bu, önceki adımdaki maksimum yükseklikle birlikte, kesit öğelerinin görüntü alanı yüksekliğini aştığı belirli ekran boyutlarında otomatik olarak bir kaydırma çubuğu oluşturmamıza yardımcı olacaktır.

• Dikey Taşma: Otomatik

Yeni 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:

Arka plan görüntüsü

Henüz modül eklemeden satır ayarlarını açın ve bir arka plan görüntüsü kullanın.

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

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik:
  • Masaüstü: %70
  • Tablet & Telefon: %80

aralık

Boşluk ayarları ile birlikte.

• Üst Dolgu:
  • Masaüstü: 30vh
  • Tablet & Telefon: 20vh
• Alt Dolgu: 0px

Sütun Ayarları

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

Arka plan rengi

Sütun için beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #ffffff

aralık

Sütunun tasarım sekmesine gidin ve bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Kenarlık da kullanın.

• Kenar Genişliği: 1px
• Kenar Rengi: #000000

Sütuna Metin Modülü #1 Ekle

H4 İçeriği Ekle

Bazı H4 içeriği içeren ilk Metin Modülü ile başlayarak modül ekleme zamanı.

H4 Metin Ayarları

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

• Başlık 4 Yazı Tipi: Kaynak Kodu Pro
• Başlık 4 Metin Rengi: #000000
• Başlık 4 Metin Boyutu:
  • Masaüstü: 1.2vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Başlık 4 Harf Aralığı: 1px

Sütuna Metin Modülü #2 Ekle

H3 İçeriği Ekle

Bir öncekinin hemen altına başka bir Metin Modülü ekleyin ve içerik kutusunda bir miktar H3 içeriği kullanın.

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: Alata
• Başlık 3 Metin Boyutu:
  • Masaüstü: 2.5vw
  • tablet: 4vw
  • Telefon: 7vw

Sütuna Metin Modülü #3 Ekle

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle sütuna son bir Metin Modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Kaynak Kodu Pro
• Yazı Boyutu:
  • Masaüstü: 0.8vw
  • Tablet: 2vw
  • Telefon: 3vw
• Metin Satırı Yüksekliği: 1.5em

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik:
  • Masaüstü: %67
  • Tablet ve Telefon: %100

aralık

Ve boşluk ayarlarına bazı duyarlı dolgu değerleri uygulayarak modül ayarlarını tamamlayın.

• Üst Dolgu:
  • Masaüstü: 3vh
  • Tablet & Telefon: 5vh
• Alt Dolgu:
  • Masaüstü: 3vh
  • Tablet & Telefon: 5vh

Sütuna Düğme Modülü Ekle

Kopya Ekle

Satır tasarımını tamamlamak için ihtiyacımız olan son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

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

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü: 0.8vw
  • Tablet: 2vw
  • Telefon: 3vw
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Kaynak Kodu Pro
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Daha sonra bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Konum

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

• Pozisyon: Mutlak
• Konum: Sol Alt Köşe
• Dikey Ofset: -5%
• Yatay Ofset: %5

2. Yeniden Kullanım Bölümü

Bölümü İki Kez Klonla

İlk bölümü tamamladığınızda, onu iki kez klonlayabilirsiniz.

Resmi Değiştir & Kopyala & Bağlantıyı Değiştir

Görüntüyü değiştirdiğinizden, kopyaladığınızdan ve yinelenen her bölümde bağlantı kurduğunuzdan emin olun.

2. İşlevsellik Ekleyin

Yatay Kaydırmada Eklemek İstediğiniz Her Bölüme CSS Sınıfı Ekleyin

Artık tüm unsurları yerine getirdiğimize göre, hepsinin işlevselliğine odaklanmaya başlayabiliriz. Sonucu gerçekleştirmenin ilk adımı, yatay kaydırmanın parçası olmak istediğiniz her bölüme özel bir CSS sınıfı atamaktır. Bu durumda, yer tutucu bölümler arasındaki üç bölüm anlamına gelir.

• CSS Sınıfı: yatay kesit

Sayfa İçinde Bir Yere Yeni Kod Modülü Ekle

Ardından, sayfaya bir Kod Modülü ekleyin. Bu istediğiniz her yerde olabilir.

Önce GSAP ve ScrollTrigger Kitaplıklarını Ekleyin

GSAP ve ScrollTrigger kitaplıklarını Kod Modülünün içine kopyalayıp yapıştırın. Bunun için aşağıdaki kaynaklarla komut dosyası etiketlerini kullanın:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"

Özel Kod için Yeni Komut Dosyası Etiketleri Ekle

Kitaplık komut dosyası etiketlerinin hemen altına bazı yeni komut dosyası etiketleri ekleyeceğiz.

JS Kodu Ekle

JQuery Kullanımına Hazırlanın

Bu komut dosyası etiketlerinin içinde JQuery'yi yükleyerek başlayacağız.

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

ScrollTrigger Eklentisini Kaydedin

Ardından, ScrollTrigger eklentisini kaydedeceğiz.

gsap.registerPlugin(ScrollTrigger);

İlgili Tüm Bölümleri Yeni Bir Div'e Kaydırın

Ayrıca aşağıdaki kod satırlarını kullanarak ilgili bölümlerin her birini yeni bir div içine yerleştiriyoruz:

var allSections = $('.horizontal-section');
allSections.wrapAll('<div class="horizontal-container"/>');  

ScrollTrigger ile Yeni GSAP Tween Oluşturun

Sahte yatay kaydırmanın çalışması için kaydırma tetikleyicili yeni bir ara kullanacağız. Bunu sağlayan kod şudur:

gsap.to(allSections, {
  xPercent: -100 * (allSections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    start: "top top",
    scrub: 1,
    snap: false,
    // base vertical scrolling on how wide the container is so it feels more natural.
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
  }
});

Özel CSS Kodu için Stil Etiketleri Ekleyin

Ardından, Kod Modülümüze bazı stil etiketleri ekleyeceğiz.

Stil Etiketleri Arasına CSS Kodu Ekle

Stil etiketleri arasına aşağıdaki CSS kodu satırlarını ekleyerek öğreticiyi ve işlevselliği tamamlayacağız:

.horizontal-container {
width: 300%;
height: 100%;
display: flex;
flex-wrap: nowrap;
max-width: none;
}

#page-container {
overflow: hidden;
}

.horizontal-section {
width: 100%;
will-change: transform;
}

Ö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, Divi ve GSAP ile web siteniz için nasıl ekstra yol kat edeceğinizi gösterdik. Daha spesifik olarak, sayfanızda gerçekten dikey olarak kaydırırken yatay olarak nasıl kaydıracağınızı gösterdik. Bu, belirli bir noktada karşılaşmış olabileceğiniz ve DIvi ile nasıl yapabileceğinizi merak ettiğiniz özel bir animasyon türüdür. 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.