Hoe maak je een gesplitste tekst Shutter-beeldanimatie op Divi

Image Overlay is een zeer creatief medium om websitebezoekers een aantrekkelijke kijkervaring te bieden. Aangepaste animaties en zweefeffecten zijn een geweldige manier om een afbeelding te laten zien, en het is tegenwoordig erg populair bij iedereen. In de tutorial van vandaag zullen we zien hoe je prachtige afbeeldingsoverlays kunt maken met gesplitste tekstanimatie via Divi .

We hebben de tutorial van vandaag in drie delen verdeeld. In het eerste deel zullen we zien hoe we een aangepaste afbeeldingsoverlay kunnen maken en in het volgende deel zullen we wat code aan het ontwerp toevoegen. En tot slot zullen we zien hoe we een uniek beeldoverlay-ontwerp kunnen maken met behulp van de ingebouwde optie van Divi .

Laten we meteen aan de slag gaan.

Voorbeeld

Voordat we aan de tutorial van vandaag beginnen, moet je eerst kijken naar ons ontwerp dat we vandaag gaan leren.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Voor we beginnen

Divi is een geweldig WordPress-thema dat indrukwekkende functies biedt en het ware doel van een multifunctioneel WordPress-thema dient. De gebruiksvriendelijke paginabuilder heeft veel functionaliteit die geweldige ontwerpen kan maken. Download het thema en activeer het na installatie.

Maak een nieuwe pagina vanuit het WordPress-dashboard en open de pagina om te bewerken met Divi builder. Kies "Build From Scratch" en we zijn klaar om aan de slag te gaan!

Sectie 1: Het ontwerp bouwen

We hebben eerder vermeld dat we de structuur van ons ontwerp in het eerste deel zouden creëren. Zodra we klaar zijn met het instellen van de afbeeldingsoverlay met gesplitste tekstluiken, laden we de animatie in het volgende deel.

Toevoegen: Rij 1

Rij-instellingen

Voeg een gewone rij met 2 kolommen toe aan de sectie en wijzig de volgende instellingen voordat u verdere modules toevoegt.

• Gootbreedte: 2 "

Kolominstellingen

Kolommen bevatten onze afbeeldingen en sluiteroverlay-elementen, dus dit wordt onze hoofdcontainer. Deze kolom zal ook de hover-effecten van de sluiteranimatie starten. Gewoon, wanneer een muis in deze kolom komt - de hele animatie zal beginnen en, zodra de muis uit is, zal deze terugkeren naar de vorige staat.

Voeg de CSS-klasse toe aan de kolom om onze kolom te selecteren als "sluiterkolom" en deze later te animeren "bij zweven".

• CSS-klasse: sluiterkolom bij zweven

Maak ook de volgende aanpassingen.

• Horizontale overloop: verborgen
• Verticale overloop: verborgen

Toevoegen: Afbeeldingsmodule

Nu voegen we onze hoofdafbeelding toe die achter onze sluiteroverlay zal zitten met een afbeeldingsmodule.

Breng nu een kleine wijziging aan in de uitlijning onder het tabblad Ontwerp.

• Beelduitlijning: Midden

Een gesplitste tekst op de bovenste sluiter maken

Terwijl onze afbeelding wordt geplaatst, zullen we een tekstmodule onder de afbeeldingsmodule toevoegen om een bovenste sluiter toe te voegen.

Update de tekstmodule met een tekst.

Open het ontwerptabblad, maak deze aanpassingen.

• Tekstlettertype: Poppins
• Tekst Lettertype Gewicht: Zwaar
• Tekst Lettertypestijl: TT
• Tekst Tekstkleur: #ffffff
• Tekst Tekstgrootte: 150px (desktop), 20vw (tablet en telefoon)
• Tekst Letterafstand: -0.03em
• Hoogte tekstregel: 0em
• Tekstuitlijning: Midden

Werk nu de instellingen voor formaat en afstand bij.

• Breedte: 100%
• Hoogte: 50%
• Marge: 0px onder

Voeg nu de volgende CSS-klasse toe vanaf het tabblad Geavanceerd.

• CSS-klasse: bovenste sluiter

Later zullen we de klasse gebruiken om de transformatie-animatie met aangepaste code in en uit te schakelen. Voeg vervolgens deze CSS-code toe aan het hoofdelement.

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

Om onze tekst in positie te brengen, moeten we deze wijzigingen aanbrengen.

Een onderste sluiter gesplitste tekst maken

Aangezien onze bovenste sluiter gesplitste tekst klaar is, dupliceert u de tekstmodule om een onderste sluiter gesplitste tekst te maken. U hoeft geen CSS-klasse toe te voegen; aangezien we zojuist de vorige module hebben gekloond, is de CSS-klasse er al. Maar we moeten enkele aanpassingen maken aan de CSS-code op het hoofdelement.

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

Verwijzing naar "flex-start", de tekst is verticaal uitgelijnd bovenaan de module. In de vorige tekstmodule hebben we de regelhoogte op 0 gezet, zodat de onderste helft van de hele tekst zichtbaar is.

Voeg een absolute positie toe met een verticale offset.

• Verticale verschuiving: 50%

Nu hebben we met succes de structuur van onze tutorial van vandaag gemaakt, waarin we animatie zullen doen met de codering in het volgende deel. Laten we de modules hernoemen voor een beter toekomstig begrip.

Sectie 2: De code

Om een sluiteranimatie-effect op onze structuur te brengen, hebben we wat CSS- en JS-code nodig. We gebruiken daarvoor een Code-module. Voeg de codemodule toe bovenaan de rechterkolom.

De CSS-code

Plak de volgende CSS-code in een stijltag.

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

De JS-code

Voeg vervolgens de volgende JQuery-code toe aan een scripttag.

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Sectie 3: Ontwerp voor gesplitste tekst sluiteranimatie

Nu gaan we het eerste deel van ons ontwerp dupliceren om onze eerste sluiteranimatie te maken.

Toevoegen: Eigenschappen voor bovenste sluitertransformatie

Meestal, wanneer we iets animeren met CSS Transform Properties, is er aan het begin geen transformatiestijl voor dat element. Nadat we de muisaanwijzer over het element hebben gehouden, kunnen we die stijl zien. In Divi draaien we het hele proces om. We zullen dat element eerst transformeren met Divi Builder. Het voordeel hiervan is dat we alles visueel kunnen bewerken. Wanneer de styling is voltooid, zullen we deze in eerste instantie uitschakelen met behulp van een CSS-klasse. Schakel het vervolgens in en uit wanneer de gebruiker interactie heeft met de overlay.

Om het transformatieontwerp aan de bovenste sluiter toe te voegen, opent u de instellingen van de bovenste sluitertekstmodule en werkt u het volgende bij:

• Transformatieschaal (X en Y): 150%
• Transformeren Vertalen Y-as:Â -101%
• Oorsprong transformeren: midden boven

Als je alles correct bewerkt, dan is de bovenste sluitertekst niet meer zichtbaar omdat we willen dat het hele beeld belicht wordt na de animatieovergang.

Toevoegen: Eigenschappen voor transformatie van onderste sluiter

Werk voor de onderste sluiter de volgende ontwerpopties voor transformatie bij:

• Transformatieschaal (X en Y): 150%
• Transformeren Vertalen Y-as:Â 101%
• Oorsprong transformeren: midden onder

Toevoegen: CSS-klasse om transformatie-eigenschap (aanvankelijk) uit te schakelen

We weten al dat we na het ontwerpen van transformatie-eigenschappen voor sluiteranimatie, transformatieontwerpen zullen uitschakelen met een kleine CSS-klasse. Vanwege de aangepaste CSS-code die we eerder hebben toegevoegd, wordt het ontwerp weergegeven zonder dat er transformatieontwerpen zijn aangebracht.

Toevoegen: On-Click-functionaliteit

Onze eerste animatie was op het hover-effect. Dus zweven zou de animatie daadwerkelijk activeren met de muiscursor over de afbeelding en tekst. Nu zullen we zien hoe we dit kunnen doen met de muisklik zonder te zweven.
Heel eenvoudig, we zullen de opdracht "on-hover" weglaten en de opdracht "on-click" aan de sectie toevoegen.

• CSS-klasse: sluiterkolom bij klikken divi-transform-none

Het ontwerp zal er dus zo uitzien.

De animatie omkeren

Nu kunnen we, als we willen, een animatie maken waarbij de hele afbeelding zichtbaar blijft en de tekst komt als we erover zweven - wat precies het tegenovergestelde betekent van wat we nu hebben. We kunnen dergelijke animaties gemakkelijk krijgen door de CSS-klasse "divi-transform-none" te verwijderen.

Een ander ontwerp

Hier hebben we nog een ontwerp.

Rolluiken bijwerken

Selecteer bovenste en onderste tekstmodules van elke rolluiksjabloon. Open vervolgens de elementinstellingen voor beide en werk het volgende bij:

• Achtergrond: #ffffff
• Tekst Tekstkleur: #000000
• Mengmodus: Scherm

Definitief ontwerp

Ons uiteindelijke ontwerp ziet er als volgt uit.

Conclusie

Elk ontwerp, inclusief gesplitst tekstluikontwerp, kan heel eenvoudig worden gedaan via Divi . Het is een zeer effectieve manier om bezoekers aan te trekken. Hopelijk voegt de tutorial van vandaag een nieuwe dimensie toe aan uw website-ontwerp. Als je deze tutorial leuk vindt, vergeet dan niet om ons dit te laten weten in het opmerkingenveld.