Divi'nin Kaydırma Efektleriyle Hareketli Bir Saat Nasıl Tasarlanır
Yayınlanan: 2020-07-20Web, zamanla ilgili tasarım vurgularına ihtiyaç duyan sitelerle doludur (hız optimizasyonu, yaklaşan etkinlikler vb.). Çoğu durumda, bir saat simgesi veya grafiği harika çalışabilir. Ancak, animasyonlu bir saat tasarımı oluşturmak, web sitenizin tasarımına kesinlikle benzersiz bir "dönüş" verecektir.
Divi'de bulunan tüm yerleşik tasarım seçenekleriyle sıfırdan harika bir animasyonlu saat tasarımı oluşturabiliriz. Bu eğitimde, kullanıcı sayfayı aşağı kaydırdıkça saatin ibrelerini çevirecek bir animasyonlu saat oluşturacağız.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Animasyonlu Saat Düzenini ÜCRETSİZ olarak indirin
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!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Saat Yüzünü Tasarlama
Başlamak için normal bölüme tek sütunlu bir satır ekleyin.
Satır Ayarları
Herhangi bir modül eklemeden önce, satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: #003a5c
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Oluk Genişliği: 1
- Genişlik: 50vw
- Maksimum Genişlik: 500 piksel
- Yükseklik: 50vw
- Maksimum Yükseklik: 500 piksel
- Yuvarlatılmış Köşeler: %50
- Kenar Genişliği: 15px
- Kenar Rengi: #ffffff
- Kutu Gölgesi: ekran görüntüsüne bakın
- Kutu Gölge Dikey Konumu: 0px
- Kutu Gölge Bulanıklığı Gücü: 68px
- Gölge Rengi: rgba(0,0,0,0.22)
Gelişmiş sekmesi altında, görünürlük seçeneklerini aşağıdaki gibi güncelleyin:
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Bölüm 2: Saat İşaretlerini Ekleme
Satır saat yüzü olarak tasarlandıktan sonra, saat on iki, saat üç saat, altı saat 0 ve dokuz saat 0'ı temsil eden saat işaretçilerini eklemeye hazırız. İşaretleyicilerin her biri bir ayırıcı modül kullanılarak oluşturulacaktır.
Saat 12 İşareti
Satırın içine yeni bir ayırıcı modül ekleyerek başlayın.
Ardından arka plan rengini aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #78acf4
- Genişlik: 10vw
- Maksimum Genişlik: 150 piksel
- Yükseklik: 3 piksel
- Yuvarlatılmış Köşeler : 8px
- Dönüştür Döndür Z Ekseni: 90deg
Gelişmiş sekmesi altında, ayırıcıya mutlak bir konum verin:
- Pozisyon: Mutlak
- yer: üst merkez
Saat 6 İşareti
Saat 3 işaretini oluşturmak için, saat 12 işaretini oluşturmak için kullanılan bölücüyü çoğaltın. (Bu noktada, modüllerinizi Katmanlar kipi içinde etiketlemek iyi bir fikirdir.) Ardından yinelenen bölücüyü açın ve konum konumunu aşağıdaki gibi güncelleyin:
- yer: alt merkez
Saat 3 İşareti
Saat 3 işaretini oluşturmak için saat 6 işaretini çoğaltın. Ardından yeni kopyanın ayarlarını açın (“saat 3” olarak etiketlediğinizden emin olun) ve aşağıdakileri değiştirin:
- yer: sağ merkez
Ardından dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:
Çeviri sekmesinin altında…
- Dönüştürme X Eksenini Çevir: %50
Döndürme sekmesi altında
- Dönüştür Z eksenini döndür: 0deg
Saat 9 İşareti
Saat 3 işaretini oluşturmak için saat 6 işaretini çoğaltın. Ardından yeni kopyanın ayarlarını açın (“saat 9” olarak etiketlediğinizden emin olun) ve aşağıdakileri değiştirin:
- konum: sol orta
Ardından dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:
Çeviri sekmesinin altında…
- Dönüştürme X Eksenini Çevir: -%50
Bölüm 3: Saat İbrelerinin Oluşturulması (Saniye, Dakika ve Saat)
Saat işaretleri yerleştirildiğinde, saat ibrelerini oluşturmaya başlamaya hazırız. İkinci el ile başlayacağız.
ikinci el
Saniye ibresini oluşturmak için, saat 12'deki bölücüyü çoğaltın ve Katmanlar modunu kullanarak sütundaki diğer bölücülerin altına sürükleyin.
Ardından yeni kopyayı "ikinci" olarak etiketleyin.
Modülün ayarlarını açın ve Gelişmiş sekmesi altındaki konumu güncelleyin:
- yer: merkez merkez
Tasarım sekmesi altında, boyutu aşağıdaki gibi güncelleyin:
- Genişlik: 20vw
- Maksimum Genişlik: 200 piksel
- Yükseklik: 0,5vw
- Maksimum Yükseklik: 7.5px
Şimdi saniye ibresi saat kadranının ortasında, ama biz saniye ibresinin alt kısmının normal bir saat ibresi gibi merkezden başlamasını istiyoruz. Ardından, ibrenin gerçek bir saatte olduğu gibi dönebilmesi için ibrenin alt kısmının döner başlangıç noktası olarak merkezde kalmasını istiyoruz. Bunu yapmak için, ayırıcıyı belirli bir dönüşüm orijininden konumlandırmak ve döndürmek için bir dönüştürme seçenekleri kombinasyonu kullanmamız gerekecek.
Aşağıdakileri güncelleyin:
Çeviri sekmesinin altında…
- Dönüştür X Eksenini Çevir: %0 (bu önemli bir adımdır)
Döndürme sekmesi altında…
- Dönüştür Döndür Z Ekseni: -90deg
Köken sekmesi altında…
- Kökeni Dönüştür: Sol Merkez
Kaydırma efektini eklediğimizde bu el çok hızlı hareket edeceği için yarı şeffaf bir arka plan rengi verelim ki fazla dikkat dağıtmasın.
- Arka Plan Rengi: rgba(175,175,175,0.12)
Dakika El
Yelkovanı oluşturmak için ikinci el modülünü çoğaltın ve kopyayı “dakika” olarak etiketleyin. Ardından yeni bölücü modülünü açın ve arka plan rengini güncelleyin:
- Arka Plan Gradyanı Sol Renk: #78acf4
- Arka Plan Gradyanı Sağ Renk: #b0b9ff
- Gradyan Yönü: 90deg
Ardından tasarımı aşağıdaki gibi güncelleyin:
- Genişlik: 15w
- Maksimum Genişlik: 150 piksel
- Yükseklik: 1vw
- Maksimum Yükseklik: 15px
Saat İbresi
Dakika ibresi tamamlandığında, Saniye ibresi modülünü çoğaltın ve kopyayı “saat” olarak etiketleyin. Ardından yeni bölücü modülünü açın ve arka plan rengini aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #ffffff
Ardından, tasarım sekmesinin altındaki boyutu aşağıdaki gibi güncelleyin:
- Genişlik: 10vw
- Maksimum Genişlik: 100 piksel
Bu noktada, üç saat ibresinin tümü kaydırma efektleri için hazır olacak!
Bölüm 4: Her Saat İbresine Döndürme Kaydırma Efektleri Ekleme
Saat ibrelerini döndürmek için, üç saat ibresinin her birine döndürme kaydırma efekti ekleyeceğiz. Bir saat tasarımı ile çalıştığımız için, gerçek zamanı temsil etmek için her saat kolundaki dönüş derecelerini kullanabileceğimizi unutmamak önemlidir. Örneğin, akrebin 30 derece döndürülmesi saat 1'i, 60 derece ise saat 2'yi temsil eder ve bu böyle devam eder.
Saat İbresi Döndürme Kaydırma Etkisi
İlk olarak, akrep yönüne bir döndürme kaydırma efekti ekleyeceğiz. Akrep bölücü ayarlarını açın ve aşağıdaki dönüştürme efektini ekleyin:
Döndürme sekmesinin altında…
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Dönüşü: 0deg (%10'da)
- Orta Dönüş: 15deg (%50'de)
- Bitiş Dönüşü: 30deg (%90'da)
Dakika El Döndürme Kaydırma Etkisi
Ardından, yelkovana bir döndürme kaydırma efekti ekleyeceğiz. Dakika el bölücü ayarlarını açın ve aşağıdaki dönüştürme efektini ekleyin:
Döndürme sekmesinin altında…
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Dönüşü: 0deg (%10'da)
- Orta Dönüş: 180 derece (%50'de)
- Bitiş Dönüşü: 360deg (%90'da)
İkinci El Döndürme Kaydırma Etkisi
Ardından, ikinci ele bir döndürme kaydırma efekti ekleyeceğiz. İkinci el bölücü ayarlarını açın ve aşağıdaki dönüştürme efektini ekleyin:
Döndürme sekmesinin altında…
- Döndürmeyi Etkinleştir: EVET
- Başlangıç Dönüşü: 0deg (%10'da)
- Orta Dönüş: 5400deg (%50'de)
- Bitiş Dönüşü: 10800deg (%90'da)
NOT: Saniye ibresinin 1 saate ulaşması için doğru bir dönüş 21600 derecelik bir dönüş gerektirir. Ama bu çok hızlı olduğu için yarıya indirmenin en iyisi olduğunu düşündüm. Sonuçta, bu tasarım amaçlıdır.
Nihai sonuçlar
İşte son tasarım.
Ve bu, kaydırma efektlerinin nihai sonucudur. Sayfayı aşağı kaydırırken zamanın tam olarak bir saat nasıl geçtiğine dikkat edin.
Son düşünceler
Zamanı bu kadar doğru temsil eden kaydırma efektleriyle böyle bir saat tasarımı yapabilmemiz oldukça şaşırtıcı. Kaydırma sırasında saati hızlandırmak ve yavaşlatmak için daha fazla döndürme kaydırma efekti ekleyerek deneme yapmaktan çekinmeyin. Ayrıca bu saat tasarımını çok sayıda CTA veya başlığı vurgulamak için kullanabilirsiniz.
Yorumlarda sizden haber bekliyorum.
Şerefe!