Divi'de 3D Hareket Kaydırma Efektleri Nasıl Oluşturulur

Divi web sitenize 3D Hareket Kaydırma Efektleri ekleme, birkaç güçlü yerleşik Divi özelliğini birleştirerek kolayca yapılabilir – kaydırma efektleri ve dönüş döndürme. Fikir aslında basit. Kaydırma efektlerini kullanarak öğeleri yatay veya dikey olarak hareket ettirmeden önce, dönüşümü döndürmeyi kullanarak öğenin kapsayıcısını döndürürüz. Bu, hareketin (kaydırmada) 3B uzayda bir düzlemde gerçekleşmesine izin verir.

Bu eğitimde, Divi web sitenize 3B hareketli kaydırma efektlerini nasıl ekleyeceğinizi göstereceğiz. Bunu yapmak için, 3D hareketli kaydırma efekti gösteren iki tasarım örneği içeren basit bir sayfa düzeni oluşturacağız.

Başlayalım!

Gizlice Bakış

İşte birlikte inşa edeceğimiz tasarıma 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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Açıklanan Konsept

Divi'de 3D Motion Scroll Efektleri oluşturmak gerçekten üç adımdan oluşur:

1. Satıra Perspektif Ekle
2. Sütuna Dönüştürme Dönüşü Ekle
3. Modül(ler)e Kaydırma Efektleri Ekleyin

İşte bunun nasıl yapılacağına hızlı bir bakış…

Satıra Perspektif Ekle

Satır ayarları için, alt öğe döndürüldüğünde öğenin kullanıcıdan/ekrandan 3B alanda ne kadar uzakta görünmesini istediğinizi belirleyen bir değerle perspektif ekleyen özel bir CSS parçacığı ekleyin.

Sütuna Dönüştürme Dönüşü Ekle

Ardından, X veya Y Ekseni boyunca dönüştürme döndürme seçeneğine bir derece değeri ekleyerek sütuna döndürme ekleriz.

Modüle Kaydırma Efektleri (hareket) ekleyin

Son olarak, modülü 3d uzayda döndürülen düzlem boyunca hareket ettirecek olan sütun içindeki modüle kaydırma efektleri ekliyoruz. Başka bir deyişle, modül kullanıcıdan “uzaklaşıyor” ve “doğru” görünüyor.

Aşağıdaki bu eğitim için tasarımımızı ele alırken bunu aklınızda bulundurun.

Hadi dalalım.

Bölüm 1: Bir Başlığa ve Görüntüye 3B Döndürme ve Hareket Ekleme

Tasarımın bu ilk kısmı için, sahte bir başlığa ve bir resme 3B döndürme ekleyeceğiz. Bu, bir ürünü veya vaka çalışmasını benzersiz bir şekilde öne çıkarmak için harika bir tasarım olacaktır.

Bölüm ve Satır Ekle

Başlamak için, sağlanan varsayılan normal bölüme tek sütunlu bir satır ekleyin.

Bölüm Dolgusu

Herhangi bir modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

• Dolgu: 40vh üst

Bu, başlık metnini dikey olarak (az ya da çok) ortalar ve ayrıca kaydırma efektlerinin oluşması için bize yer verir.

Satıra Perspektif Ekle

Daha gerçekçi bir 3D tasarım için 3D uzayda döndüreceğimiz elementin parent container'ına perspektif eklememiz gerekiyor. Bu örnek için sütunu döndüreceğiz, bu yüzden satıra perspektif eklememiz gerekiyor. Bunun nasıl çalıştığına dair daha ayrıntılı bir açıklama için, dönüştürme seçenekleriyle perspektifin nasıl kullanılacağına ilişkin yazımıza göz atın.

Satıra perspektif eklemek için satır ayarlarını açın ve aşağıdaki CSS'yi Ana Öğeye ekleyin:

perspective: 500px

Metin Modülü Ekle

Satıra perspektif eklendikten sonra, sütuna yeni bir metin modülü ekleyin.

Metin içeriği

Ardından metin içeriğini aşağıdaki h1 başlığıyla güncelleyin:

<h1>Our Recent Work</h1>

Metin Tasarım Ayarları

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

• Başlık Yazı Tipi: Raleway
• Başlık Yazı tipi ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metni Boyutu: 6vw

Resim Modülü Ekle

Metin yerleştirildikten sonra metnin altına yeni bir resim modülü ekleyin.

Fotoğraf yükleniyor

Bu tasarım için, Web Freelancer Layout Pack'ten alınan bir web sayfasının sahte ekran görüntüsünü kullanacağız. Resim 880 piksele 1260 pikseldir. Sütunu döndürdüğümüzde görüntünün boyutu kesinlikle 3D tasarımı etkileyecektir, böylece aynı sonuçları elde etmek için kullandığınız görüntü için benzer boyutları kullanmaya çalışın.

Görüntü Ayarları

Görüntü ayarlarını aşağıdaki gibi güncelleyin:

• Görüntü Hizalama: Merkez
• Yükseklik: 600 piksel
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 60px
• Gölge Rengi: rgba(0,0,0,0.2)

Sütunu Döndürme

Katmanlar kutusunu açın ve ardından sütun için ayarları açın.

Metnimiz ve resmimiz yerindeyken, artık sütunu 3B alanda döndürebiliriz. Bunu yapmak için katmanlar kutusunu açın ve ardından sütun için ayarları açın.

Ardından aşağıdaki sütun ayarlarını güncelleyin:

• Kökeni Dönüştür: üst merkez

Şimdi sütuna dönüşüm rotasyonunu aşağıdaki gibi ekleyelim:

Dönüştürme döndürme sekmesinin altında…

• Dönüştür Y eksenini döndür: 30 derece

Metin Kaydırma Efektleri

Artık öğeler veya 3B uzayda döndürüldüğünden, sütunumuzdaki öğelerin her birine kaydırma efektleri ekleyebiliriz. Başlamak için, metin modülünün ayarlarını açın ve aşağıdakileri ekleyin:

Dikey Hareket sekmesi altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -4 (%0 görünüm alanında)
• Orta Ofset: 0 (%50 görünüm alanında)
• Bitiş Ofseti: 4 (%100 görünüm alanında)

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %100 (%0 görünüm alanında)
• Orta Ölçek: %100 (%50 görünüm alanında)
• Bitiş Ölçeği: %50 (%100 görünüm alanında)

Görüntü Kaydırma Efektleri

Ardından, görüntü modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

Dikey Hareket sekmesi altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0 (%0 görünüm alanında)
• Orta Ofset: 0 (%0 görünüm alanında)
• Bitiş Ofseti: -6.5 (%100 görünüm alanında)
• Hareket Efekti Tetikleyicisi: Elemanın Başı

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %130 (%0 görünüm alanında)
• Orta Ölçek: %100 (%50 görünüm alanında)
• Bitiş Ölçeği: %50 (%100 görünüm alanında)

Şimdi 3B hareket kaydırma efektinin 1. bölümünün sonucunu kontrol edelim.

Bölüm 2: Görüntülere ve Sütunlarına 3B Döndürme ve Hareket Ekleme

Bu öğreticinin 2. bölümünde, kaydırma sırasında her ikisi de 3B uzayda hareket eden bir resim ve sütun içeren içerik içeren birkaç satır oluşturacağız.

Bölüm ve Sütun Ekle

İlk olarak, düzene yeni bir normal bölüm ekleyin.

Ardından bölüme iki sütunlu yeni bir satır ekleyin.

Satır Ayarları

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Kenar boşluğu: 200 piksel alt
• Dolgu: 0 piksel üst, 0 piksel alt

Ardından satıra bir kutu gölgesi verin:

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Dikey Konumu: 40px
• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.2)

Ardından, daha önce olduğu gibi, ana öğeye aşağıdaki CSS'yi ekleyerek satıra perspektif eklememiz gerekiyor:

perspective: 1000px

Bu sefer efektin çok şiddetli olmaması için “1000 piksel” kullanıyoruz (nesne ekrandan sadece 500 piksel yerine 1000 piksel uzakta görünecektir).

Sütun 1 Ayarları

Satıra perspektif eklendikten sonra, 1. sütun için ayarları açın ve aşağıdakileri güncelleyin:

• Gradyan Arka Planı Sol Renk: rgba(0,13,255,0.53)
• Degrade Arka Plan Sağ Renk: #000dff
• Gradyan Yönü: 35deg
• Dolgu: %5 sol, %5 sağ

Dönen Sütun 1

Sütuna arka plan gradyanı eklendikten sonra, aşağıdaki dönüştürme seçeneğini ekleyin:

• Dönüştür X Eksenini Döndür: 30deg

Sütun 1 Kaydırma Efektleri

Bu sefer, sütuna kaydırma efektleri de ekleyeceğiz.

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 4 (%0 görünüm alanında)
• Orta Ofset: 0 (%40-60 görünüm alanında)
• Bitiş Ofseti: -4 (%100 görünüm alanında)

Sütun 1'e Resim Ekle

Ardından, sütun 1'e bir görüntü modülü ekleyin.

Ardından modül için yeni bir resim yükleyin.

Görüntü Tasarımı

Ardından görüntü ayarlarını aşağıdaki gibi güncelleyin:

• Görüntü Hizalama: Merkez
• Kenar boşluğu: -20 piksel üst, -20 piksel alt
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: -40px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 40px
• Gölge Rengi: rgba(0,0,0,0.2)

Özel kenar boşluğu, görüntünün sütunun üstünde ve altında güzel bir şekilde uzanmasını sağlar. Ve kutu gölgesi sütundan bir miktar ayrılma yaratır.

Görüntü Kaydırma Efektleri

Şimdi, arkasındaki sütuna eklenmiş efektleri tamamlayan kaydırma efektlerini görüntüye ekliyoruz.

Dikey Hareket sekmesi altında…

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 4 (%0 görünüm alanında)
• Orta Ofset: 0 (%40-60 görünüm alanında)
• Bitiş Ofseti: -4 (%100 görünüm alanında)

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -4 (%0 görünüm alanında)
• Orta Ofset: 0 (%40-60 görünüm alanında)
• Bitiş Ofseti: 4 (%100 görünüm alanında)

İşte şimdiye kadarki sonuç…

Doğru Sütun İçeriğini Oluşturma (Opsiyonel)

Bu sonraki adım isteğe bağlıdır çünkü 3B öğeler veya kaydırma efektleri içermez. Ancak, düzenin tasarımını tamamlar.

Sağ sütunda, mizanpaj için sahte içeriği oluşturacak yeni bir metin modülü ekleyeceğiz. Devam edin ve 2. sütuna yeni bir metin modülü ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Poppins
• Metin Metin Rengi: rgba(0,0,0,0.4)
• Metin Metin Boyutu: 16px
• Metin Satır Yüksekliği: 1.9em
• Kenar boşluğu: 30 piksel alt

• Başlık 2 Yazı Tipi: Raleway
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 48px
• Başlık 2 Çizgi Yüksekliği: 1.5em

Buton

Metin modülünün altına yeni bir düğme modülü ekleyin.

Düğme Tasarımı

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

• Düğme Metin Rengi: beyaz
• Düğme Arka Plan Rengi: #29cb8b
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 2px
• Düğme Yazı Tipi: Poppins
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: TT

Sütun 2 Dolgusu

Metin tasarlandıktan sonra, aşağıdakileri güncelleyerek sütuna biraz dolgu ekleyin:

• Dolgu: 40 piksel üst, 40 piksel alt, 40 piksel sol, 40 piksel sağ

Bu, ilk öne çıkan içerik satırımızla ilgilenir. İşte nasıl görünmesi gerektiği.

Kaydırma efektleri de var, ancak bunu test etmeden önce, bunun altına başka bir ücretsiz öne çıkan içerik satırı ekleyelim.

Öne Çıkan İçerik Ekleme 2. Satır

Satırı Çoğalt ve Sütunları Değiştir

Sonraki öne çıkan içerik satırını oluşturmak için önceki satırı çoğaltın.

Bu, satırın ve onunla birlikte tüm içeriğin bir kopyasını oluşturacaktır.

Tasarımda daha fazla denge oluşturmak için sol sütunu sağa getirerek sütun konumlarını değiştirin (veya tam tersi). Bunu, üst sütunu alt sütunun altına sürükleyerek katmanlar görünümünde kolayca yapabilirsiniz.

Sütun 2'yi Dönüştürme Dönüşünü Güncelle

Artık 3B görüntü ve sütun veya sağ tarafta, dönüşüm dönüşünü ters yönde dönecek şekilde güncelleyin. Bunu yapmak için 2. sütunun ayarlarını açın ve aşağıdakileri güncelleyin:

• Dönüştür X Eksenini Döndür: -30 derece

Son tasarım

Bu kadar! Şimdi canlı bir sayfayı aşağı kaydırırken 3B hareket elemanlarımızın son tasarımını kontrol edelim.

Son düşünceler

Umarım bu makale, Divi web sitenize bazı 3B hareket kaydırma efektlerini nasıl ekleyeceğinizi göstermek için yardımcı olmuştur. Gerçekten üç basit adıma iner:

1. Satıra Perspektif Ekle
2. Sütuna Dönüştürme Dönüşü Ekle
3. Modül(ler)e Kaydırma Efektleri Ekleyin

Bundan sonra, sayısız diğer kombinasyondaki ayarları ve değerleri değiştirerek yeni tasarımları keşfederken biraz eğlenebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!