Pürüzsüz Animasyonlar için Kaydırma Yakalama ve Hareket Efektlerini Birleştirme

Divi'nin yerleşik kaydırma efektleriyle akıcı animasyonlar oluşturmanın bir yolunu arıyorsanız, bu gönderiye bayılacaksınız. Tek seferde kaydırabileceğiniz tam yükseklikte bölümler oluşturmak için kaydırma yakalamayı Divi'nin yerleşik hareket efektleriyle nasıl birleştireceğinizi göstereceğiz. İlk bölümü oluşturarak başlayacağız. Ardından, sayfa tasarımımız boyunca bu bölümü yeniden kullanacağız. Kaydırma yakalamayı etkinleştirmek için, sayfamızın bölümlerine, HTML'ye, üstbilgiye ve altbilgiye atayacağımız CSS kaydırma yakalama özelliklerini kullanacağız. Sayfanın 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

Pürüzsüz Animasyon Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz pürüzsüz animasyon düzenine 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. Yeni Sayfa Oluşturun ve İlk Bölümü Tasarlamaya Başlayın

Yeni Sayfa Ekle ve Visual Builder'a Geç

Yeni bir sayfa ekleyerek başlayın. Sayfanın başlığını girin, sayfayı yayınlayın ve Visual Builder'a geçin.

Bölüm Ayarları

boyutlandırma

Yeni sayfaya girdikten sonra, zaten orada olan bölümü açın ve boyutlandırma ayarlarını değiştirin.

• Min Yükseklik: 100vh

Ana Eleman

Bu bölüme iki satır CSS kodu da ekliyoruz. Bu CSS kodu satırları, bölümü kaydırma yakalaması için bir yakalama noktasına dönüştürmemize yardımcı olacaktır.

scroll-snap-align: start;
scroll-snap-stop: normal;

görünürlük

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

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

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 herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırmayı aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Bölümün varsayılan üst ve alt dolgusunu da kaldırıyoruz.

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

Konum

Ve satırı buna göre yeniden konumlandıracağız:

• Pozisyon: Mutlak
• Yer: Alt Merkez

Sütuna Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Bu satırda ihtiyacımız olan tek modül bir Metin Modülüdür. Modülün içerik kutusunu boş bıraktığınızdan emin olun.

Arka plan rengi

Ardından, arka plan rengini değiştirin.

• Arka Plan Rengi: #ffee00

Metin Ayarları

Modülün metin satırı yüksekliğini de kaldıracağız.

• Metin Satırı Yüksekliği: 1em

boyutlandırma

Ardından, boyutlandırma ayarlarına gidip genişliği değiştireceğiz.

• Genişlik: %30

aralık

Bir miktar üst dolgu ekleyerek modülü bir kareye çevireceğiz.

• Üst Dolgu: %30

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Aşağıdaki sütun yapısını kullanın:

boyutlandırma

Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: 60vw
• Maksimum Genişlik: %100

aralık

Daha sonra farklı ekran boyutlarına bazı özel üst kenar boşlukları ekleyin.

• Üst Marj: 20vh (Masaüstü), 5vw (Tablet ve Telefon)

Sütun 2 Aralığı

Ardından, sütun 2 ayarlarını açacağız ve bazı özel dolgu değerleri ekleyeceğiz.

• Üst Dolgu: 2vh (Tablet ve Telefon)
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

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

Fotoğraf yükleniyor

Modül ekleme zamanı, 1. sütuna bir Resim Modülü ekleyin ve istediğiniz bir resmi yükleyin.

boyutlandırma

Bir sonraki modülde tam genişliği zorlayacağız.

• Tam Genişliği Zorla: Evet

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

H2 İçeriği Ekle

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

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Anton
• Başlık 2 Metin Boyutu: 5vw (Masaüstü), 7vw (Tablet), 9vw (Telefon)

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

İçerik 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ı aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.8vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 1.8em

aralık

Ve boşluk ayarlarına bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 2vw
• Alt Marj: 2vw

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

Kopya Ekle

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

Düğme Ayarları

Düğmeyi buna göre şekillendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #333333
• Düğme Kenar Rengi: #333333
• Düğme Sınır Yarıçapı: 1 piksel

• Düğme Yazı Tipi: Anton
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

2. Farklı Öğelere Kaydırma Efektleri Ekleyin

1. Satırdaki Metin Modülü

Dikey Hareket

Tüm öğeler yerleştirildikten sonra, kaydırma efektlerini eklemenin zamanı geldi. İlk satırınızdaki Metin Modülünü açın ve biraz dikey hareket kullanın.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 4
• Orta Ofset: 0
• Bitiş Ofseti: -4
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

2. sıra

Sütun 1

Yatay Hareket

Ardından, ikinci sıranızın ilk sütununu açın ve biraz yatay hareket ekleyin.

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: -3
• Orta Ofset: 0 (%40'tan %60'a)
• Bitiş Ofseti: -3
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

İçeri ve Dışarı Soluk

Aynı sütuna da solma efekti uyguluyoruz.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100
• Bitiş Opaklığı: %100
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

2. sütun

Yatay Hareket

Ardından ikinci sütunun ayarlarını açıp aşağıdaki yatay hareket ayarlarını uygulayacağız:

• Yatay Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti: 3
• Orta Ofset: 0 (%40'tan %60'a)
• Bitiş Ofseti: 3
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

İçeri ve Dışarı Soluk

Bir solma içeri ve dışarı etkisi ile birlikte.

• Soldurmayı ve Yavaşlamayı Etkinleştir: Evet
• Opaklığı Başlatma: %0
• Orta Opaklık: %100
• Bitiş Opaklığı: %100
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

4. Birinci Bölümü Yeniden Kullanın

Bölümü Dört Kez Klonla

İlk bölümü ve kaydırma efektlerini tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz.

Diğer Her Bölümün Arka Plan Renklerini Değiştirin

Diğer her bölümün arka plan rengini değiştireceğiz.

• Arka Plan Rengi: #111111

5. Sayfanın HTML'sinde Kaydırarak Yapışmayı Etkinleştirmek için CSS Kodu Ekleyin

Sayfadaki Son Bölüme Kod Modülü Ekle

Şimdi, sayfamızın HTML'sinde kaydırmayı etkinleştirmek için, sayfamızın son bölümüne herhangi bir yere bir Kod Modülü ekleyeceğiz.

HTML CSS Kodu Ekle

Bu CSS kodu satırları, kaydırma yapıştırmayı sayfamızın HTML'sine uygulamamıza yardımcı olacaktır:

<style>

html {
overflow-x: hidden;
scroll-snap-type: y proximity;
}

</style>

Üstbilgi ve Altbilgiye Kaydırma Yapıştırma Başlangıcını Ekle

Aşağıdaki CSS kod satırlarını da ekleyerek üst bilgi ve alt bilgimizin de kaydırma yakalama noktaları olduğundan emin olacağız (tıpkı bölümlerimizde olduğu gibi):

header, footer {
scroll-snap-align: start;
}

Ö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, kaydırma yakalamayı Divi'nin yerleşik hareket efektleriyle birleştirerek nasıl akıcı animasyonlar oluşturabileceğinizi gösterdik. Bu, tek bir kaydırma ile kaydırma efektlerini etkinleştirmenin harika bir yoludur. Kaydırma yakalama, ziyaretçilerin web sitenizin farklı bölümlerinde zahmetsizce gezinmesine yardımcı olur. Bunu tam yükseklikte bir bölüm tasarımı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.