Divi'de Web Sayfası Tasarımlarını Önizlemek için Aşağı Kaydırma Hover Efekti Nasıl Eklenir

İster bir portföy sayfasında isterse bir resim galerisinde olsun, web tasarımcılarının tasarımlarını müşterileri için iş geliştirmenin önemli bir parçası olarak sergilemeleri gerekir. Ve çoğu zaman, çalışmalarının bu örnekleri, çok fazla yer kaplayabilen tüm web sayfası tasarımlarının resimlerini içerir. Bu nedenle, bu görüntülere aşağı kaydırma efekti eklemek, portföyünüzü farklı kılabilir. Bu, kullanıcının başlangıçta tasarımın kompakt bir bölümünü görmesini sağlar. Ancak, kullanıcı görüntünün üzerine geldiğinde, görüntü, tasarımın geri kalanını sanki bir web sayfasını aşağı kaydırıyormuş gibi yavaşça ortaya çıkarmak için kayar. Bu tür efektin kullanıldığını kendi Divi Düzen Paketleri sayfamızda görebilirsiniz.

Bu eğitimde, kullanıcıların web sayfası tasarımlarını önizlemelerine olanak tanıyacak görüntülere bir aşağı kaydırma vurgulu efekti eklemek için Divi'yi nasıl kullanacağınızı göstereceğim. Bu, seveceğinizi düşündüğüm zarif bir etkileşimli öğedir.

Gizlice Bakış

İşte bu eğitimde birlikte oluşturacağımız aşağı kaydırma vurgulu efektinin bir önizlemesi.

ÜCRETSİZ Scroll Down Hover Efekt Düzenini indirin

Bu örnek aşağı kaydırmalı vurgulu efekt tasarımlarına göz atmak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ü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.

İNDİRMEK

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.

Şimdi öğreticiye geçelim mi?

Başlamak için Gerekenler

Bu kullanım örneği için Divi kullanarak tasarımımızı sıfırdan oluşturacağız. Portföy öğeleri için kullanmak üzere bazı resimlere/ekran görüntülerine de ihtiyacınız olacak. Genişliği en az 1080 piksel olan resimler kullanmanızı öneririm.

Üç Sütun Satırını Oluşturma

Henüz yapmadıysanız, yeni bir sayfa oluşturun. Ardından sayfanıza bir başlık verin ve Divi oluşturucuyu ön uçta dağıtın. Ardından, üç sütunlu bir satırla yeni bir bölüm oluşturun.

Satır ayarlarını aşağıdaki gibi güncelleyin:

Özel Genişlik: %100
Özel Dolgu (masaüstü): %5 sol, %5 sağ
Özel Dolgu (tablet): %25 sol, %25 sağ
Özel Dolgu (telefon): %15 sol, %15 sağ

Ardından, sütun ana öğelerinin her birine aşağıdaki özel CSS parçacıklarını eklememiz gerekiyor. Gelişmiş sekmesinin altına aşağıdaki CSS'yi ekleyin:

Sütun 1 Ana Öğe CSS:

overflow: hidden;
height: 400px;

Sütun 2 Ana Öğe CSS:

overflow: hidden;
height: 400px;

Sütun 3 Ana Öğe CSS:

overflow: hidden;
height: 400px;

Sütunların her birinin yüksekliğinin 400 piksel olduğuna dikkat edin. Bu, sonuçta, üzerine gelindiğinde kayan görüntünün görüntü alanının yüksekliği olarak işlev görecektir. "Overflow: hidden" özelliği, görüntünün sütunun dışına taşınan kısmının (fareyle üzerine gelindiğinde) gizli kalmasını sağlar. Bu, görüntüye dönüşüm vurgulu efekti eklediğimizde daha anlamlı olacaktır.

Aşağı Kaydırma Vurgulu Efekt ile Görüntü Oluşturma

Şimdi aşağı kaydırma efekti ile resmimizi oluşturmaya başlamaya hazırız. Efektin nasıl çalıştığını anlarsanız, bu şaşırtıcı derecede basittir. Temel olarak, tek yapacağımız bir resim eklemek ve ardından fareyle üzerine gelindiğinde resmi %100 yukarı taşımak için transform translate özelliğini kullanmak. Ardından görüntünün doğru konumda durduğundan emin olmak için, üzerine gelindiğinde sütunun yüksekliğine eşit bir üst kenar boşluğu eklememiz gerekir. Bu, görüntünün tam olarak görüntünün alt kısmının göründüğü noktada kaymayı durdurmasını sağlayacaktır.

İşte nasıl yapılacağı.

Sütun 1'e bir görüntü modülü ekleyin. Ardından, aşağıdaki fareyle üzerine gelme seçeneklerini ekleyin:

Özel Kenar Boşluğu (vurgulu): 400 piksel üst
Dönüştür Y eksenini çevir (fareyle üzerine gelme): -%100

Fareyle üzerine gelindiğinde özel üst kenar boşluğunun, yukarıdaki özel CSS'de sütununuza verilen yüksekliğe eşit olduğundan emin olun.

Ayrıca, transform translate Y ekseni değeri piksel değil bir yüzdedir (-%100), bu nedenle bunu transform translate kontrollerinin giriş kutusuna değeri yazarak manuel olarak girmeniz gerekecektir.

Aşağı Kaydırma Hover Etkisi Nasıl Çalışır?

Bu kurulumun işlevselliğini birkaç görsel örnekle açıklarsam yardımcı olabilirim. Diyelim ki kullandığınız görselin yüksekliği 700px. Sütun yüksekliği yalnızca 400 pikseldir. Bu, varsayılan olarak (fareyle üzerine gelmeden önce), bu görüntünün alt taşmasının, sütunun dışına uzandığı için gizleneceği anlamına gelir.

Kullanıcı görüntünün üzerine geldiğinde iki şey olur.

İlk olarak, transform translate özelliği, görüntüyü -%100'lük bir Y ekseni değeriyle yukarı doğru hareket ettirir. Başka bir deyişle, görüntü, görüntü yüksekliği ne olursa olsun (700 piksel) %100 yukarı hareket eder.

Ardından, resmin altta mükemmel bir şekilde oturması için görüntüyü sütun görünümüne geri getirmek için görüntüye 400 piksellik bir üst kenar boşluğu verilir.

Bu, dönüşüm vurgulu efektiyle aynı anda gerçekleşir, bu nedenle sonuç, mükemmel yerleştirmeyle biten yumuşak bir kaydırmadır.

Canlı örnekte sonucun nasıl göründüğü aşağıdadır.

Geçiş Süresini ve Hız Eğrisini Ayarlama

Anlayabileceğiniz gibi, geçiş süresi, fareyle üzerine gelindiğinde görüntünün önizlemesi için çok hızlı. Yavaşlatmak için geçiş süresini güncelleyebilirsiniz. Süre boyunca hızı değiştirmek için hız eğrisini de ayarlayabilirsiniz.

Aşağıdakileri güncelleyin:

Geçiş Süresi: 4000ms
Geçiş Hızı Eğrisi: Kolaylık

Genel olarak, fareyle üzerine gelindiğinde kaydırma efekti oluşurken kullanıcıya görüntüyü işlemesi için zaman vermek için daha yüksek yüksekliğe sahip görüntülerin geçiş süresini artırmak isteyeceksiniz.

Görüntü Modülünü Kopyalayıp Kalan Sütunlara Yapıştırın

Şimdi tek yapmanız gereken görüntü modülünü kopyalayıp 2. ve 3. sütuna yapıştırmak. Ardından her biri için görüntüleri istediğiniz yeni görüntüye güncelleyin. Bu kadar!

Metin Modülü Kullanarak Her Resmin Üzerine Başlık Ekleme

Her resminize bir başlık eklemek isterseniz, bunu metin modülünü kullanarak yapabilirsiniz. Ancak, çalışması için metin modülünde ve görüntü modülünde bazı ayarlamalar yapmamız gerekecek.

Devam edin ve sütun 1'deki görüntünün üzerine yeni bir metin modülü ekleyin. Sütununuz bir sütun yüksekliğine ayarlandığından tel kafes görüntüleme modunu kullanmak daha kolay olacaktır.

Ardından içeriği aşağıdaki gibi bir h2 başlığıyla güncelleyin:

<h2>Homepage</h2>

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #ffffff
Metin Yönü: orta
Başlık 2 Metin Boyutu: 20px
Başlık 2 Çizgi Yüksekliği: 2em
Özel Kenar Boşluğu: 0 piksel alt
Özel Dolgu: 10 piksel üst
Kutu Gölgesi: ekran görüntüsüne bakın

Bu ayarlar keyfi görünebilir, ancak değildir. Bu değerler, daha sonra bilinmesi gereken metin modülünün yüksekliğinin ne olacağını tahmin edebilir. Örneğin, metin modülünün 60 piksel yüksekliğe sahip olacağını biliyorum. Hadi matematik yapalım…

Satır yüksekliği, başlık 2 metin boyutunun (20px) 2 katı olan 2em'dir. Bu, satır yüksekliğimin 40 piksel olacağı anlamına geliyor.

Özel üst dolgu 10 piksel olarak ayarlanmıştır. Ve Divi'de varsayılan olarak tüm başlıklar için zaten mevcut olan 10 piksellik gizli alt dolgu vardır. Üst ve alt dolgu, 20 piksel ek yükseklik için birleşir.

Yani… 40 piksel (satır yüksekliği) + 20 piksel (dolgu) = 60 piksel

Artık metin modülünün yüksekliğini biliyoruz. Elbette, emin olmak için her zaman geliştirme araçlarını kullanarak öğeyi inceleyebilirsiniz.

Modülün altında bulunan varsayılan kenar boşluğunu çıkarmak için 0 piksellik özel alt kenar boşluğu gereklidir (oluk genişliği tarafından eklenir).

Fareyle üzerine gelindiğinde metin modülü ile görüntünün bir miktar örtüşmesi olacağından, metin modülünün görüntünün üzerinde katmanlı kaldığından emin olmamız gerekir. Bunu, metin modülüne göreli bir konum vererek ve z-index değerini aşağıdaki gibi değiştirerek yapabiliriz:

Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

position:relative;

Ardından z dizinini güncelleyin:

Z İndeksi: 3

Metin Modülünü Kopyala ve Yapıştır

Artık metin başlığı tamamlandığına göre, onu kopyalayıp (tel çerçeve görüntüleme modunu kullanarak) 2. ve 3. sütundaki resimlerin üzerine yapıştırabiliriz.

O zaman tek yapmanız gereken her biri için içeriği güncellemek.

Metin Modülü Yüksekliğini Barındırmak İçin Her Resmin Üzerine Geldiğinde Üst Kenar Boşluğu Değerini Güncelleyin

Şu anda, 1., 2. ve 3. sütunlardaki resimlerin her biri, üzerine gelindiğinde 400 piksellik özel bir üst kenar boşluğuna sahiptir. Bu, sütunun özel yüksekliğinin yüksekliğine eşit olacak şekilde ayarlandı. Ancak, metin modülü artık sütun alanının bir kısmını (60 piksel yüksekliğinde) kapladığı için, üst kenar boşluğu vurgulu değerini ayarlamamız gerekiyor.

Bunu yapmak için, üç resmi de seçmek için çoklu seçim özelliğini kullanın. Ardından öğe ayarlarını aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu (fareyle üzerine gelme): 340 piksel üst

Artık resimleriniz, fareyle üzerine gelme durumunun sonunda sütunun altında mükemmel bir şekilde duracaktır.

Son sonuç

İşte tasarımın nihai sonucu.

Daha fazla portföy ekranı için satırı çoğaltmaktan ve görüntüleri ve başlık metnini gerektiği gibi güncellemekten çekinmeyin.

İşte tablet ve telefonda nasıl göründüğü.

Son düşünceler

Web sayfası tasarımlarınızı özel bir aşağı kaydırma efektiyle sergilemek, yalnızca gerçekten harika bir etkileşim eklemekle kalmaz, aynı zamanda çok yerden tasarruf sağlar. Bu, çok sayıda görüntüyü kompakt ve simetrik bir düzende görüntülemenize olanak tanır. Bu tür bir işlevsellik genellikle bir eklenti ile elde edeceğimiz bir şeydir. Ancak Divi ile başka bir eklenti eklemek zorunda kalmadan tasarım ve işlevsellik üzerinde tam kontrole sahipsiniz. Umarım bu, bir sonraki projeniz için güzel portföy galerileri oluşturmanıza ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!