Inhoud
- 01. Rollover teksteffect
- 02. Maak CSS
- 03. Plaats het woord
- 04. Over en weer
- 05. Zweef naar beneden
- 06. Automatisch voor de mensen
- 07. Voeg wisselende klassen toe
Rollover-links zijn een geweldige manier om de aandacht van een gebruiker te trekken, vooral als ze iets ongewoons of origineels doen. Middle Child heeft een geweldig effect, dat je zelden ergens anders ziet, dat elke letter vangt en ze uit elkaar splitst met animatie, die wordt geactiveerd wanneer de bezoeker over het woord zweeft. De animatie helpt het speelse karakter van het sandwichmerk over te brengen.
In dit artikel laten we u zien hoe u het effect op uw site opnieuw kunt creëren. Bekijk voor meer inspiratie onze gids met de beste CSS-animatievoorbeelden (met instructies om ze te coderen). Voor iets anders, probeer een topwebsitebouwer of onze keuze uit de beste cloudopslag. En als u uw site complexer maakt, moet u ervoor zorgen dat uw webhosting op punt staat.
01. Rollover teksteffect
Een van de geweldige teksteffecten op de Middle Child-website zijn de rollover-effecten op het menu, waarbij de letters op de tekst uit elkaar worden gesplitst en een beetje roteren. Begin dit met enkele eenvoudige HTML-tags.
div> div> Ontbijt / div> / div>
02. Maak CSS
Gebruik een apart CSS-bestand of stijltags om de volgende CSS-regels toe te voegen en zorg ervoor dat de pagina de volledige grootte van de browser vult door ervoor te zorgen dat de body en de wrapper de volledige beschikbare hoogte innemen.
body {breedte: 100%; hoogte: 100%; marge: 0; opvulling: 0; } .wrapper {display: grid; hoogte: 100%; }
03. Plaats het woord
De woord klasse centreert het woord in het raster. Elke tekst die de woord klasse kan dit hebben toegepast. De omhoog class wordt toegepast op elke andere letter en deze zullen naar boven gaan.
.word {font-size: 3em; marge: auto auto; } .word .up {display: inline-block; transformeren: translate3d (0px, 0px, 0px) roteren (0deg); overgang: alle 0,5 seconden gemak-in-uit; }
04. Over en weer
Nu de naar beneden klasse deelt zeer vergelijkbare instellingen als de omhoog maar de zweeftekst toont de beweging naar boven voor de omhoog rol om. Naar boven wordt ook iets gedraaid om de look te verbeteren.
.word .down {display: inline-block; transformeren: translate3d (0px, 0px, 0px) roteren (0deg); overgang: alle 0,5 sec gemak-in-uit; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); kleur: # 058b05}
05. Zweef naar beneden
Wanneer de gebruiker met de muis over de tekst zweeft, verplaatst de klasse omlaag de tekst naar beneden. Later in JavaScript wordt de tekst opgesplitst in afzonderlijke reeksen waarbij de klassen automatisch worden toegevoegd aan alternatieve reeksen.
.word: hover .down {transform: translate3d (0px, 8px, 0px) roteren (-12deg); kleur: # 058b05; }
06. Automatisch voor de mensen
Het is een beetje een gedoe om elke letter in afwisselende reeksen met verschillende klassen te moeten plaatsen, dus we automatiseren het proces door JavaScript de selector te laten doorzoeken en elke letter te nemen. Hier de str variabele pakt de huidige letter terwijl deze door de tekst loopt.
script> var elements = document.querySelectorAll (’.word’); voor (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementen [i] .innerHTML = ’’;
07. Voeg wisselende klassen toe
Nu plaatst een andere lus elke letter in zijn eigen span-element en voegt ofwel de omhoog of naar beneden klasse naar de overspanningen. Als je dit in de browser bekijkt, zie je de tekst op en neer gesplitst door elke letter, terwijl je een beetje ronddraait.
U kunt het effect in actie zien op de Middle Child-website.
voor (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); elementen [i] .appendChild (spn); spn.textContent = str [j]; laat pos = (j% 2)? 'op neer'; spn.classList.add (pos); }} / script>
Dit artikel is oorspronkelijk gepubliceerd in een creatief webdesignmagazine Webdesigner.Koop nummer 286 of abonneren.
