S pomočjo Divi Builderja lahko naredimo veliko unikatnih in kreativnih dizajnov. Danes bomo videli, kako ustvariti dinamično 3D animacijo s pomočjo Divi vizualnega graditelja strani, ki je interaktiven s premikanjem kazalca miške. Običajno izvajamo animacijo lebdenja ali klikanja na predmet, tukaj pa bomo animirali predmet, ki se bo premikal v različnih smereh s premikanjem miške. Tudi you’ boste videli, kako objektu, ki izvaja interaktivno animacijo, dodati lebdeči 3D učinek in oživiti dizajn!
Za oblikovanje bomo uporabili graditelj Divi , kasneje pa bomo dodali nekaj kode CSS in jQuery, da bomo ustvarili funkcionalnost animacije, ki bo zasnovo oživela! S tem dizajnom lahko svoje izdelke prikažete na nov način obiskovalcem!
Končni dizajn
Če bo šlo vse v redu, kot načrtujemo, bo naša končna zasnova izgledala zelo podobno.
Ustvarjanje dinamičnega 3D učinka Mousemove na Divi
Naloga 1: Nastavitev strani
Ker želite ustvariti ta učinek na svoji spletni strani, verjamemo, da ste že namestili najnovejšo različico Divi. Zdaj “Adodajte stran” z nadzorne plošče, jo poimenujte, kot potrebujete, in jo razširite z Divi builderjem.
Ustvarite neverjetna spletna mesta
Z najboljšim brezplačnim graditeljem strani Elementor
Začni zdaj
Zdaj izberite “Build From Scratch” in začnite.
2. naloga: Ustvarjanje kartice & vsebnika lebdenja
Če želite aktivirati 3D animacijo ob lebdenju, bomo ciljali na vrstico. Poimenovali ga bomo “Hover container”. Po drugi strani pa bo stolpec deloval kot kartica, ki bo med lebdenjem nad vrstico animirala z otroškimi elementi.
Razdelek Styling
Odprite privzete nastavitve razdelka in posodobite naslednje
- Barva ozadja - RGBA(68,55,99,0.1). Tukaj je 0,1 motnost.
- Dodajte oblazinjenje "7vh" tako na vrhu kot na dnu.
Posoda za lebdenje
Zdaj dodajte vrstico z enim stolpcem v pripravljen odsek.
Zdaj posodobite nastavitev vrstice z naslednjimi spremembami.
- Omogočite "Custom gutter width" in spremenite vrednost na 1
- Širina 100%
- Največja širina: 700 x 025 (namizni računalnik), 600 x 025 (tablični računalnik), 500 x 025 (mobilni)
- Oblazinjenje: 7vh zgoraj in spodaj, 5vw levo in desno.
Pod zavihkom Napredno dodajte razred CSS po meri.
- Razred CSS: et-hover-container
Prav tako dodajte kodo CSS glavnemu elementu.
display:flex;
align-items:center;
justify-content:center;
Kartica
Ko končate s posodabljanjem vrstice, odprite nastavitev za stolpec, da oblikujete kartico.
- Barva ozadja #ffffff
- Oblazinjenje: 7vh zgoraj, 7vh spodaj, 5% levo, 5% desno
- Zaobljeni vogali: 30 slikovnih pik
- Box Shadow: Glej posnetek zaslona
- Navpični položaj sence škatle: 0px
- Moč zamegljenosti sence škatle: 80 slikovnih pik
- Barva sence: rgba(0,0,0,0,2)
Pod zavihkom Napredno dodajte razred CSS po meri.
- Razred CSS: et-mousemove-card
Prav tako dodajte to kodo CSS pod glavni element.
max-width: 600px;
Sedaj nastavite lastnosti prelivanja na vidne za vodoravno in navpično prelivanje.
Naloga 3: Ustvarjanje elementa kartice
Ozadje kroga z logotipom
Za prvi element naše kartice bomo dodali ozadje kroga, ki vključuje naš logotip, ki bo sedel za našo glavno sliko izdelka.
Zdaj dodajte "Besedilo" v stolpec in odstranite privzeto besedilo, da ostane telo prazno.
Čas je, da dodate gradientno ozadje.
- Prelivna barva ozadja leva #443763
- Desna barva ozadja preliva #EA3900
- Nastavite smer preliva na 90 stopinj
Poleg barve preliva dodajte logotip kot sliko ozadja. Velikost slike mora biti 60 x 60 slikovnih pik in vrednost velikosti slike ozadja nastavite na "Dejanska velikost"
Na zavihku »Oblikovanje« spremenite vrednosti, kot sledi v razdelku »Velikost«. Nastavite vrednost širine 160px za namizje, 150px za tablico in 80px za pametni telefon.
Prav tako nastavite vrednost višine enako širini. Nazadnje nastavite zaobljene vogale na vrednost 80% pod razdelkom »Obroba«.
Na zavihku »Napredno« posodobite položaje, kot je navedeno spodaj.
- Položaj: Absolutno
- Lokacija: Top Center
- Navpični odmik: 15%
Slika kartice
Zdaj, ko smo končali z delom logotipa, dodajmo sliko izdelka na kartico. Pod prejšnji besedilni modul bomo dodali nov slikovni modul.
Zdaj naložite sliko izdelka. Prepričajte se, da je slika pregledna in v formatu PNG. Tukaj uporabljamo sliko rdečega ferrarija.
Na zavihku "Oblikovanje" spremenite vrednosti, kot je navedeno spodaj.
- Poravnava slike: središče
- Širina: 90%
- Marža: 12vh zgoraj in 5vh spodaj (prilagodite vrednosti glede na vaše potrebe)
V razdelku zavihka »Napredno« dodajte razred CSS po meri za sliko.
- Razred CSS: et-card-image
Naslov avtomobila
Zdaj bomo ustvarili naslov za kartico. Ko je naša slika avtomobila na položaju, dodajmo besedilni modul pod sliko, da ustvarimo naslov naše kartice.
V telesu odstranite privzeto besedilo in dodajte spodnji naslov H2 HTML-ja.
<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>
Zdaj v razdelku za načrtovanje spremenite naslednje vrednosti:
- Pisava naslova 2: Bebas Neue
- Poravnava besedila naslova 2 : na sredino
- Barva besedila naslova 2: #443763
- Velikost besedila naslova 2: 75 slikovnih pik za namizne računalnike, 60 slikovnih pik za tablične računalnike in 45 slikovnih pik za mobilne naprave.
- Razmik med črkami v naslovu 2: 0,05 em
- Marža: 4vh na dnu
V razdelku »Napredno« dodajte razred CSS po meri
- Razred CSS: et-card-heading
Informacije o kartici
Zdaj bomo dodali podatke o kartici. Za informacije bomo dodali še en besedilni modul, ker nam bo to omogočilo, da vsakemu od njih dodamo različne učinke 3D animacije. Dodajmo nov besedilni modul pod naslov besedilni modul.
Zdaj dodajte naslednjo besedilno vsebino v telo.
<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>
Na zavihku načrtovanje posodobite naslednje:
- Teža pisave besedila: polkrepko
- Velikost besedila: 18px (namizni računalnik) in 16px (tablični računalnik in telefon).
- Višina vrstice besedila: 1,8 em
- Poravnava besedila: na sredino
- Marža: 4vh
Zdaj dodajte razred CSS po meri temu modulu.
- Razred CSS: et-card-info
Gumb
Zdaj dodajte nov modul gumbov pod modul z besedilom z informacijami. To bo na kartico dodalo gumb.
Na zavihku »Vsebina« v nastavitvah gumbov spremenite besedilo gumba.
- Besedilo gumba: Ponudite ponudbo.
Na zavihku »Oblikovanje« oblikujte gumb, kot je navedeno spodaj.
- Uporabite sloge po meri za gumb: DA
- Velikost besedila gumba: 25 slikovnih pik (namizni računalnik), 20 slikovnih pik (tablični računalnik), 16 slikovnih pik (telefon)
- Barva besedila gumba: #ffffff
- Barva ozadja gumba: #443763
- Širina obrobe gumba: 0px
- Polmer obrobe gumba: 30 slikovnih pik
- Razmik med črkami gumbov: 0,1 em
- Pisava gumba: Bebas Neue
- Oblazinjenje (namizje): 0,5 em zgoraj, 0,5 em spodaj, 3 em levo, 3 em desno
- Oblazinjenje (telefon): 0,5 em zgoraj, 0,5 em spodaj, 2 em levo, 2 em desno
Zdaj dodajte razred CSS po meri
- Razred CSS: et-card-gumb
Rezultat Do zdaj
Tukaj je naš končni rezultat oblikovanja brez animacije.
Zdaj bomo dodali nekaj kode po meri, ki bo oživela ta dizajn.
4. naloga: dodajanje kode po meri CSS & JQuery
Ker je naša zasnova končana, bomo zdaj dodali kodo CSS in JQuery, da bomo našim na novo ustvarjenim stolpcem in elementi kartice dali dinamičen učinek animacije premikanja miške 3D.
Če želite to narediti, dodajte nov kodni modul pod modul gumbov.
Prilepite dano kodo CSS po meri v polje in se prepričajte, da ste kodo zavili v oznako »Style«.
<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>Koda CSS bo videti takole pod zavihkom z vsebino modula Code.
Pod CSS dodajte naslednji JQuery in se prepričajte, da je koda znotraj oznak "Script".
<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>
Naslednja koda bi morala izgledati takole na plošči kode.
Zdaj shranite celotno delo in preverite celotno delo na strani v živo.
Končni rezultat
Torej je naš celoten dizajn videti takole. Kul huh!
Zadnje besede
3D animacija, ki smo jo videli v današnji vadnici, je zelo enostavna in zabavna za učenje. To je edinstven in napreden učinek animacije, ki ga je mogoče nadzorovati s premikanjem miške. To lahko oblikujemo s preprostim kodiranjem CSS in JQuery. Divi je nedvomno močan graditelj strani in s prilagojenim kodiranjem je mogoče na spletna mesta prinesti čarobno zasnovo.
