Divi'de Dinamik 3D Mousemove Animasyon Efekti Nasıl Oluşturulur

Dinamik bir 3D fare hareketi animasyonu oluşturmak, kullanıcıların Divi sitenizdeki web içeriğiyle etkileşim kurması için eğlenceli ve heyecan verici bir yoldur. Tasarım, animasyonun imlecinizle birlikte hareket etmesi açısından dinamiktir. Normalde, üzerine gelindiğinde veya tıklandığında nesneleri canlandırıyoruz. Ancak bu eğitimde, fareyi hareket ettirerek nesneleri canlandırmanın yaratıcı bir yolunu tanıtacağız (imlecinizi tarayıcı penceresinde çeşitli konumlarda hareket ettirerek). Ama hepsi bu değil. Ayrıca, içeriğinizi yepyeni bir şekilde hayata geçirecek öğelerin 3B bir tasarımda ortaya çıkmasını sağlayan fareyle hareket ettirme animasyonunu fareyle üzerine gelme efektiyle nasıl birleştireceğinizi göstereceğiz.

İnşa etmek için tasarımın büyük kısmı için Divi oluşturucuyu kullanacağız. Ardından, animasyon işlevselliğini oluşturmak için bazı özel CSS ve JQuery kullanacağız.

Bir kez bittiğinde, bir sonraki projenizde yeni ürün veya hizmetleri öne çıkarmak için etkileyici bir tasarıma sahip olacaksınız!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Efektin canlı bir demosunu görmek için bu kod kalemine de göz atabilirsiniz.

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.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

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.

Divi'de Dinamik 3D Mousemove Animasyon Efekti Oluşturma

Bölüm 1: Bir Satır ve Bir Sütun ile Hover Konteyneri ve Kartı Oluşturma

Bu animasyon efekti için satır, üzerine gelindiğinde 3d animasyonu etkinleştiren hedef olacaktır. Buna vurgulu kapsayıcı diyebiliriz. Sütun, satırın üzerine gelindiğinde alt öğeleriyle birlikte hareket edecek olan kartımız görevi görecektir.

Ancak satırı ve sütunu oluşturmadan önce, bölüme stil verelim.

Bölüm

Başlamak için, varsayılan normal bölümün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: rgba(68,55,99,0.1)

• Dolgu: 7vh üst, 7vh alt

Satır (Vurgulu Kapsayıcı)

Bölüme tek sütunlu bir satır ekleyin.

Satır Ayarları

Satır ayarları altında aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %70 (masaüstü), %60 (tablet), %50 (telefon)
• Dolgu: 7vh, üst, 7vh alt, 5vw sol, 5vw sağ

NOT: Buradaki hile, imleci tüm satır alanı (sütun değil) etrafında hareket ettirerek kartın fare hareketi animasyonunu devreye sokabilmeniz için sütunu çevreleyen yeterli alana sahip bir satır oluşturmaktır. Bu şekilde kartı hareket ettirmek için daha fazla alana sahip olabilirsiniz. Ayrıca, animasyonu devre dışı bırakmak ve kart öğelerinin yerine oturmasını sağlamak için imleci satırın dışına (satırı çevreleyen bölüm alanına) hareket ettirebilmeniz için satırın etrafında yeterli boşluk bırakmak istersiniz.

Gelişmiş sekmesi altında, satıra özel bir sınıf verin:

• CSS Sınıfı: et-hover-konteyner

Ardından aşağıdaki CSS'yi Ana Öğeye ekleyin:

display:flex;
align-items:center;
justify-content:center;

Bu küçük snippet, sütunu satır içinde dikey ve yatay olarak ortalanmış halde tutar (sütunumuza bir maksimum genişlik seti vereceğimiz için gereklidir).

Sütun (veya Kart)

Satırı güncelledikten sonra, kartımızın stilini aşağıdaki gibi oluşturmak için sütunun ayarlarını açın:

• Arka Plan Rengi: #ffffff

• Dolgu: 7vh üst, 7vh alt, %5 sol, %5 sağ
• Yuvarlatılmış Köşeler: 30px

• Kutu Gölgesi: ekran görüntüsüne bakın
• 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ş sekmesi altında, sütuna özel bir sınıf verin:

• CSS Sınıfı: et-mousemove-kartı

Ardından bu özel CSS'yi Ana Öğeye ekleyin:

max-width: 600px;

Ardından, taşma özelliklerini "görünür" olarak ayarladığınızdan emin olun.

• Yatay Taşma: görünür
• Dikey Taşma: görünür

NOT: Sütuna maksimum 600 piksellik bir genişlik verilmesi, tasarımın farklı tarayıcı boyutlarında daha tutarlı olmasını sağlar ve ayrıca, vurgulu kapsayıcı (veya satır) için sütunun etrafındaki vurgulu alan miktarını artırır. Eklediğimiz kenarlık yarıçapı (yuvarlak köşeler) taşmayı gizleyeceği için taşmayı görünür olarak ayarlamamız gerekiyor. Bunu yapmazsak, animasyon beklendiği gibi çalışmayacaktır.

Bölüm 2: Kart Öğelerini Oluşturma

#1 Logolu Daire Arka Planı

Kartımızdaki ilk öğe için, bisiklet resmimizin arkasına oturacak bir logo içeren bir daire arka planı ekleyeceğiz.

Sütuna yeni bir metin modülü ekleyin.

Gövde içeriğinin boş olması için varsayılan metni çıkarın.

Ardından bir degrade arka planı ekleyin:

• Degrade Arka Plan Sol Renk: #443763
• Degrade Arka Plan Sağ Renk: #ea3900

Degrade arka plana ek olarak, arka plan görüntüsü için bir logo ekleyin.

• Arka Plan Resmi: [60px x 60px olan herhangi bir png logosu resmi ekleyin]
• Arka Plan Resmi Boyutu: Gerçek Boyut

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Genişlik: 160 piksel (masaüstü), 150 piksel (tablet), 80 piksel (telefon)
• Yükseklik: 160 piksel (masaüstü), 150 piksel (tablet), 80 piksel (telefon)
• Yuvarlatılmış Köşeler: %50

Eşleşen genişlik ve yükseklik değerleri ve %50 sınır yarıçapı bize aradığımız daire şeklini verir.

Gelişmiş sekmesi altında, konumu aşağıdaki gibi güncelleyin:

• Pozisyon: Mutlak
• Yer: Üst Merkez
• Dikey Ofset: %15

#2 Kart Resmi

Ürün (bu durumda bir bisiklet) resmi oluşturmak için önceki metin modülünün altına yeni bir resim modülü ekleyin.

Ardından görüntüyü modüle yükleyin. Saydam bir arka plana sahip png formatında bir resim olduğundan emin olun. Bisiklet tamir düzeni paketimizdeki bisiklet resmini kullanıyorum.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Görüntü Hizalama: Merkez
• Genişlik: %90
• Marj: 4vh alt

Gelişmiş sekmesi altında, görüntüye özel bir sınıf verin:

• CSS Sınıfı: et-kart-görüntü

#3 Kart Başlığı

Görselimiz yerindeyken, kart başlığımızı oluşturmak için altına yeni bir metin modülü ekleyin.

Yeni metin modülünün gövde içeriğine aşağıdaki H2 başlık HTML'sini yapıştırın:

<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2>

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Başlık 2 Yazı Tipi: Bebas Neue
• Başlık 2 Metin Hizalama: orta
• Başlık 2 Metin Rengi: #443763
• Başlık 2 Metin Boyutu: 75px (masaüstü), 60px (tablet), 45px (telefon)
• Başlık 2 Harf Aralığı: 0.05em
• Marj: 4vh alt

Gelişmiş sekmesi altında özel bir sınıf ekleyin:

• CSS Sınıfı: et-kart başlığı

#4 Kart Bilgi Metni

Başlık ve bilgi metni için ayrı metin modülleri kullanmak, her birine farklı 3d animasyon efektleri eklememizi sağlayacaktır. Başlık altında bilgi metni oluşturmak için başlık metin modülü altına yeni bir metin modülü ekleyin.

Ardından aşağıdaki içeriği gövdeye ekleyin:

<p>The One and Only Divi Bike<br>(By Elegant Themes)</p>

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Metin Boyutu: 18px (masaüstü), 16px (tablet ve telefon)
• Metin Satır Yüksekliği: 1.8em
• Metin Hizalama: orta
• Marj: 4vh

Ardından metin modülüne özel bir sınıf verin:

• CSS Sınıfı: et-kart bilgisi

#5 Kart Düğmesi

Kart için buton oluşturmak için bilgi metin modülünün altına yeni bir buton modülü ekleyin.

Düğme ayarları modunda düğme metnini güncelleyin.

• Düğme Metni: bir teklifte bulunun

Tasarım sekmesi altında, düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 25px (masaüstü), 20px (tablet), 16px (telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #443763
• Düğme Kenar Genişliği: 0px
• Düğme kenarlığı Yarıçapı: 30 piksel
• Düğme Harf Aralığı: 0.1em
• Düğme Yazı Tipi: Bebas Neue
• Dolgu (masaüstü): 0,5em üst, 0,5em alt, 3em sol, 3em sağ
• Dolgu (telefon): 0,5em üst, 0,5em alt, 2em sol, 2em sağ

Ardından düğmeye özel bir sınıf verin:

• et-kart-düğmesi

Sonuç Şimdiye Kadar

İşte şimdiye kadar tasarımın sonucu.

Şimdi, tek ihtiyacımız olan bazı özel Kod.

Bölüm 3: Özel Kodu Ekleme (CSS ve JQuery)

Artık tasarımımız tamamlandığında, dinamik 3d fare hareketi animasyon efektini oluşturmak için gereken CSS ve JQuery kodunu kart/sütun ve kart öğelerine ekleyebiliriz.

Bunu yapmak için düğme modülünün altına bir kod modülü ekleyin.

Ardından, CSS'yi stil etiketlerine sardığınızdan emin olarak aşağıdaki özel CSS'yi kod kutusuna yapıştırın.

/*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;
}

CSS'nin altına, kodu komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery'yi yapıştırın.

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)`);
});
});

Kod Hakkında

CSS

3B konumlu öğelerimizi (sütun ve modüller) vermek için satırda (veya vurgulu kapsayıcıda) perspektif CSS özelliğini kullanmamız gerekir.

.et-hover-container {
perspective: 1000px;
}

Daha sonra, bu kart elemanlarının, transform-style özelliğini koru-3d değeriyle kullanarak 3B uzayda konumlandırıldığından emin olmamız gerekir.

.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}

Daha sonra kart elemanları canlandırıldığında geçiş zamanlama fonksiyonunu ve süresini ayarlıyoruz.

.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}

Son olarak, satırın üzerine geldiğimizde ve her öğeye transform-3d sınıfı eklendiğinde popout efekti oluşturan öğeleri z ekseninde hareket ettirmek için translateZ işleviyle transform özelliğini kullanırız.

.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;
}

JQuery

İlk olarak, öğeleri özel sınıflarına göre hedeflemek için gereken tüm değişkenleri bildiririz.

//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");

Ardından, mousemove olayını tarayıcı penceresinin hem X hem de Y ekseni için imlecin konumunu hesaplayan ve ardından mousemove kartını (veya sütununu) X ve Y olarak döndüren bir işlevle satıra (veya vurgulu konteynere) ekleriz. değerler dinamik olarak değişir.

//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)`
);
});

Kart elemanlarını Z uzayında hareket ettiren transform CSS'yi (translateZ ile) etkinleştirmek için, satırın (veya fareyle üzerine gelme kabının) üzerine gelindiğinde transform-3d sınıfını her elemana değiştiririz.

//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");
});

Daha sonra, 0 dereceye döndürmeY ve döndürmeX işlevleriyle bir CSS dönüştürme özelliği ekleyen bir işlevle mouseleave olayını satıra eklememiz gerekir. Bu, imleç satırın dışına çıktığında sütunu (veya kartı) yerine oturtur.

//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});

Son sonuç

Nihai sonucu kontrol edin!

Efektin canlı bir demosunu görmek için bu kod kalemine de göz atabilirsiniz.

Son düşünceler

Bu öğreticide oluşturduğumuz dinamik 3d fare hareketi animasyon efekti, kolayca öğrenilebilen ve keşfetmesi heyecan verici benzersiz ve gelişmiş animasyon efektleri içerir. Kullanıcıların tasarımla etkileşime girmesini sağlayan mousemove animasyonu, birkaç satırlık JQuery ile yapılabilir. Ve 3B fareyle üzerine gelme efektleri, kolayca öğrenilebilen birkaç CSS özelliğine dayanır. Sonuç olarak, Divi gibi güçlü bir sayfa oluşturucuyu JQuery'nin büyüsü ile birleştirmenin pek çok olasılığı vardır. Umarım, bu sizin için kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!