Benzersiz Tasarımlar için Divi'de Animasyonlar ve Paralaks Nasıl Birleştirilir
Yayınlanan: 2019-08-07İster yemek hazırlıyor olun ister bir web sitesi tasarlıyor olun, malzemeler tek başına lezzetli bir yemeğin veya güzel bir sitenin garantisini vermez. Tüm farkı yaratan, bu unsurları ne kadar iyi bir araya getirdiğimizdir. Bu derste size animasyon ve görüntü paralaksını daha önce hiç düşünmemiş olabileceğiniz bir şekilde nasıl birleştireceğinizi göstereceğim. Henüz bilmiyorsanız, animasyon, sayfa yüklendiğinde herhangi bir Divi öğesine eklenebilen yerleşik bir Divi özelliğidir. Paralaks ayrıca kaydırma sırasında arka plan resimlerinize benzersiz hareket eklemenizi sağlayan bir Divi seçeneğidir.
Bugün, animasyonları ve paralaksı her türlü yaratıcı yolla birleştirmek için Divi'nin yerleşik tasarım ayarlarını kullanacağız. Kombinasyon, sayfayı aşağı kaydırırken harika görünen güzel bir animasyonlu paralaks görüntüleri düzeni oluşturmak için oldukça sihirli bir şekilde birlikte çalışır.
Başlayalım!
Gizlice Bakış
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.
Ü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.
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!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler. Bu eğitim için kullanılan görüntüleri Life Coach Divi Layout Pack'te bulabilirsiniz.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Temel Fikir
Bu tasarım konseptinin arkasındaki temel fikir, arka plan görüntülerinde CSS paralaksının kullanılmasına odaklanır. CSS paralaksının çalışma şekli nedeniyle, paralaks görüntüsü sabit kalacak ve onu kullanan öğenin boyutu ne olursa olsun tarayıcı penceresini otomatik olarak dolduracaktır. Görüntünün sabit doğası, Divi'deki birden çok öğe üzerinde aynı paralaks görüntüsünü kullanmanıza ve ardından bu öğeleri animasyon kullanarak hareket ettirmenize olanak tanır. Animasyon yerleştiğinde, kullanılan paralaks arka plan görüntüleri eşleşecek ve sayfayı aşağı kaydırırken beklendiği gibi çalışacaktır.
Bölüm 1: Divi Animasyonu ve Paralaks Tasarımını Oluşturma (Sürüm 1)
İki sütunlu (1/2 1/2) satır ile yeni bir bölüm oluşturun.
Modüllerimizi eklemeden önce bölüm ve satırda birkaç ayar yapalım.
Bölüm ve Satır Ayarlarını Güncelle
İlk olarak, bölüm ayarlarını açın ve varsayılan dolguyu aşağıdaki gibi çıkarın:
Dolgu: 0 piksel üst, 0 piksel alt
Ardından satır ayarlarını açın ve satıra bir paralaks arka plan görüntüsü verin.
Arka Plan Resmi: [resmi yükle]
Paralaks Etkisini Kullan: EVET
Paralaks Yöntemi: CSS
Burada tasarımın çalışması için paralaks yönteminin CSS olarak ayarlanması gerekir.
Genişlik: %100
Maksimum Genişlik: %100
Dolgu: 10vw üst, 10vw sol, 10vw sağ
Eşleşen Paralaks Arka Planına Sahip Metin Modülünü Ekleyin
Artık metin modüllerimizi tasarıma eklemeye hazırız. İlk metin modülü bu tasarımın anahtarıdır. Metin modülüne tamamen aynı arka plan resmini ve css paralaksını uygulayarak, tamamen benzersiz bir efekt için animasyonla yaratıcı olabiliriz.
Devam edin ve 1. sütuna yeni bir metin modülü ekleyin.
Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:
Gövde İçeriği:
<p>Hi!<br>I'm Jane...</p> <a href="#">about me</a>
Ardından metin modülüne satıra eklediğiniz aynı css paralaks arka plan görüntüsünü verin.
Arka Plan Resmi: [resmi yükle]
Paralaks Etkisini Kullan: EVET
Paralaks Yöntemi: CSS
Yazı Tipi: Fira Sans
Metin Yazı Tipi Ağırlığı: Hafif
Metin Metin Rengi: #ffffff
Metin Metin Boyutu: 70px
Metin Satırı Yüksekliği: 1em
Bağlantı Yazı Tipi Stili: Altı Çizili (U)
Bağlantı Metni Rengi: #ffffff (varsayılan), #881e67 (fareyle üzerine gelin)
Bağlantı Metni Boyutu: 30px
Bağlantı Harfi Aralığı: 2px
Dolgu: %20 üst, %20 alt, %10 sol, %10 sağ
Kenar Genişliği: 20px
Kenar Rengi: #ffffff
Ardından metin modülüne aşağıdaki animasyonu ekleyin:
Animasyon Stili: Slayt
Animasyon Yönü: Sağ
Animasyon Süresi: 1500ms
Animasyon Yoğunluğu: %80
Animasyon Başlatma Opaklığı: %20
Şimdiye kadarki etkiye bakalım…
Animasyonlu metin modülünün arka plan görüntüsünün, satır arka planının eşleşen konumunda nasıl durduğuna dikkat edin. Bunun nedeni, her ikisinin de css paralaks efektiyle aynı arka plan görüntüsünü paylaşmasıdır.
Gerçek Paralaks Arka Plan Resmiyle İkinci Metin Modülünü Ekleme
Bu noktada bir sonraki metin modülümüzü eklemeye hazırız. Bu sonraki, gerçek paralaks efektini kullanan farklı bir arka plan görüntüsüne sahip olacak. Ayrıca biraz animasyon da vereceğiz.
2. sütuna yeni bir metin modülü ekleyin.
Ardından gövde içeriğini “blogum” kelimesiyle güncelleyin.
Ardından gerçek paralaks yöntemiyle bir arka plan görüntüsü ekleyin.
Arka Plan Resmi: [resmi yükle]
Paralaks Etkisini Kullan: EVET
Paralaks Yöntemi: Gerçek Paralaks
Metin Yazı Tipi: Fira Mono
Metin Yazı Tipi Stili: TT
Metin Metin Hizalama: orta
Metin Metin Rengi: #ffffff
Metin Harf Aralığı: 10px
Genişlik: 320 piksel
Maksimum Genişlik: 320 piksel
Modül Hizalaması: Merkez
Marj: (masaüstü): -5vw üst, 4vw alt
Marj (tablet ve telefon): 3vw üst
Dolgu: 70 piksel üst, 70 piksel alt
Kenar Genişliği: 20px
Kenar Rengi: #ffffff
Animasyon Stili: Slayt
Animasyon yönü: aşağı
Animasyon Gecikmesi: 200ms
Yeni Paralaks Arkaplan Resmi ile Üçüncü Metin Modülünü Oluşturma
Üçüncü metin modülünü oluşturmak için, 2. sütunda az önce oluşturduğunuz metin modülünü çoğaltın.
Ardından arka plan görüntüsünü aynı tutacağız ancak paralaks efektini CSS paralaks yöntemiyle güncelleyeceğiz.
Genişlik: 240 piksel
Maksimum Genişlik: 240 piksel
Modül Hizalama: sol
Kenar boşluğu: 0 piksel alt
Dolgu: 170 piksel üst, 170 piksel alt, 95 piksel sol, 95 piksel sağ
Özel genişlik ve sağ ve sol dolgu, daha uzun modül tasarımıyla uyumlu olan dikey metin görüntüsünü oluşturmak için kullanılır.
Ardından animasyon yönünü aşağı yerine yukarıya güncelleyin.
Animasyon Yönü: YUKARI
Son sonuç
Şimdi nihai sonucu kontrol edelim.
Bölüm 2: Animasyon ve Paralaks Tasarımını Oluşturma (sürüm 2)
Bu sonraki tasarım, modüllerin ilk animasyonundan sonra satır için paralaks arka plan görüntüsünü yükleyerek benzersiz bir animasyon ekleyecektir. Bunu yapmak için, içeriğin arkasında hareket edecek olan CSS paralaks arka plan görüntüsü için kesinlikle ayrı bir satır kullanmamız gerekecek. Ve başlangıçta bölüm arka planımızı göstereceğimiz için, içeriğimiz için satır animasyonundan önce özel bir arka plan rengi ekleyebiliriz.
İşte nasıl yapılacağı.
İlk olarak, tel kafes görünüm modunu dağıtın. Ardından, metin modüllerinizi içeren satırı çoğaltın. Şimdi iki özdeş satırınız olacak. Ardından, üst sıradaki metin modüllerini silin. Gerçekten yapmak istediğimiz tek şey, en üst sıramızın tasarımına bir adım önde başlamaktı.
Ardından, üst sıranın ayarlarını aşağıdaki gibi güncelleyin:
Yükseklik: 900 piksel (masaüstü), 2000 piksel (tablet ve telefon)
Dolgu: 0 piksel üst, 0 piksel alt
Animasyon Stili: Slayt
Animasyon Yönü: Sağ
Animasyon Süresi: 1250ms
Animasyon Gecikmesi: 1800ms
Boş satırın varsayılan olarak herhangi bir yüksekliği olmayacağından, satıra belirli bir yükseklik veriyoruz. Bu nedenle, satırın yüksekliğinin, ikinci satırınızın içeriğini içerikle kaplamak için yeterli olduğundan emin olmanız gerekir. Ayrıca, metin modülleri göründükten sonra içeriğin arkasına kayması için satıra gecikmeli bir animasyon verdik.
İki Satırı Örtüşmek
Şimdi tek yapmamız gereken, arka plan animasyonumuzla üst sıra ile örtüşmesi için negatif kenar boşluğu kullanarak alt satırı yukarı getirmek.
Alt sıra için ayarları açın ve kenar boşluğunu aşağıdaki gibi güncelleyin:
Kenar boşluğu: -900px üst (masaüstü), -2000px (tablet ve telefon)
Ardından, üst sıradaki arka plan görüntüsünü kullanacağımız için satır için css paralaks yöntemiyle arka plan görüntüsünü çıkarın.
Buraya kadar tasarım. İlk satırdaki gecikmeli arka plan animasyonuna ve sütun 1'deki metin modülünün paralaks arka planının bununla nasıl mükemmel bir şekilde eşleştiğine dikkat edin.
Bölüm Arka Plan Rengi Ekleme
Metin modüllerine satır animasyonundan önce bir başlangıç arka plan rengi vermek için bölüme bir arka plan rengi verebilirsiniz.
Bölüm ayarlarını açın ve aşağıdakileri ekleyin:
Arka Plan Gradyanı Sol Renk: rgba(136,30,103,0.61)
Arka Plan Gradyanı Sağ renk: #881e67
Gradyan Türü: Radyal
Son sonuç
Şimdi nihai sonucu kontrol edelim.
Opsiyonel Karışım Modu ve Animasyon kombosu
İkinci satıra bir karışım modu ekleyerek ve modül animasyonlarıyla birlikte çalışacak bir yakınlaştırma animasyonu ekleyerek daha da yaratıcı olabilirsiniz.
Karışım Modu: Parlaklık
Animasyon Stili: Yakınlaştır
İşte nihai sonuç.
Ve işte mobilde nasıl göründüğü.
Son düşünceler
Animasyon ve paralaks görüntülerini birleştirmenin bazı benzersiz yollarını keşfederken umarım birkaç şey öğrenmişsinizdir. Sonuçlar kesinlikle benzersizdir ve bir sonraki projenizde çarpıcı görünecek sayısız başka kombinasyon oluşturmak için bu kurulumu kolayca değiştirebileceğinizden eminim.
Yorumlarda sizden haber bekliyorum.
Şerefe!