Met de hulp van Divi Builder kunnen we veel unieke en creatieve ontwerpen maken. Vandaag zullen we zien hoe we een dynamische 3D-animatie kunnen maken met behulp van Divi visuele paginabuilder die interactief is met de beweging van de muiscursor. Meestal zweven of klikken we animatie op een object, maar hier animeren we een object dat in verschillende richtingen beweegt met de muisbeweging. U zult ook zien hoe u een zwevend 3D-effect toevoegt aan een object dat interactieve animaties uitvoert en het ontwerp tot leven brengt!
We zullen Divi builder gebruiken voor het ontwerp en later zullen we wat CSS- en jQuery-code toevoegen om de animatiefunctionaliteit te creëren die het ontwerp tot leven zal brengen! U kunt dit ontwerp gebruiken om uw producten op een nieuwe manier aan uw bezoekers te tonen!
Definitief ontwerp
Als alles volgens plan verloopt, ziet ons uiteindelijke ontwerp er ongeveer zo uit.
Creëren van  Een dynamisch 3D-muisbewegingseffect op Divi
Taak 1: Pagina-instelling
Omdat je dit effect op je webpagina wilt creëren, denken we dat je de laatste versie van Divi al hebt geïnstalleerd. Nu, “Voeg een pagina toe†vanaf het dashboard, geef het de gewenste titel en breid het uit met Divi builder.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
Kies nu “Build From Scratch†en begin ermee.
Taak 2: Een Hover-container en -kaart maken
Om de 3D-animatie bij hover te activeren, richten we ons op de rij. We zullen het “Hover container†noemen. Aan de andere kant zal de kolom fungeren als een kaart, die zal animeren met de onderliggende elementen tijdens het zweven over de rij.
Sectie Styling
Open de standaard sectie-instellingen en update het volgende:
- Achtergrondkleur - RGBA (68,55,99,0.1). Hier is 0.1 dekking.Â
- Voeg "7vh" -vulling toe, zowel aan de boven- als onderkant.
Zweefcontainer
Voeg nu een rij met één kolom toe aan de voorbereide sectie.
Werk nu de rij-instelling bij met de volgende wijzigingen.
- Schakel "Aangepaste gootbreedte" in en wijzig de waarde in 1
- Breedte 100%
- Max. Breedte: 70% (desktop), 60% (tablet), 50% (mobiel)
- Vulling: 7vh boven en onder, 5vw links en rechts.Â
Voeg op het tabblad Geavanceerd een aangepaste CSS-klasse toe.
- CSS-klasse: et-hover-container
Voeg ook de CSS-code toe aan het hoofdelement.
display:flex;
align-items:center;
justify-content:center;
De kaart
Nadat u de rij-update hebt voltooid, opent u de instelling voor de kolom om de kaart te stylen.
- Achtergrondkleur #ffffff
- Vulling: 7vh boven, 7vh onder, 5% links, 5% rechts
- Afgeronde hoeken: 30px
- Box Shadow: Zie screenshot
- Box Shadow Verticale Positie: 0px
- Doos Schaduwvervaging Sterkte: 80px
- Schaduwkleur: rgba (0,0,0,0.2)
Voeg op het tabblad Geavanceerd een aangepaste CSS-klasse toe.
- CSS-klasse: et-muismove-kaart
Voeg deze CSS-code ook toe onder het hoofdelement.
max-width: 600px;
Stel nu de overloopeigenschappen in op zichtbaar voor zowel horizontale als verticale overloop.
Taak 3: Het kaartelement maken
De cirkelachtergrond met logo
Voor het allereerste element van onze kaart gaan we een cirkelachtergrond toevoegen met ons logo dat achter onze hoofdproductafbeelding zal zitten.
Voeg nu "Tekst" toe aan de kolom en verwijder de standaardtekst om de hoofdtekst leeg te houden.
Het is tijd om een verloopachtergrond toe te voegen.
- Achtergrondkleur met kleurovergang links #443763
- Achtergrond met kleurovergang Rechts #EA3900
- Stel de verlooprichting in op 90 graden
Voeg samen met de verloopkleur een logo toe als achtergrondafbeelding. De afbeeldingsgrootte moet 60 px bij 60 px zijn en stel de waarde voor de achtergrondafbeelding in op "Werkelijke grootte"
Wijzig op het tabblad "Ontwerp" de waarden als volgt in het gedeelte "Sizing". Stel de breedtewaarde in op 160px voor desktop, 150px voor tablet en 80px voor smartphone.
Stel ook de hoogtewaarde in op dezelfde waarde als de breedte. Stel ten slotte afgeronde hoeken in op 80% onder het gedeelte "Rand".
Werk op het tabblad "Geavanceerd" de posities bij zoals hieronder aangegeven.
- Positie: Absoluut
- Locatie: Midden boven
- Verticale verschuiving: 15%
De kaartafbeelding
Nu we klaar zijn met het logogedeelte, gaan we de productafbeelding op de kaart toevoegen. We zullen een nieuwe afbeeldingsmodule toevoegen onder de vorige tekstmodule.
Upload nu een afbeelding van het product. Zorg ervoor dat de afbeelding transparant is en de Png-indeling heeft. Hier gebruiken we een afbeelding van een rode ferrari.
Wijzig op het tabblad "Ontwerp" de waarden zoals hieronder vermeld.
- Beelduitlijning: Midden
- Breedte: 90%
- Marge: 12vh boven en 5vh onder (pas de waarden aan volgens uw behoefte)
Voeg op het tabblad 'Geavanceerd' een aangepaste CSS-klasse toe voor de afbeelding.
- CSS-klasse: et-card-image
De richting van de auto
Nu gaan we een kop voor de kaart maken. Met onze auto-afbeelding op zijn plaats, laten we een tekstmodule onder de afbeelding toevoegen om onze kaartkop te maken.
Verwijder in de body de standaardtekst en voeg de H2-kop van de HTML hieronder toe.
>h2span style="color: #ea3900:"/span/h2 
Wijzig nu in de ontwerpsectie de volgende waarden:
- Kop 2 Lettertype: Bebas Neue
- Kop 2 Tekstuitlijning : Midden
- Kop 2 Tekstkleur: #443763
- Kop 2 Tekstgrootte: 75px voor desktop, 60px voor tablet en 45px voor mobiel.
- Kop 2 Letterafstand: 0.05em
- Marge: 4vh aan de onderkant
Voeg in het "Geavanceerde gedeelte" een aangepaste CSS-klasse toe
- CSS-klasse: et-card-heading
De kaartinfo
Nu gaan we de informatie over de kaart toevoegen. We zullen nog een tekstmodule toevoegen voor informatie, omdat we zo aan elk van hen verschillende 3D-animatie-effecten kunnen toevoegen. Laten we een nieuwe tekstmodule toevoegen onder het kopje tekstmodule.
Voeg nu de volgende tekstinhoud toe aan de body.
>pbr/p 
Werk het volgende bij op het tabblad Ontwerpen:
- Tekst Lettertype Gewicht: Semi Vet
- Tekstgrootte: 18px (desktop) en 16px (tablet en telefoon.)
- Hoogte tekstregel: 1.8em
- Tekstuitlijning: Midden
- Marge : 4vh
Voeg nu een aangepaste CSS-klasse toe aan deze module.
- CSS-klasse: et-card-info
De knop
Voeg nu een nieuwe knopmodule toe onder de infotekstmodule. Hiermee wordt een knop op de kaart toegevoegd.
Wijzig de knoptekst op het tabblad 'Inhoud' van knopinstellingen.
- Knoptekst: Doe een bod.
Stijl op het tabblad "Ontwerp" de knop zoals hieronder vermeld.
- Gebruik aangepaste stijlen voor knop: JA
- Tekstgrootte knop: 25px (desktop), 20px (tablet), 16px (telefoon)
- Tekstkleur knop: #ffffff
- Achtergrondkleur knop: #443763
- Breedte knoprand: 0px
- Knoprand Radius: 30px
- Knop Letterafstand: 0.1em
- Lettertype knop: Beba's Neue
- Opvulling (bureaublad): 0,5 em boven, 0,5 em onder, 3 em links, 3 em rechts
- Vulling (telefoon):Â 0.5em boven, 0.5em onder, 2em links, 2em rechts
Voeg nu een aangepaste CSS-klasse toe
- CSS-klasse: et-card-knop
Resultaat tot nu toe
Hier is onze uiteindelijke ontwerpuitvoer zonder de animatie.
Nu voegen we wat aangepaste code toe om dit ontwerp tot leven te brengen.
Taak 4: CSS en aangepaste JQuery-code toevoegen
Aangezien ons ontwerp compleet is, zullen we nu CSS- en JQuery-code toevoegen om onze nieuw gemaakte kolommen en kaartelementen een dynamisch 3D-muisbewegingsanimatie-effect te geven.
Voeg hiervoor een nieuwe codemodule toe onder de knopmodule.
Plak de opgegeven aangepaste CSS-code in het vak en zorg ervoor dat u de code in de tag "Style" plaatst.
>style/styleDe CSS-code ziet er zo uit onder het tabblad inhoud van de codemodule.
Voeg onder de CSS de volgende JQuery toe en zorg ervoor dat de code binnen de "Script" -tags staat.
>script/scriptDe volgende code zou er zo uit moeten zien in het codepaneel.
Sla nu het hele werk op en controleer het hele werk op een live-pagina.
Eindresultaat
Ons hele ontwerp ziet er dus zo uit. Gaaf he!
Laatste woorden
De 3D-animatie die we in de tutorial van vandaag zagen, is heel gemakkelijk en leuk om te leren. Dit is een uniek en geavanceerd animatie-effect dat kan worden bestuurd door muisbewegingen. We kunnen dit ontwerpen door middel van enkele eenvoudige CSS- en JQuery-codering. Divi is ongetwijfeld een krachtige pagebuilder en door aangepaste codering is het mogelijk om een magisch ontwerp naar websites te brengen.
