Divi'de Hover Efektleri CSS Paralaks Arka Planlarıyla Nasıl Birleştirilir
Yayınlanan: 2019-08-30Divi'de Arka Plan Görüntüleri ile CSS Paralaksını kullanmak, şaşırtıcı derecede benzersiz fareyle üzerine gelme efektleri oluşturmamıza olanak tanır. Paralaks, web sitelerimize hayat katabileceğimiz birçok yoldan biridir. Ve paralaksı Divi'nin çok çeşitli fareyle üzerine gelme seçenekleriyle birleştirirken, içeriğe daha da fazla hayat veriyoruz.
Bu eğitimde, Divi'de benzersiz CSS paralaks arka plan üzerine gelme efektlerini hızlı ve kolay bir şekilde tasarlayabileceğinizi göstereceğiz. Eklenti veya özel kodlama gerekmez!
Başlayalım.
Gizlice Bakış
İşte bu eğitimde tasarlayacağımız css paralaks arka plan vurgulu efektlerine hızlı bir 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
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Divi'de Breakout Paralaks Hover Efekti Oluşturma
İlk olarak, bir sütun satırı olan normal bir bölüm oluşturun. 
Modül eklemeden önce bölüm ayarlarını açın ve CSS paralaksını kullanarak bir arka plan resmi ekleyin.
Resmin en az 1920 piksel genişliğinde olduğundan emin olun. Tasarım, çok dokulu daha koyu bir arka plan görüntüsü ile iyi çalışır. Divi Builder'da bulunan Kahve Dükkanı Düzen Paketimizden birini kullanıyorum.
Ardından, bölüme aşağıdaki gibi biraz dolgu ekleyin:
Dolgu: 10vw üst, 10vw alt
Bir Bulanıklık Modülü Ekle
Bölüm arka planı ve dolgusu yerleştirildikten sonra, satıra bir tanıtım yazısı modülü ekleyin.
Ardından, tanıtıcı içeriği birkaç cümle gövde metni ile güncelleyin. Varsayılan başlığı orada tutabilirsiniz.
Ardından bir simge kullanmak için tıklayın ve tanıtım yazısı için kahve simgesini seçin.
İçerik hazır olduktan sonra tasarım ayarlarını aşağıdaki gibi güncelleyin:
Simge Rengi: #ffffff
Simge Yazı Tipi Boyutu: 50px
Metin Hizalama: orta
Başlık Yazı Tipi: Oswald
Başlık Yazı Tipi Stili TT
Başlık Metin Rengi: #ffffff
Başlık Harf Aralığı: 2px
Gövde Yazı Tipi: Nunito
Gövde Metni Rengi: #ffffff
Gövde Harf Aralığı: 1px
Dolgu: 30 piksel üst, 30 piksel alt, 30 piksel sol, 30 piksel sağ
Satır Genişliğini Ayarla
Tanıtım yazısı tasarlandıktan sonra, satır ayarlarına atlayın ve maksimum genişliği ayarlayın.
Maksimum Genişlik: %80
Sütun Ayarları
Bu örnek için, fareyle üzerine gelme efektini sütun düzeyinde etkinleştireceğiz. Bu, şimdilik tek bir tanıtım modülü kullanıyor olmamıza rağmen, içeriği oluşturmak için birden fazla modül kullanmanıza olanak tanır.
Bu paralaks vurgulu efektinin çalışması için, bölümümüzde kullandığımız sütuna aynı arka plan resmini eklememiz gerekiyor. Aynı CSS paralaks yöntemini sütun arka plan görüntüsünde de kullanmamız gerekecek.
Sütun ayarlarını açın ve aynı arka plan resmini CSS paralaksını kullanarak ekleyin.
Sütun arka plan görüntüsü ile bölüm arka plan görüntüsü arasında herhangi bir fark göremezsiniz çünkü her ikisi de görüntüyü web sayfasında tam olarak aynı yerde sabitleyen CSS paralaksını kullanır. Ancak, vurgulu efekti yerinde olduğunda farkı göreceksiniz.
Sütun tasarım ayarlarını aşağıdaki gibi güncellemeye devam edin:
Dolgu: 4vw üst, 4vw alt
Yuvarlatılmış Köşeler: 10px
Ardından, sütuna yalnızca fareyle üzerine gelindiğinde aşağıdaki gibi görünen bir kutu gölgesi verin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 36px
Gölge Rengi (varsayılan): rgba(0,0,0,0)
Gölge Rengi (vurgulu): rgba(0,0,0,0.72)
Şimdi dönüştürme seçeneklerine gidelim ve fareyle üzerine gelindiğinde aşağıdaki dönüştürme stillerini güncelleyelim:
Dönüştürme Ölçeği (fareyle üzerine gelme): %105
Bu, arka plan görüntüsünden hafifçe dışarı fırlama efekti oluşturmak için sütunu (ve içeriğini) biraz büyütecektir.
Y Eksenini Dönüştür (fareyle üzerine gelme): -%2,5
Bu, hafif bir asimetrik yer değiştirme oluşturmak için fareyle üzerine gelindiğinde sütunu hafifçe yukarı hareket ettirir.
Kökeni Dönüştür: %100 %50 (alt orta)
Bu, öteleme değeri ile birleştirildiğinde ince bir menteşe efektine benzeyen alt merkez orijinden ölçeklendirme efektini başlatır.
İşte şimdiye kadar css paralaks vurgulu etkisi.
Şimdi satır ayarlarını açın ve her biri aynı tanıtıcı ve fareyle üzerine gelme efektlerine sahip toplam üç sütun oluşturmak için sütunu iki kez çoğaltın.
Son sonuç
İşte son tasarım. Sayfayı aşağı kaydırırken paralaks arka plan görüntülerinin varsayılan olarak nasıl gizlendiğine dikkat edin. Ardından, çıktıkları sırada sütunların her birinin üzerine gelindiğinde görünürler. Ayrıca, sütunun üzerinde gezinirken sayfayı aşağı kaydırırken paralaksın sütunda hala çalıştığını görebilirsiniz. İnce, ancak son derece benzersiz bir vurgulu efekttir.
Hover Etkisine Döndürme Ekleme
Ayrıca tasarıma hoş bir dokunuş katan css paralaks vurgulu efektine bir rotasyon ekleyebiliriz. Sütun ayarlarının her birini açın ve aşağıdakileri güncelleyin:
Dönüştür Döndür Z Ekseni (fareyle üzerine gelindiğinde): 5 derece
Karıştırmak isterseniz ortadaki sütuna -5 derecelik bir dönüş verebilirsiniz.
İşte nihai sonuç.
Ve burada daha açık bir arka plan görüntüsü ve daha koyu metin ile aynı tasarım.
Bölüm 2: Divi'de Büyüteç Paralaks Hover Efekti Oluşturma
İlk tasarımdaki bölümü çoğaltın ve ardından bölüm ayarlarını açın ve arka plan görüntüsünü yenisiyle değiştirin. Video Game Layout Pack'imizden olanı kullanıyorum çünkü gerçekten büyütme paralaks vurgulu efektini vurguluyor.
Satır Ayarlarını Güncelle
Bu tasarım için fazladan alana ihtiyacımız olacak, bu nedenle satır ayarlarını açın ve aşağıdakileri güncelleyin:
Oluk Genişliği: 1
Genişlik: %100
Maksimum Genişlik: %98
Bundan sonra, içerik sekmesine atlayın ve yalnızca bir sütun kalacak şekilde iki sütunu silin.
Sütun Ayarları
Bu tasarım için, fareyle üzerine gelme efektini sütun seviyesi yerine modül seviyesinde uygulamamız gerekiyor, bu yüzden sütun için varsayılan stilleri sıfırlamamız gerekiyor. Bunu yapmak için, sütun öğesine sağ tıklayın ve "öğe stillerini sıfırla" seçeneğini seçin.
Blurb Modülünü Güncelle
Sütun ayarları varsayılan stillere geri yüklendikten sonra, tanıtıcı modül ayarlarını açın ve bölüme eklenen aynı css paralaks arka plan görüntüsünü ekleyin.
boyutlandırma
Dairesel bir modül oluşturmak için önce ona aşağıdaki gibi eşleşen bir genişlik ve yükseklik vermemiz gerekiyor:
Genişlik: 300 piksel
Modül Hizalaması: merkez
Yükseklik: 300 piksel
Sınır
Dairesel efekti tamamlamak için yuvarlatılmış köşeleri güncellememiz ve ona hafif bir kenarlık vermemiz gerekiyor.
Yuvarlatılmış Köşeler: %50
Kenar genişliği: 1 piksel
Kenar Rengi: rgba(255,255,255,0.12)
Kutu Gölge Vurgulu Etkisi
Ardından, tanıtım yazısına fareyle üzerine gelindiğinde aşağıdaki gibi bir kutu gölgesi verin:
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 36px
Gölge Rengi (varsayılan): rgba(0,0,0,0)
Gölge Rengi (vurgu): rgba(0,0,0,0.7)
Hover Efektlerini Dönüştür
Kutu gölgeniz yerleştirildiğinde, dönüştürme seçeneklerini aşağıdaki gibi güncelleyin:
Kökeni Dönüştür (varsayılan): %50 %0 (orta sol)
Bu, üç sütunlu satırın en soluna yerleştirildikten sonra tanıtım yazısının sayfanın dışına taşmamasını sağlar.
Dönüştürme Ölçeği (fareyle üzerine gelme): %130
Bu, tanıtım yazısını büyütecek ve havalı bir vurgulu efekt için paralaks arka plan görüntüsünü gerçekten büyütecektir.
Sütunu Çoğalt
Tanıtım yazısı tamamlandıktan sonra, her biri aynı tanıtım yazısı modülüne sahip üç sütun oluşturmak için sütunu çoğaltabiliriz.
Satır ayarlarını açın ve toplam üç sütun için sütunu iki kez çoğaltın.
Dönüşüm Kaynağını Güncelle
Tanıtıcı modüllerimizin hepsinde dönüştürme kaynağı "orta sol" olarak ayarlandığından, bunu orta ve sağ sütundaki tanıtıcı yazılar için uygun konumdan ölçeklenmeleri için ayarlamamız gerekir.
2. sütunda tanıtıcı modül ayarlarını açın ve aşağıdakileri güncelleyin:
Kökeni Dönüştür: %50 %50 (merkez merkez)
Ardından, 3. sütundaki tanıtım yazısı modülünün ayarlarını açın ve aşağıdakileri güncelleyin:
Kökeni Dönüştür: %50 %100 (orta sağ)
Son sonuç
Şimdi nihai sonucu kontrol edin. Efektin, tanıtım yazısının arkasındaki css paralaks arka plan görüntüsünü gerçekten nasıl büyüttüğüne dikkat edin. Ve tanıtım yazısının üzerinde gezinirken aşağı kaydırdığınızda, bir büyüteç etkisine benziyor.
Aslında, bu o kadar harika ki, onu yalnızca fareyle üzerine gelme durumu yerine varsayılan stil olarak bırakmak isteyebiliriz.
Son düşünceler
Umarım bu gönderideki örnekler yaratıcılığınızı biraz olsun harekete geçirmiştir, böylece daha da havalı tasarımları ve css paralaks ile birleştirmek için fareyle üzerine gelme efektlerini keşfedebilirsiniz. Kurulum süreci gerçekten basittir, ancak olanaklar görünüşte sonsuzdur.
Yorumlarda sizden haber bekliyorum.
Şerefe!