Divi ile gecikmelerde örtüşen bir animasyon nasıl yapılır
Web sitenizin başarısının çoğu, ziyaretçilerin görünüp görünmeyeceğine bağlıdır. Sadece ürününüz veya hizmetinizle değil, aynı zamanda iletişim biçiminiz ve web sitenizin ne kadar iyi tasarımı ile. Çünkü dürüst olmak gerekirse, web siteleri genellikle ilk izlenimdir. Ve diğer ilk izlenim türlerine benzer şekilde, iyi bir izlenim bırakmak istiyorsunuz. Şimdi, içeriğinizin bir kısmını vurgulamak için benzersiz bir yol arıyorsanız, aradığınız şey düzgün bir örtüşen animasyon yapmak olabilir. Bu pürüzsüz örtüşen animasyon, ziyaretçileriniz için bir slayt gösterisi gibidir. Kaydırma yapmaları veya hiçbir şey tıklamaları gerekmez, içerik yalnızca zarif bir şekilde görünür.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
İhtiyacımız olan tüm tasarım öğelerini örtüşmeden dikey sırayla ekleyerek başlayacağız.
Tüm tasarım öğelerini eklediğimizde, belirli animasyon gecikmeleri ile özel animasyonlar da ekleyeceğiz
Bu animasyonun ertelenmesi, ancak örtüşmeye odaklanan öğreticinin son bölümünü bitirdikten sonra mantıklı olacaktır.
Bu öğreticinin önemli kısmı, gecikmede ‘kaybolmak’ satır içeriğini yapmak için bölümle aynı arka plan rengine sahip şekilli bölücü modülünü kullanmaktır.
Bu tekniği, yaklaşımı başarılı kılmak için gereken çeşitli adımları anladıktan sonra üzerinde çalıştığınız her türlü tasarıma uygulayabilirsiniz.
Yaratmaya başlayalım! Yeni bir sayfa oluşturarak veya mevcut olanı açarak ve normal parçayı ekleyerek arka plan renginin yeni bir bölümünü ekleyin. Ayarları açın ve arka plan ekleyin. Arka plan rengi: #f3f3ec
Aşağıdaki sütun yapısını kullanarak bölümünüze yeni satırlar ekleyerek 1 numaralı Sütun Yapısı Ekle: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bunu yapmamızın nedeni, tüm varsayılan piksel mesafelerini ortadan kaldırmaktı. Bir sonraki adımda, bunun yerine ViewPort birimini kullanarak ihtiyacımız olan tüm alanı ekleyeceğiz. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Metin modülünü sütuna ekle H2 içeriği ekleyin, modül eklemeye başlayalım! İhtiyacımız olan ilk modül, bazı H2 içeriğine sahip metin modülüdür. Bu modülün birkaç saniye sonra ‘kaybolacağını’ unutmayın, böylece kısa, alakalı ve hatırlanması kolay yapmak istersiniz. H2 Metin Ayarları Ardından, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Poppins
Başlık 2 Renk Metni: #333333
Başlık 2 Metin Boyutu: 5VW
İstediğiniz alan için mesafe, mesafe ayarında birkaç sol ve sağ yatak kullanır. Sol dolgu: 15vw
Doğru dolgu: 39VW
Bölücü modülünü bir sonraki modüle, bölücü modülüne daha fazla görünürlük sütununa ekleyin. Bu modülü ‘kaybolmak’ metin modülü yapmak için kullanıyoruz. Bunun için ihtiyacımız olan dört şey var; Arka plan rengi (parçayla aynı renge sahiptir, böylece göremiyorsunuz), sadece dolgu (önceki modüldeki tüm içeriğin üstesinden gelebildiğinizden emin olmak için), dikey örtüşme (tüm alan modülünü kapsamak için) ve erteleme animasyon (ilk modülü devralmadan önce parlamak için zaman vermek için). Bölme modülünü ekledikten sonra, ‘bölücüyü görüntüle’yi devre dışı bıraktığınızdan emin olun. Bölücüyü görüntüleyin: Arka plan rengi daha sonra, arka plan ayarını açın ve arka plan rengini ekleyin. Düzgün bir etki yaratmak için bu bölüm için yaptığınız arka plan rengini kullandığınızdan emin olun.
Arka plan rengi: #f3f3ec Mesafe ayarına birkaç üst ve alt ped ekleyerek daha büyük bir boyut bölücü modülü vererek daha fazla mesafe.
Üst Dolgu: 9VW Dolgu Alt: 9VW
Gecikmeli animasyon ekleyerek animasyon ve bölücü ayarlarını tamamlayın.
Animasyon Stili: Slayt Animasyonlu yön: üst
Animasyon Süresi: 1200ms
Animasyon gecikmesi: 1500ms
Animasyon yoğunluğu:% 50
Opaklık Başlangıç Animasyonu:% 50
İkinci sıraya satırlar #2 sütun yapısı ekleyin! Aşağıdaki sütun yapısını seçin:
Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe O zaman, boşluk ayarlarında satırın sol ve sağ taraflarına biraz dolgu ekleyin. Sol dolgu: 10VW (masaüstü), 2VW (tablet ve cep telefonu)
Sağ dolgu: 10VW (masaüstü), 2VW (tablet ve cep telefonu) Bize gösterilen ayrıca, satırın ana öğesine bir CSS kod satırı ekleyerek sütunun daha küçük bir ekran boyutunun yanında görünmesini sağlar.
Ekran: Flex;
Blurb modülünü sütun 1’e ekleyin. Blurb modülünü sütun 1’e ekleyin ve istediğiniz içerikten bazılarını girin. İstediğiniz simgeyi seçerek simgeyi seçin.
Simgeyi ayarlayın Bir sonraki simge ekranınızı değiştirin. Renk simgesi: #dbd6bd Çember simgesi: evet Daire simgesi: #ffffff
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgeleri: 2.5vw (masaüstü), 1.7vw (tablet), 1.9vw (telefon)
Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Yazı tipi başlığı: Sumber Serif Pro
Hizalama Metin Başlığı: Orta Boyut Metin Başlığı: 1.7VW (masaüstü), 2.1vw (tablet), 2.5vw (telefon)
Hat yüksekliği başlığı: 1.9em
Gövde metni ayarları içerik metin ayarlarına denk gelir.
Gövde yazı tipi: açık sans
Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.8VW (masaüstü), 1.2vw (tablet), 1.6vw (telefon)
Vücut Hattı Yüksekliği: 2.5EM
Yapıştırıcımız, bu modül ile ikinci ve üçüncü sütunlara ekleyeceğimiz modül arasında yeterli boşluk olduğundan emin olmak için modülün boyutunu hafifçe küçültür.
Genişlik:% 91.7
Modül hizalaması: merkez
Üst Dolgu: 2VW
Dolgu Alt: 2VW Sol dolgu: 1VW
Doğru dolgu: 1VW
Daha sonra sınır, sınır ayarını açın ve modülü belirlemek için pürüzsüz bir sınır ekleyin.
Sınır Genişliği: 1px Sınır Rengi: #333333
Animasyon Gecikmeli bir animasyon ekleyerek bulanıklık modülünün tasarımını tamamlayın. Gördüğünüz gibi, daha fazla tasarım öğesi eklersek, animasyon gecikmesi o kadar yüksek olur. Animasyon Stili: Slayt
Animasyon tekrarlama: bir kez
Animasyonlu yön: üst Animasyon Süresi: 1000ms
Animasyon gecikmesi: 2000ms
Animasyon yoğunluğu:% 16
Opaklık Başlangıç Animasyonu:% 0
Klon bulanık modülü iki kez ve kalan sütuna iki kez yerleştirilmiş ve bulanıklık modülünün tasarımını tamamladıktan sonra, devam edip iki kez klonlayabilirsiniz. Kalan iki sıra sütuna yinelenen yerleştirin.
Yinelenen Animasyonu Değiştir #1 İlk yinelenen animasyonun gecikmesini değiştirin.
Animasyon gecikmesi: 2200ms
Yinelenen Animasyon #2’yi değiştirin, sonra ikinci kopyayı açın ve oradaki animasyon gecikmesini de değiştirin. Animasyon gecikmesi: 2400ms Bölme modülü bir sonraki sütun 3 görünürlüğüne ekleyin ve son olarak bu satırda ihtiyacımız olan şey bölücü modülüdür. Bu modülü bir kez daha, bu modülü gecikmeli hale getirmek için kullanıyoruz, bu da bulanık modülün ‘kaybolmasına’ yardımcı olacak. Bölüm 3’e bölücü modülünü ekledikten sonra, ‘Bölü’nü görüntüleyin’ seçeneğinin devre dışı bırakıldığından emin olun.
Divisor göster: hayır Arka plan rengi, bölücüye arka plan rengi ekleyerek devam edin. Bölümün arka planı için aynı rengi kullandığınızdan emin olun.
Arka plan rengi: #f3f3ec Mesafe daha sonra, boşluk ayarlarına gideceğiz ve bölücü modülünün boyutunu artıracağız, böylece bu yazı daha sonra üç bulanık modül üst üste binebilir.
Sol kenar boşluğu: -60vw (masaüstü), -64vw (tablet ve cep telefonu) Üst Pilding: 17VW (masaüstü), 27VW (tablet), 30VW (Telefon)
Aşağıda dolgu: 17VW (masaüstü), 27VW (tablet), 34VW (telefon) Son fakat en azından animasyon, gecikmeli bir animasyon ekleyin. Animasyon Stili: Slayt
Animasyon tekrarlama: bir kez
Animasyonlu yön: doğru
Animasyon Süresi: 650ms Animasyon gecikmesi: 4500ms
Animasyon yoğunluğu:% 24
Opaklık Başlangıç Animasyonu:% 0
Line Clone #2 İkinci satırı ve tüm modülleri bitirdikten sonra devam edebilir ve klonlayabilirsiniz.
Çoğaltma satırındaki bölücü modülünü silmek için yeni satırdaki bölücü modülünü silin.
Animasyon gecikmesi modülü #1’i değiştirin, ardından ilk bulanıklık modülünü açın ve animasyon gecikmesini değiştirin.
Animasyon gecikmesi: 5200ms
Animasyon Gecikme Modülünü Değiştir #2 Sütun 2’deki bulanıklık modülü için aynısını yapın. Animasyon gecikmesi: 5400ms Animasyon gecikmesi Blurb modülünü #3 değiştirin ve Sütun 3’teki bulanıklık modülü için animasyonlu gecikmeyi değiştirin. Animasyon gecikmesi: 5600ms
Üst üste binen ekle #1 bölücü modülüne örtüşme ekleyin Şimdi ihtiyacımız olan tüm tasarım öğelerine sahibiz, örtüşmeye başlayabiliriz! Bu üst üste binen, öğretici boyunca eklediğimiz animasyonun ertelenmesine anlam verecektir. Yaptığınız ilk sırada bölücü modülüyle başlayın. Üst Marj: -15VW
Üst üste #2’ye örtüşme ekleyin, ardından ikinci sırayı açın ve içine bazı negatif kenar boşlukları ekleyin. Üst Marj: -10VW
#2 satırdaki bulanıklık modülüne üst üste binme ekleyin İkinci sıradaki her bulanıklık modülünü açın ve buna bazı özel marj değerleri ekleyin. Üst Marj: -10VW
Alt marj: 7vw İkinci satırın üçüncü sütununda bulabileceğiniz ve örtüşme yapabileceğiniz bölücü modülüne taşınmak için #2 bölücü modülüne üst üste binme ekleyin.
Üst kenar: -35VW (masaüstü), -47vw (tablet), -72vw (telefon) Üçüncü satır ayarlarını açarak ve bazı üst kenar boşlukları negatif ekleyerek satır #3’e örtüşme ekleyin. Üst Marj: -10VW
3 numaralı satırdaki bulanıklık modülüne üst üste binme ekleyin, ancak en az değil, üçüncü sıradaki her bulanık modülüne bazı özel marj değerleri ekleyin.Görsel oluşturucudan çıktıktan sonra, animasyonun gerçek zamanlı olarak gerçekleştiğini görebileceksiniz!
Üst kenar: -22vw (masaüstü), -46vw (tablet), -70vw (telefon) Alt marj: 7vw
Bu yazıdaki son zihin, nasıl düzgün bir şekilde örtüşen bir animasyon yapacağınızı gösterdik.Bu, ziyaretçilere paylaştığınız ve web sitenizde daha yüksek bir görünüm ve hissettiğiniz içerik boyunca rehberlik etmenin iyi bir yoludur.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
