Resim galerileri çoğu web sitesinde favori bir hedeftir. Ve çoğu durumda, bu resim galerilerini neşeli ve sabit tutmak, resimlerin kendi sihrini kullanmasına izin vermek en iyisi olabilir.
Ancak, sürgülü bulmaca kaydırma efekti ekleyin resim galerisi (bu derste yapacağımız gibi), zamansız bir klasiğe ferahlatıcı bir dokunuş verebilir.
Bu eğitimde, Divi üzerinde kayan bulmaca kaydırma efektine sahip bir resim galerisini ortaya çıkaran basit bir düzeni nasıl oluşturacağınızı göstereceğiz.
Önemli olan, görüntüyü tam olarak bir noktaya taşımak için görüntü boyutunun her kaydırma efektinin dikey ve yatay uzaklık değerleriyle nasıl ilişkili olduğunu anlamaktır. Ancak tamamlandığında ortaya çıkan hareket efekti, kademeli olarak bir araya gelerek benzersiz bir şekilde bir resim galerisi ortaya çıkardığı için net ve kesindir.
Olası Sonuç
Burada, bu öğreticide oluşturacağımız kayan bulmaca kaydırma efektiyle resim galerisi düzenine genel bir bakış yer almaktadır.
Başlık bölümünün oluşturulması
Başlamak için, kullanıcıya galeriyi ve harika kaydırma efektleriyle sayfayı kaydırmasını söyleyen hızlı bir başlık bölümü oluşturalım.
Satır ekle
Varsayılan bölüme tek sütunlu bir satır ekleyin.
Metin modülü ekle
Sütun / satırın içine yeni bir metin modülü ekleyin.
Metin ayarlarında gövde içeriğini aşağıdakilerle güncelleyin:
<h1>Image Gallery</h1>
Metin modülü ayarları
Tasarım sekmesinde, metin tasarımını aşağıdaki gibi güncelleyin:
- Başlık yazı tipi: Roboto
- Başlık yazı tipi ağırlığı: kalın
- Başlık yazı tipi stili: TT
- Üstbilgi Metni Hizalama: Merkez
- Başlık metin boyutu: 50px (masaüstü), 40px (tablet ve telefon)
- Başlık harfi aralığı: 4 piksel
Bir Bulanıklaştırma modülü simgesi ekle
Metin yerleştirildikten sonra, metin modülünün altına yeni bir sunum metin modülü ekleyin.
Ardından, varsayılan içerikten tüm başlığı ve gövdeyi kaldırın ve aşağı ok simgesini kullanmayı seçin.
Sunum metni ayarları
Ardından, sunum metni ayarlarını yeni bir renk ve yinelenen bir slayt animasyonu ile güncelleyin.
- Simge Rengi: # ffb500
- Animasyon Stili: Slayt
- Animasyon yönü: aşağı
- Animasyon yoğunluğu:% 20
- Animasyon tekrarı: döngü
Bölüm dolgusu
Bölümlere kaydırma alanı vermek için dolguyu aşağıdaki gibi güncelleyin:
- Dolgu: 20vh yukarıda, 50vh aşağıda
Burada, tarayıcı penceresinin yüksekliğine bağlı olan vh uzunluk birimini kullanıyoruz, böylece aralık tüm tarayıcı boyutlarında tutarlı bir şekilde ayarlanır.
Kaydırma efektli resim galerisi oluşturma
Artık başlık bölümümüz tamamlandığına göre, kayan bulmaca kaydırma efektleriyle gerçek resim galerisini oluşturmaya hazırız. Tüm galeri, toplamda 4 resim oluşturmak için her satırda 12 resim / sütundan oluşan üç satırdan oluşacaktır. Ancak, tamamlandığında mizanpaja kolayca daha fazla çizgi ve görüntü ekleyebilirsiniz.
Kesit ve çizgi oluşturma
Yeni bölüm ekle
Başlık kısmının altına yeni bir normal bölüm ekleyerek başlayalım.
Satır ekle
Ardından bölüme dört sütunlu bir satır ekleyin.
Satır Parametreleri
Hat ayarları altında aşağıdakileri güncelleyin:
- Oluk genişliği: 1
- Genişlik:% 100
- Maksimum genişlik: 1200 piksel (masaüstü), 600 piksel (tablet), 300 piksel (telefon)
Çizgi genişliği görüntü boyutunu nasıl belirler?
Dört sütunun her birinin genişliğini belirleyeceği için sıranın genişliği bu tasarım için çok önemlidir. Cilt payı genişliğini 1 olarak ayarladığımızda, resimler arasında artık kenar boşluğu kalmayacaktır.
Maksimum genişliği 1200 piksel olarak ayarladığımızda, dört sütun düzeni sütunların / görüntülerin her birini tam olarak 300 piksel genişliğinde yapar (1200 piksel / 4 = 300 piksel).
Ayrıca görsellerin her biri kare olduğu için her görüntünün yüksekliğinin de 300 piksel olacağını biliyoruz. İstemiyorsak, bu şekilde tutmak zorunda değiliz.
Örneğin, 400 x 400 piksellik görüntülere sahip üç sütun düzenini de seçebiliriz. Görüntü genişliğini (300px) ve yüksekliğini (ayrıca 300px) bilmek, daha sonra kaydırma efektini oluşturmanın anahtarı olacaktır.
Görüntü ekleme
Resim ekle 1
Resim 1 Kaydırma efektleri
Görüntü boyutu ve kaydırma efekti ofsetleri arasındaki ilişki
Dikey ve yatay kaydırma efektini kullanırken, girilen sayısal değerin neyi temsil ettiğini anlamak önemlidir. Bu örnekte, dikey hareket başlangıç ofsetimiz -3'tür. Bu -3, aslında görüntünün genişliği olan -300 pikseldir (veya 300 piksel aşağıdadır).
Ofset daha sonra kullanıcı kaydırdığında 0'a (ana konum) ulaşır. Görüntüyü tam olarak bir blok / çerçeveye taşıyan kaydırma efektini oluşturan şey budur. Yatay hareket 3'te (sağdan 300 piksel) başlar ve varsayılan konumunda durur. Bu iki efekt, benzersiz bir iki bölümlü kaydırma efekti oluşturmak için birleşir.
Resim ekle 2
Görüntüye kaydırma efektleri eklendikten sonra 1. 2. sütuna yeni bir görüntü ekleyin.
Bu statik görüntüyü kaydırma efekti olmadan bırakacağız.
Resim ekle 3
Ardından 3. sütuna başka bir görüntü modülü ekleyin ve modülü yeni bir görüntü ile güncelleyin.
Resim 3 Kaydırma efektleri
Görüntü Ayarları altında, aşağıdaki kaydırma efektlerini güncelleyin:
Yatay hareket sekmesinin altında ...
- Yatay hareketi etkinleştir: EVET
- Başlangıç ofseti: -3 (pencerenin% 0'ında)
- Ortalama uzaklık: 0 (görüntü alanının% 15'sinde)
- Bitiş uzaklığı: 0 (görüntü alanının% 100'ünde)
Resim ekle 4
Son görüntüyü oluşturmak için görüntü 1'i kopyalayın ve 4. sütuna yapıştırın.
Görüntü ayarlarında yeni bir görüntü yükleyin.
Resim 4 Kaydırma efektleri
Ardından aşağıdaki kaydırma efektlerini güncelleyin:
Dikey hareket sekmesinin altında ...
- Dikey hareketi etkinleştir: EVET
- Başlangıç ofseti: 3 (pencerenin% 0'ında)
- Ortalama göreli konum: 0 (görüntü alanının% 15 -% 28'inde)
- Bitiş uzaklığı: 0 (görüntü alanının% 40'ünde)
Yatay hareket sekmesinin altında ...
- Yatay hareketi etkinleştir: EVET
- Başlangıç ofseti: 3 (pencerenin% 0'ında)
- Ortalama uzaklık: 3 (görüntü alanının% 28'sinde)
- Bitiş uzaklığı: 0 (görüntü alanının% 40'ünde)
Yinelenen satır
Artık ilk satır için görüntü kaydırma efektleri yapıldığına göre, tek yapmamız gereken daha fazla görüntü ve bunlara karşılık gelen kaydırma efektlerini oluşturmak için satırı çoğaltmak. Bu örnek için, toplam üç satır oluşturmak için satırı iki kez çoğaltalım.
Görüntüleri gerektiği gibi değiştirin ve yeniden düzenleyin
Daha sonra sürükle bırak fonksiyonu ile resimleri istediğimiz yere taşıyabiliriz. Burası yaratıcı olabileceğiniz ve hareketli görüntülerin nasıl kayacağını görebileceğiniz yerdir. Görüntüler yerleştirildikten sonra, görüntü modülünün içeriğini, kullanıcının ihtiyaçlarını karşılayan yeni görüntülerle değiştirebilirsiniz. Site Web.
Son rötuşlar
Bölüm görünürlüğü
Görüntülerimiz muhtemelen bölüm / pencerenin dışına uzanacağından, biraz temizlemek için taşmayı gizleyelim. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Yatay taşma: gizli
- Dikey taşma: gizli
Bölüm dolgusu
Üstteki görüntünün (bölümün üstüne uzanan) dikey kaydırma efektinin gizli taşmaya rağmen görünür olmasını istiyoruz. Öyleyse, görüntü yüksekliğine (300 piksel) eşit üst ve alt dolgu ekleyelim.
Şimdiye kadarki sonuç
Galeri tasarımını resimler arasında boşluk bırakmadan korumak istiyorsanız şimdi burada durabiliriz. İşte sonuç şu ana kadar nasıl görünüyor. Görüntülerin dikey ve yatay olarak tam olarak bir blok / çerçeve nasıl hareket ettiğine dikkat edin.
Görüntüler arasına boşluk ekleme
Cilt payı genişliğini 1 olarak ayarladığımız için, artık sütunlarımız veya görüntülerimiz arasında bir kenar boşluğumuz yok. Benzer boşlukları yeniden oluşturmak için her kareye dolgu ekleyebiliriz.
Bu, kaydırma efektlerinin işlevselliğinden ödün vermeden ihtiyacımız olan aralığı oluşturmamızı sağlayacaktır. Bu mümkündür, çünkü görüntüye dolgu eklemek, görüntü kabının genişliğini veya yüksekliğini artırmaz. Kenarlıkları kullanarak da benzer bir etkiye sahip olabilirsiniz.
Resim 1 Dolgu
Resim 1 için ayarları açın ve aşağıdakileri güncelleyin:
- Dolgu: üstte 10 piksel, altta 10 piksel, solda 10 piksel, sağda 10 piksel
Dolguyu tüm görüntülere genişlet
Kaydetmeden önce, dolgu seçeneğine sağ tıklayın ve "Dolguyu genişlet" seçeneğini seçin. Genişlet Stilleri açılır penceresinde, bu dolguyu sayfadaki tüm görüntülere genişletmek için Genişlet düğmesine tıklayın.
Nihai sonuç
İşte şimdiye kadar yaptığımız tüm çalışmaların sonucu.
Son düşünceler
Bu makalede yer alan kayan bulmaca kaydırma efekti, bize bir resim galerisi için benzersiz bir tasarım vermekten daha fazlasını yapar. Ayrıca, yatay ve dikey hareket ofsetlerinin daha hassas kaydırma efektleri için kullanılabileceğine de işaret ediyor.
Ofsetleri değiştirerek ve görüntülerin konumlarını karıştırarak bu düzenin farklı çeşitlemelerini keşfetmekten çekinmeyin.
Sütun / görüntü boyutunun nasıl değişeceğini ve ardından kaydırma efekti ofsetlerini karşılık gelen değerle nasıl güncelleyeceğinizi anladığınız sürece sütun sayısını da değiştirebilirsiniz.
Önerilen Bazı Kaynaklar
Muhtemelen bunları bulacaksınız kaynakların bulunduğu ilginç çünkü aynı zamanda fotoğraf galerileri oluşturmanıza da izin verecekler. WordPress blog.
- WordPress'te Fotoğraf Galerileri Oluşturmak için 10 Eklenti
- Envira eklentisi ile fotoğraf galerisi nasıl oluşturulur
- Fotoğraf galerileri oluşturmak için 5 WordPress eklentileri
- Divi'de resim galerisi modülü nasıl kullanılır
