Wilt u een kanteleffect toevoegen met Divi op elk element van uw pagina?
Zweefkanteleffecten toevoegen aan uw Site web is een van die leuke en boeiende manieren om je Site web Divi. Meestal vereist dit type ontwerp een plug-in of meer geavanceerde code. Maar dit proces is veel eenvoudiger met Tilt.js (een licht hover-kanteleffect voor jQuery). Met Tilt.js kunt u binnen enkele minuten eenvoudig zweef-kanteleffecten op alles toepassen.
In deze zelfstudie laten we u zien hoe u hover-tilt-effecten aan elk element kunt toevoegen Divi. Met behulp van een combinatie van jQuery tilt.js-fragmenten en de Divi-builder laten we u zien hoe u geweldige hover tilt-effecten kunt toevoegen aan een afbeelding, modulekolom, rij, enz.
We laten u zelfs zien hoe u verbluffende 3D-parallax-effecten kunt toevoegen.
Laten we beginnen!
overzicht
Hier is een kort overzicht van het resultaat dat we in deze tutorial zullen krijgen.
Zie ook: Divi: inhoud onthullen door over de sectiescheiding te bewegen
Wat je nodig hebt om te beginnen
Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Voeg kanteleffecten toe bij het zweven van een element in Divi
Voeg een Tilt Hover-effect toe aan de Divi-modules
Laten we beginnen met het toevoegen van een rij met drie kolommen aan de standaard reguliere sectie.
Een afbeeldingsmodule toevoegen
Voeg in de eerste kolom een afbeeldingsmodule toe.
Let op: U kunt elke module naar keuze gebruiken. Het hoeft helemaal geen Image-module te zijn.
Upload een afbeelding naar keuze.
Een afbeeldingsmodule-klasse toevoegen
Onder het tabblad Geavanceerd, voeg de volgende CSS-klasse toe:
- CSS-klasse: et-js-tilt
Deze klasse wordt later gebruikt als selector voor onze kantelfunctie.
Kopieer en plak vorige afbeeldingsmodule
Kopieer vervolgens de afbeeldingsmodule en plak er een in elk van de twee resterende kolommen.
U kunt desgewenst dubbele afbeeldingen door nieuwe vervangen. Zorg ervoor dat elke afbeeldingsmodule tot de CSS-klasse behoort "et-js-tilt".
Voeg de JQuery-bibliotheek "tilt.js" toe
De bibliotheek toevoegen tilt.js en het codefragment dat nodig is om onze afbeeldingen scheef te trekken, gebruiken we een codemodule.
Voeg eerst een nieuwe rij toe één kolom onder de bestaande rij.
Voeg vervolgens een Code-module toe aan de nieuwe rij.
Dan moeten we toegang krijgen tot de tilt.js bibliotheek door een script toe te voegen dat tilt.js importeert van hun CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Plak het volgende script in het codevak.
Gebruik de volgende src-code in een scripttag om de bibliotheek te importeren:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Het zou er zo uit moeten zien:
Het is belangrijk om te importeren tilt.js voordat u de code toevoegt die deze zal gebruiken. Dus nadat het script verwijst naar tilt.js, voeg de nodige scripttags toe om de JQuery te verpakken die we moeten toevoegen. Plak vervolgens de volgende JQuery tussen de scripttags.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Merk op dat de functie tilt() zich in een if-statement bevindt dat wordt uitgevoerd wanneer de browserbreedte groter is dan 980px. Dit zorgt ervoor dat het effect alleen optreedt op een desktopcomputer.
Hier is het resultaat.
Tilt hover-effect toegevoegd aan lijn
Zoals we eerder vermeldden, kun je dit hover-tilt-effect aan elk Divi-element toevoegen. Dit omvat een hele lijn.
Bovendien kunt u een kanteleffect aan een rij toevoegen terwijl u de kanteleffecten voor elk van de modules in de rij behoudt.
Hier is hoe.
Dupliceer regel en voeg unieke CSS-klasse toe aan regel
Dupliceer de bestaande rij afbeeldingen en open vervolgens de dubbele rij-instellingen. Onder het tabblad Geavanceerd, geef de regel als volgt een unieke CSS-klasse:
- CSS-klasse: et-row-js-tilt
jQuery toevoegen
Voeg vervolgens de volgende jQuery toe onder de vorige scheeftrekkingsfunctie om een afzonderlijke scheeftrekkingsfunctie op de regel toe te passen.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Merk op dat we voor dit kanteleffect de schaal hebben teruggebracht tot 1 en de perspectiefwaarde hebben verhoogd, zodat de kanteling subtieler is.
Hier is het resultaat.
Merk op hoe de rij een kantelfunctie heeft die wordt geactiveerd wanneer u over de rij zweeft en elk van de Afbeeldingsmodules heeft ook hetzelfde kanteleffect dat we eerder hebben toegevoegd. Dit is hoe u geneste instanties van kanteleffecten kunt toepassen.
Voeg een Tilt Hover-effect toe aan een kolom met verschillende Divi-modules
In sommige gevallen is het handig om een scheefheidseffect toe te voegen aan een kolom met modules. Hierdoor kunt u met Divi meerdere modules in een kolom ontwerpen en vervolgens al die elementen als een enkele eenheid onder een hoek plaatsen.
Om u een voorbeeld te geven van hoe u dit doet, gaan we een tilt-on-hover-effect toevoegen aan een kolom die een afbeeldingsmodule, een tekstmodule en een knopmodule bevat.
Voeg een nieuwe regel toe
Maak om te beginnen een nieuwe rij met de volgende kolomstructuur:
Een afbeeldingsmodule toevoegen
Voeg in kolom 2 (de middelste kolom) een nieuwe afbeeldingsmodule toe.
Upload een afbeelding naar de module.
Stel de uitlijning van de afbeelding in op het midden.
Een tekstmodule toevoegen
Voeg onder de module Afbeelding een module Tekst toe met de volgende H2-header:
<h2>Local Organic</h2>
Werk vervolgens de H2-kopstijlen als volgt bij:
- Lettertype: Berkshire Swash
- Tekstuitlijning: gecentreerd
- Tekstkleur: #000000
- Grootte: 60px
- Lijnhoogte: 1,2 em
Knoppenmodule toevoegen
Voeg onder de tekstmodule een knopmodule toe.
Werk de knoptekst bij om "Meer informatie..." te lezen
Werk de personalisatie-instellingen als volgt bij:
- Knopuitlijning: midden
- Aangepaste stijlen gebruiken voor knop
- Tekstgrootte knop: 18px
- Tekstkleur: #fff
- Knopachtergrond: #000
- Breedte knoprand: 0 pixels
- Grensstraal: 100px
- Lettertype knop: Drijfzand
- Lettergewicht: Vet
- Opvulling (boven en onder): 16px
- Opvulling (links en rechts): 30px
- Box Shadow: zie screenshot
Kolomparameters
Zodra alle drie de modules zijn voltooid, opent u de instellingen voor de bovenliggende kolom van die modules (kolom 2) en werkt u het volgende bij:
- Achtergrond: #f5cee6
- Opvulling (boven en onder): 50px
- Opvulling (links en rechts): 20px
CSS-klasse toevoegen aan kolom
Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:
- CSS-klasse: et-column-js-tilt
jQuery toegevoegd om kanteleffect op kolom toe te passen
Om het scheefheidseffect aan de kolom toe te voegen, kunnen we nog een vergelijkbaar jQuery-fragment toevoegen dat is gericht op de CSS-klasse-kolom.
Plak het volgende codefragment onder het vorige codefragment dat de regel target.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Hier is het eindresultaat.
3D parallax-effect toegevoegd aan internals
Voor een meer geavanceerd hover tilt-effect kunnen we een 3D parallax-effect toevoegen aan de interne kolommodules.
Door een combinatie van perspectief en transform:translateZ() te gebruiken, kunnen we elk van de modules van de kolom in 3D-ruimte laten verschijnen wanneer het tilt-on-hover-effect actief is.
Hier is hoe.
Vorige regel dupliceren
Dupliceer eerst de vorige rij met het schuine effect toegevoegd aan de middelste kolom.
Een enkele kolomklasse toevoegen
Werk vervolgens de middelste kolom (kolom 2) als volgt bij met een unieke CSS-klasse:
- CSS-klasse: et-column-js-tilt-3d
Aangepaste CSS
Om ervoor te zorgen dat de interne modules het 3D-effect behouden, voegt u de volgende aangepaste CSS toe aan het hoofdkolomelement:
transform-style: preserve-3d;
jQuery en CSS toevoegen
Voeg vervolgens wat meer jQuery-fragmenten toe onder het vorige skew-functiefragment dat als volgt op de kolom is gericht:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});Deze jQuery voegt nog een basiskantelfunctie toe aan de kolom, net als het vorige voorbeeld.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Zie nu het eindresultaat. Merk op hoe de drie modules verschijnen in de 3D-ruimte terwijl ze roteren tijdens het kanteleffect.
Lees ook: Divi: inhoud onthullen door over de sectiescheiding te bewegen
Definitieve resultaten
Hier is nog een blik op de eindresultaten van onze voorbeelden.
Download DIVI nu!!!
Conclusie
De hover tilt-effecten aangeboden door Tilt.js zijn erg leuk om mee te experimenteren.
Hoewel we in deze zelfstudie een paar basisvoorbeelden hebben gebruikt, kunt u gemakkelijk een velddag hebben door deze zweef-kanteleffecten toe te passen op een van onze kant-en-klare lay-outs of op uw eigen site.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
