Divi Oluşturucu yardımıyla birçok benzersiz ve yaratıcı tasarım yapabiliriz. Bugün, fare imlecinin hareketiyle etkileşimli olan Divi görsel sayfa oluşturucuyu kullanarak dinamik bir 3D animasyonun nasıl oluşturulacağını göreceğiz. Genellikle, bir nesnenin üzerine vurgu yaparız veya animasyonu tıklarız, ancak burada fare hareketiyle farklı yönlerde hareket edecek bir nesneyi canlandıracağız. Ayrıca, etkileşimli animasyon gerçekleştiren ve tasarıma hayat veren bir nesneye nasıl gezinici bir 3D efekti ekleyeceğinizi göreceksiniz!
Tasarım için Divi oluşturucu kullanacağız ve daha sonra, tasarımı canlı hale getirecek animasyon işlevselliğini oluşturmak için bazı CSS ve jQuery kodu ekleyeceğiz! Ürünlerinizi ziyaretçilerinize yeni bir şekilde göstermek için bu tasarımı kullanabilirsiniz!
Son Tasarım
Her şey planladığımız gibi giderse, son tasarımımız buna çok benzeyecek.
Divi Üzerinde Dinamik 3D Mousemove Efekti Oluşturma
Görev 1: Sayfa Yapısı
Web sayfanızda bu etkiyi oluşturmak istediğinizden, Divi'nin en son sürümünü zaten yüklediğinize inanıyoruz. Şimdi, panodan "Sayfa ekle", istediğiniz gibi başlık ve Divi oluşturucu ile genişletin.
Harika Web Siteleri Oluşturun
En iyi ücretsiz sayfa oluşturucu Elementor ile
Şimdi başla
Şimdi "Sıfırdan oluştur" u seçin ve ahed'i başlatın.
Görev 2: Vurgulu Kapsayıcı ve Kart Oluşturma
3D animasyonu hover'da etkinleştirmek için satırı hedefleyeceğiz. Buna "Hover konteyneri" diyeceğiz. Öte yandan, sütun, satırın üzerine gelindiğinde alt öğelerle hareketlenecek bir Kart görevi görür.
Section Styling
Varsayılan bölüm ayarlarını açın ve aşağıdakileri güncelleştirin
- Arka Plan Rengi - RGBA(68,55,99,0.1). Burada 0.1 opaklıktır.
- Hem üstüne hem de altına "7vh" dolgu ekleyin.
Hover Container
Şimdi hazırlanan bölüme tek sütunlu bir satır ekleyin.
Şimdi aşağıdaki değişikliklerle satır ayarını güncelleştirin.
- "Özel oluk genişliği"ni etkinleştirin ve değeri 1 olarak değiştirin
- Genişlik %100
- Maksimum Genişlik: %70 (masaüstü), %60 (tablet), %50 (mobil)
- Dolgu: Üstte ve altta 7vh, solda ve sağda 5vw.
Gelişmiş sekmesinin altına özel bir CSS Sınıfı ekleyin.
- CSS Sınıfı: et-hover-container
Ayrıca, CSS kodunu ana öğeye ekleyin.
display:flex;
align-items:center;
justify-content:center;
The Card
Satır güncelleştirmesini bitirdikten sonra, kartı stil olarak ayarlamak için sütunun ayarını açın.
- Arka Plan Renk #ffffff
- Dolgu: 7vh üst, 7vh alt, 5% sol, 5% sağ
- Yuvarlatılmış Köşeler: 30px
- Kutu Gölgesi: Bkz. ekran görüntüsü
- Kutu Gölge Dikey Konumu: 0px
- Kutu Gölge Bulanıklığı Gücü: 80px
- Gölge Rengi: rgba(0,0,0,0.2)
Gelişmiş sekmesinin altına özel bir CSS Sınıfı ekleyin.
- CSS Sınıfı: et-mousemove-card
Ayrıca, bu CSS kodunu ana öğenin altına ekleyin.
max-width: 600px;
Şimdi taşma özelliklerini hem yatay hem de dikey taşma için görünür olacak şekilde ayarlayın.
Görev 3: Kart öğesini oluşturma
The Circle Background With Logo
Kartımızın ilk unsuru için, ana ürün imajımızın arkasına oturacak logomuzu içeren bir daire arka planı ekleyeceğiz.
Şimdi sütuna "Metin" ekleyin ve gövdeyi boş tutmak için varsayılan metni kaldırın.
Degrade arka plan ekleme zamanı.
- Degrade Arka Plan Sol Renk #443763
- Degrade Arka Plan Sağ Renk #EA3900
- Degrade Yönünü 90 dereceye ayarlayın
Degrade rengiyle birlikte arka plan resmi olarak bir logo ekleyin. Görüntü boyutu 60 piksele 60 piksel olmalı ve arka plan görüntü boyutu değerini "Gerçek Boyut" olarak ayarlamalıdır
"Tasarım" sekmesinde, "Boyutlandırma" bölümünde değerleri aşağıdaki gibi değiştirin. Masaüstü için 160px, tablet için 150px ve akıllı telefon için 80px genişlik değerini ayarlayın.
Ayrıca, yükseklik değerini genişlik ile aynı şekilde ayarlayın. Son olarak, yuvarlatılmış köşeleri "Kenarlık" bölümünün altında %80 değere ayarlayın.
"Gelişmiş" sekmesinde, pozisyonları aşağıda verildiği gibi güncelleyin.
- Konum : Mutlak
- Yer : Üst Merkez
- Dikey Ofset : 15%
The Card Image
Şimdi, logo kısmıyla işimiz bittiğinden, karta ürün görüntüsünü ekleyelim. Önceki metin modülünün altına yeni bir görüntü modülü ekleyeceğiz.
Şimdi ürünün bir görüntüsünü yükleyin. Görüntünün saydam ve Png biçiminde olduğundan emin olun. Burada, kırmızı bir Ferrari'nin görüntüsünü kullanıyoruz.
"Tasarım" sekmesinde, aşağıda belirtildiği gibi değerleri değiştirin.
- Görüntü Hizalama: Ortala
- Genişlik: 90%
- Marj: 12vh üst ve 5vh alt (değerleri ihtiyacınıza göre ayarlayın)
"Gelişmiş" sekmesi bölümünde, görüntü için özel bir CSS Sınıfı ekleyin.
- CSS Sınıfı: et-card-image
The Car Heading
Şimdi Kart için bir başlık oluşturacağız. Araba resmimiz yerindeyken, kart başlığımızı oluşturmak için görüntünün altına bir metin modülü ekleyelim.
Gövdede, varsayılan metni kaldırın ve aşağıda verilen HTML'nin H2 başlığını ekleyin.
<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>
Şimdi, tasarım bölümünde aşağıdaki değerleri değiştirin:
- Başlık 2 Yazı Tipi : Bebas Neue
- Başlık 2 Metin Hizalaması : Orta
- Başlık 2 Metin Rengi: #443763
- Başlık 2 Metin Boyutu : Masaüstü için 75 piksel, tablet için 60 piksel ve mobil için 45 piksel.
- Başlık 2 Harf Aralığı : 0.05em
- Kenar Boşluğu : Altta 4vh
"Gelişmiş bölüme" özel bir CSS sınıfı ekleme
- CSS Sınıfı: et-kart başlığı
The Card Info
Şimdi kart hakkındaki bilgileri ekleyeceğiz. Bilgi için başka bir metin modülü ekleyeceğiz, çünkü bu her birine farklı 3D animasyon efektleri eklememize izin verecek. Başlık metin modülünün altına yeni bir metin modülü ekleyelim.
Şimdi aşağıdaki metin içeriğini gövdeye ekleyin.
<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>
Tasarım sekmesinin altında aşağıdakileri güncelleştirin:
- Metin Yazı Tipi Ağırlığı : Yarı Kalın
- Metin Boyutu : 18 piksel (masaüstü) ve 16 piksel (tablet ve telefon.)
- Metin Satırı Yüksekliği : 1.8em
- Metin Hizalaması : Ortala
- Marj : 4vh
Şimdi bu modüle özel bir CSS sınıfı ekleyin.
- CSS Sınıfı: et-card-info
The Button
Şimdi bilgi metin modülünün altına yeni bir düğme modülü ekleyin. Bu karta bir düğme ekler.
Düğme ayarlarının "İçerik" sekmesinde Düğme metnini değiştirin.
- Düğme Metni: Teklif yapın.
"Tasarım" sekmesinde, düğmeyi aşağıda belirtildiği gibi şekillendirin.
- Düğme için Özel Stiller Kullan: EVET
- Düğme Metin Boyutu: 25 piksel (masaüstü), 20 piksel (tablet), 16 piksel (telefon)
- Düğme Metni Rengi: #ffffff
- Düğme Arka Plan Rengi: #443763
- Düğme Kenarlığı Genişliği: 0px
- Düğme kenarlığı Yarıçapı: 30px
- Düğme Harfi Aralığı: 0.1em
- Düğme Yazı Tipi: Bebas Neue
- Doldurma (masaüstü): 0.5em üst, 0.5em alt, 3em sol, 3em sağ
- Dolgu (telefon): 0.5em üst, 0.5em alt, 2em sol, 2em sağ
Şimdi özel bir CSS sınıfı ekleyin
- CSS Sınıfı: et-card düğmesi
Result Till Now
İşte animasyonsuz son tasarım çıktımız.
Şimdi bu tasarıma hayat vermek için bazı özel kodlar ekleyeceğiz.
Görev 4: CSS ve JQuery Özel Kodu Ekleme
Tasarımımız tamamlandığından, şimdi dinamik bir 3D fare hareketi animasyon efekti vermek için yeni oluşturulan sütunlarımıza ve kart öğelerimize vermek için CSS ve JQuery kodu ekleyeceğiz.
Bunu yapmak için düğme modülünün altına yeni bir kod modülü ekleyin.
Verilen özel CSS kodunu kutuya yapıştırın ve kodu "Stil" etiketine sardıp sarmalamayı unutmayın.
<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>CSS kodu, Kod modülünün içerik sekmesi altında böyle görünecektir.
CSS'nin altına aşağıdaki JQuery'yi ekleyin ve kodun "Komut Dosyası" etiketlerinin içinde olduğundan emin olun.
<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>
Aşağıdaki kod, kod panelinde böyle görünmelidir.
Şimdi tüm çalışmayı kaydedin ve tüm çalışmayı canlı bir sayfada kontrol edin.
Son Çıktı
Yani tüm tasarımımız böyle görünüyor. Çok güzel, değil mi?
Son Sözcükler
Bugünün öğreticisinde gördüğümüz 3D animasyonu öğrenmek çok kolay ve eğlenceli. Bu, fare hareketi tarafından kontrol edilebilen benzersiz ve gelişmiş bir animasyon efektidir. Bunu bazı basit CSS ve JQuery kodlaması ile tasarlayabiliriz. Kuşkusuz, Divi güçlü bir sayfa oluşturucudur ve özelleştirilmiş kodlama sayesinde web sitelerine büyülü bir tasarım getirmek mümkündür.
