Divi'nin yerleşik kaydırma efektleriyle pürüzsüz animasyonlar oluşturmanın bir yolunu arıyorsanız, bu öğreticiye bayılacaksınız. Tek seferde kaydırabileceğiniz tam yükseklikte bölümler oluşturmak için kaydırma çıtçıtını Divi'nin yerleşik hareket efektleriyle nasıl birleştireceğinizi göstereceğiz.
İlk bölümü oluşturarak başlayacağız. Bu nedenle, sayfamızın tasarımı boyunca bu bölümü yeniden kullanacağız. Kaydırarak yapıştırmayı etkinleştirmek için, sayfamızın bölümlerine, HTML'ye, üstbilgisine ve altbilgisine atayacağımız CSS kaydırma yapışma özelliklerini kullanacağız.
Olası Sonuç
Eğiticiye geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca göz atalım.
1. Yeni bir sayfa oluşturun ve ilk bölümü tasarlamaya başlayın
Yeni bir sayfa ekleyin ve Visual Builder'a geçin
Yeni bir sayfa ekleyerek başlayın. Sayfa 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
Ayrıca bölüme iki satır CSS kodu ekliyoruz. Bu CSS kodu satırları, bölümü kaydırma kenetlemesi için bir sabitleme noktasına dönüştürmemize yardımcı olacaktır.
scroll-snap-align: başlat; scroll-snap-stop: normal;
görünürlük
Bölüm kapsayıcısının ötesinde hiçbir şey olmadığından emin olmak için bölüm taşmalarını gizleyeceğiz.
- Yatay taşma: gizli
- Dikey taşma: gizli
1 numaralı satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır eklemeye 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ği 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 dolgularını da kaldırıyoruz.
- Üst Dolgu: 0 piksel
- Alt Dolgu: 0 piksel
Pozisyon
Ve satırı buna göre yeniden konumlandıracağız:
- Pozisyon: Mutlak
- Konum: Alt Merkez
Sütuna Metin Modülü Ekle
İçerik Kutusunu Boş Bırakın
Bu satırda ihtiyacımız olan tek modül 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 gideceğiz ve genişliği değiştireceğiz.
- Genişlik:% 30
aralık
Üst dolgu da ekleyerek modülü kareye çevireceğiz.
- Üst Dolgu: 30%
Satır # 2'yi ekle
Sütun Yapısı
Sonraki satırda. Aşağıdaki sütun yapısını kullanın:
boyutlandırma
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve tasarım sekmesindeki boyutlandırma ayarlarını değiştirin:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik: 60vw
- Maksimum genişlik:% 100
aralık
Ardından farklı ekran boyutlarında özel bir üst kenar boşluğu ekleyin.
- Üst kenar boşluğu: 20vh (masaüstü), 5vw (tablet ve telefon)
Sütun 2 Aralığı
Ardından ayarları sütun 2'de açacağız ve özel dolgu değerleri ekleyeceğiz.
- Üst dolgu: 2vh (tablet ve telefon)
- Sol dolgu: 2vw
- Sağ dolgu: 2vw
1. sütuna bir görüntü modülü ekleyin
Fotoğraf yükleniyor
Mod ekleme, 1. sütuna bir resim modu ekleme ve seçtiğiniz bir resmi yükleme zamanı.
boyutlandırma
Daha sonra modül üzerindeki tüm genişliği zorlayacağız.
- Tam genişliği zorla: Evet
1 metin modülünü 2 sütununa ekle
H2 içeriği ekle
İkinci sütunda ihtiyacımız olan ilk modül bir metin modülüdür. içindekiler H2.
H2 metin ayarları
Modül tasarımı sekmesine gidin ve H2 metin ayarlarını aşağıdaki şekilde değiştirin:
- Başlık 2 Yazı Tipi: Anton
- Öğe 2 Metin boyutu: 5vw (masaüstü), 7vw (tablet), 9vw (telefon)
2 metin modülünü 2 sütununa ekle
İçerik ekle
Bir öncekinin hemen altına başka bir metin modülü ekleyin ve içindekiler seçtiğiniz açıklamanın.
Metin ayarları
Modülün metin ayarlarını aşağıdaki gibi değiştirin:
- Metin Yazı Tipi: Açık Sans
- Metin boyutu: 0.8vw (masaüstü), 2vw (tablet), 2.5vw (telefon)
- Metin satır yüksekliği: 1,8 em
aralık
Ve aralık ayarlarına özel üst ve alt kenar boşluğu ekleyin.
- Üst kenar boşluğu: 2vw
- Alt kenar boşluğu: 2vw
2 sütununa bir düğme modülü ekleyin
Bir kopya ekle
Bu sütunda ihtiyacımız olan bir sonraki ve son modül bir düğme modülüdür. Seçtiğinizin bir kopyasını ekleyin.
Düğme ayarları
Düğmeyi buna göre şekillendirin:
- Düğme için özel stiller kullan: Evet
- Düğme metni boyutu: 1vw (masaüstü), 2vw (tablet), 3vw (telefon)
- Düğme Metin Rengi: # 333333
- Düğme Kenarlığı Rengi: # 333333
- Düğme yarıçapı: 1 piksel
- Düğme Yazı: Anton
- Düğme Yazı Tipi Stili: Büyük harf
aralık
Ve ekran boyutlarına göre özel bir değer ekleyerek modül ayarlarını tamamlayın.
- Yüksek Dahili Kenar Boşluğu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Düşük Dahili Kenar Boşluğu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
- Sol Dahili Kenar Boşluğu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
- Doğru İnternet Marjı: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
2. Farklı öğelere kaydırma efektleri ekleyin
Satır # 1'deki metin modülü
Dikey Animasyon
Tüm öğeler yerleştirildikten sonra, kaydırma efektlerini ekleme zamanı gelmiştir. İlk satırınızdaki Metin Modülünü açın ve dikey bir hareket kullanın.
- Dikey Hareketi Etkinleştir: Evet
- Başlangıç Dengesi: 4
- Orta Ofset: 0
- Bitiş Ofseti: -4
- Hareket Efekti Tetikleyici: Elemanın Ortası
Hat 2
Sütun 1
Yatay Animasyon
Ardından ikinci sıranızın ilk sütununu açın ve yatay bir hareket ekleyin.
- Yatay hareketi etkinleştir: Evet
- Başlangıç ofseti: -3
- Ortalama ofset: 0 (% 40 ila% 60)
- Bitiş ofseti: -3
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
İçeri ve dışarı solmaya
Ayrıca aynı sütuna bir fade in ve fade out efekti uyguluyoruz.
- Solmaya giriş ve çıkışı etkinleştir: Evet
- Başlangıç opaklığı:% 0
- Ortalama opaklık:% 100
- Uç saydamlığı:% 100
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
Sütun 2
Yatay hareket
Sonra ikinci sütunun parametrelerini açacağız ve aşağıdaki yatay hareket parametrelerini uygulayacağız:
- Yatay hareketi etkinleştir: Evet
- Başlangıç ofseti: 3
- Ortalama ofset: 0 (% 40 ila% 60)
- Bitiş ofseti: 3
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
İçeri ve dışarı solmaya
Gelen ve giden solma etkisi ile.
- Solmaya giriş ve çıkışı etkinleştir: Evet
- Başlangıç opaklığı:% 0
- Ortalama opaklık:% 100
- Uç saydamlığı:% 100
- Hareket Efekti Tetikleyicisi: Elemanın Ortası
4. İlk bölümü tekrar kullanın
Bölümü dört kez klonlayın
İlk bölümü ve kaydırma efektlerini tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz.
Diğer tüm bölümlerin arka plan renklerini değiştirin
Diğer tüm bölümlerin arka plan rengini değiştireceğiz.
- Arka Plan Rengi: # 111111
5. Sayfa HTML'sinde kaydırma yakalamayı etkinleştirmek için CSS kodu ekleyin
Sayfanın son bölümüne bir kod modülü ekleyin
Şimdi sayfamızın HTML'sinde kayan yakalamayı etkinleştirmek için, sayfamızın son bölümünde herhangi bir yere bir kod modülü ekleyeceğiz.
HTML CSS kodu ekle
Bu CSS kodu satırları, kaydırma hizalamasını sayfamızın HTML koduna uygulamamıza yardımcı olacaktır:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Başlığa ve Altbilgiye Kaydırma Yapışmasını Ekle
Aşağıdaki CSS kodu satırlarını da ekleyerek üstbilgimizin ve altbilgimizin de kaydırma bölümleri olduğundan (bölümlerimiz gibi) emin olacağız:
üstbilgi, altbilgi {scroll-snap-align: start;}
Finish
Bu makalede, kaydırmalı snap ile Divi'nin yerleşik hareket efektlerini birleştirerek nasıl pürüzsüz animasyonlar oluşturacağınızı gösterdik. Bu, kaydırma efektlerini tek bir kaydırma ile etkinleştirmenin harika bir yoludur.
Kaydırarak yakalama yardımcı olur ziyaretçi cihazınızın farklı bölümlerine zahmetsizce göz atmak için Site Web. Tam boy kesit tasarımı ile birleştirdik. Ayrıca JSON dosyasını ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
