Share
In deze zelfstudie leer je hoe je een hamburgemenupictogram maakt en animeert en vervolgens een gebeurtenislistener via jQuery toevoegt voor het activeren van een vervolgkeuzemenu.
Ik zal Jade (Pug) en Sass gebruiken in plaats van vanilla HTML en CSS. Dus je moet op zijn minst een basiskennis hebben van deze sjablonerende motoren.
We zullen beginnen met de implementatie van een eenvoudige speeltuin. Ik zal alleen de Jadesjabloon samen met Sass-styling leveren, omdat dit niet het bereik van de zelfstudie is. Je kunt het gebruiken en het gebruiken of je kunt met je eigen ontwerp komen.
Jade-bestand:
body #container #header #body .content .left .recht - voor (i = 1; i <= 5 ; i++ ) div( + i ) .content .left .right - for (j=6; j <= 10 ; j++ ) div( + j ) .content .left .right - for (k=11; k <= 15 ; k++ ) div( + k )
Sass-bestand:
= flex () weergave: -webkit-box weergave: -moz-box weergave: -ms-flexbox weergave: -webkit-flex weergave: flex = overgang ($ tijd) -webkit-overgang: alle $ tijd gemak -moz-overgang : all $ time ease -ms-transition: all $ time ease -o-transition: all $ time ease transition: all $ time ease html, body margin: 0 padding: 20px 0 + flex () justify-content: center // ---------------------------------- // #bakbreedte: 320 px hoogte: 550 px achtergrondkleur: #ebebeb overflow: verborgen #header hoogte: 45px achtergrondkleur: # 9b9b9b positie: relatief #body opvulling: 0 20px padding-top: 40px + flex () flex-richting: column justify-content: flex-start .content + flex () flex-richting: rij uitvullen-inhoud: flex-start marge-onderkant: 25px. breedte links: 100px hoogte: 100px marge-rechts: 15px achtergrondkleur: # e1e1e1 .recht @voor $ i van 1 tot 15 # tekst # $ i margin-top: 10px width: 50 + random (100) + px height: 10px background-color: # e1e1e1
Opmerking: hier heb ik twee mixins gemaakt met de naam buigen en overgang. Mixins maken het eenvoudiger om sommige CSS-regels opnieuw te gebruiken door ze te groeperen. Wanneer ik moet toevoegen weergave: flex met alle prefixen van leveranciers, kan ik gewoon gebruiken +buigen() in plaats daarvan, dankzij de mixin.
We zullen deze structuur gebruiken en erop voortbouwen voor de rest van de tutorial.
Het eindresultaat zou er als volgt uit moeten zien:
Bekijk de huidige code
Nu is het tijd om een eenvoudig maar aantrekkelijk hamburgermenu te maken en het te animeren via CSS.
Voeg een nieuwe div toe binnen #header en noem het #Hamburger. Maak vervolgens twee onderliggende kinderen binnen #Hamburger. Ze moeten een gemeenschappelijke klasse en individuele ID's hebben.
#hamburger .strip # top .strip # bottom
Nu moeten we de ouder stylen #Hamburger div en de kinderen divs met de gemeenschappelijke klasse van .strip.
#hamburger hoogte: 100% breedte: 45 + flex () flex-richting: kolom rechtvaardig-inhoud: spatie-tussen opvulling-links: 20px
We stellen de hoogte van de div gelijk aan zijn parent-div, wat is #header, door het definiëren van de hoogte: 100%. We stellen ook een breedtewaarde in voor deze bovenliggende div, die het "klikbare" gebied definieert.
Vervolgens voegen we flexbox toe met alle voorvoegsels van leveranciers met behulp van mixins, die we eerder hebben gemaakt.
Omdat we onze willen .strip divs om verticaal geplaatst te worden, zetten we in flex-richting: kolom en gebruik dan uitvullen-inhoud: ruimte-tussen om ruimte tussen de .strip divs.
Dan moeten we die divs naar elkaar duwen door bodem- en topvulling toe te voegen aan de respectievelijke divs.
#top marge-top: 17px #bottom margin-bottom: 17px
We hebben ook toegevoegd opvulling links: 20 px om de. te verplaatsen .strip divs verder naar rechts.
Het volgende is om de strips te stylen. Dit is relatief eenvoudig door alleen de grootte en de kleur van de divs te bepalen.
.strookbreedte: 25px hoogte: 2px achtergrondkleur: #ffffff
Het uiteindelijke resultaat met het hamburgermenupictogram zou er als volgt uit moeten zien:
Het volgende is om het menupictogram te animeren zodat wanneer erop wordt geklikt, het moet worden geanimeerd tot een kruisteken.
Op dit punt gaan we basisjQuery gebruiken om een aantal CSS-klassen te schakelen.
Laten we eerst de CSS-klassen maken die moeten worden omgewisseld.
We gaan de vertaal- en rotatie-instellingen van de gebruiken transformeren eigendom van CSS samen met de overgang eigendom.
Voeg eerst overgangen toe aan beide #top en #bodem divs door mixins te gebruiken met een specifieke timingparameter.
#top marge-top: 17px + overgang (.25s) #bottom margin-bottom: 17px + transition (.25s)
Nu moeten we de styling definiëren van de klassen die moeten worden omgewisseld.
We zullen elk roteren en vertalen .strip div individueel, dus we moeten verschillende klassen schakelen, zowel voor de #top en #bodem divs.
#top marge-top: 17px + overgang (.25s) & .topRotate transform-origin: middentransformatie: translateY (4px) rotateZ (45deg) #bottom margin-bottom: 17px + transition (.25s) & .bottomRotate transform-origin : center transform: translateY (-5px) rotateZ (-45deg)
Hier hebben we de styling gedefinieerd voor twee verschillende klassen met de naam .bottomRotate en .topRotate, die worden toegevoegd aan en verwijderd uit hun respectieve referentiedelen, #top en #bodem.
Merk op dat verschillende afmetingen van de .strip klasse zou resulteren in een behoefte aan anders translateY en rotateZ waarden om te animeren in een goed kruisteken.
We definieerden hoe elk .strip div zal animeren wanneer het topRotate en bottomRotate klassen zijn aanwezig. We moeten echter nog een gebeurtenislistener toevoegen om die klassen in of uit te schakelen.
Maak een nieuw JavaScript-bestand en gebruik de volgende code om te schakelen tussen topRotate en bottomRotate classes to divs with #top en #bodem ID's respectievelijk.
Accentsconagua
$ (document) .ready (function () $ ("# hamburger"). klik (functie () $ ("# top"). toggleClass ("topRotate"); $ ("# bottom"). toggleClass ( "bottomRotate"););)We zetten al onze code erin $ (Document) .ready (function () ) om te wachten tot de hele pagina is geladen voordat u actie onderneemt.
Wanneer we op klikken #Hamburger div, het schakelt de klassen voor divs met specifieke ID's.
Opmerking: Vergeet niet het jQuery-bronbestand aan uw project toe te voegen.
Bekijk de huidige code
De volgende stap is om een menu met lijstitems te maken.
Gebruik de volgende structuur onder de #header:
#dropDown #background ul li Home li Blog li Projecten li Auteurs li Jobs li Contact
Dus hier gebruikten we de ul tag als het bovenliggende element om de items met te groeperen li tags als kinderen. Bovendien hebben we om een groeiende achtergrondanimatie te maken een div toegevoegd met de ID van #achtergrond.
Laten we het stijlen ul en li elementen eerst.
ul-lijststijl: geen opvulling: 0 marge: 0
Stel de list-style naar geen om de kogels te verwijderen uit de ul elementen en ook beide vulling en marge tot 0 om alle vooraf gedefinieerde waarden te verwijderen.
Nu style het li elementen:
li // weergave: geen achtergrondkleur: # 9b9b9b kleur: #ffffff lettertype-familie: 'drijfzand', schreefloos lettertype-gewicht: lichter lettertype-formaat: 15px opvulling: 20px opvulling links: 60px &: na positie: absolute inhoud: "left: 60px width: 60% height: 1px bottom: 4px background: rgba (255, 255, 255, 0.25) &: last-child: after width: 0
Hier heb ik de opmerking gemaakt Geen weergeven om het resultaat te kunnen zien. Wanneer we echter animeren, gebruiken we deze om de lijstelementen aanvankelijk te verbergen.
Ik heb ook de na pseudo-element en heeft het dienovereenkomstig gestileerd om elk te scheiden li element met een rechte lijn. : Het laatste kind: na verwijdert deze regel voor de laatste li element.
Bekijk de huidige code
Nu gaan we enkele Sass-besturingsrichtlijnen gebruiken om CSS-hoofdframe-animaties met elk verschillende attributen toe te voegen li element.
@keyframes drop 0% opacity: 0 transform: scale (1.3) 100% dekking: 1 transformatie: schaal (1) @keyframes fold 0% dekking: 1 transformatie: schaal (1) 100% dekking: 0 transformatie: schaal (0.7)
Hier hebben we onze keyframe-animaties gedefinieerd laten vallen en vouwen.
laten vallen is voor het animeren van de opening van de menulijst. De initiële schaal is 30% groter en wordt teruggeschaald naar de oorspronkelijke grootte terwijl de transparantie van 0 naar 1 gaat. De tegenovergestelde actie vindt plaats in vouwen.
Nu moeten we die keyframes aan deze koppelen li elementen. Dit deel is waar de Sass van pas komt.
@voor $ i van 1 tot en met 6 li: nth-child (# $ i) animatie: naam: vouwduur: 80ms * (6- $ i) + 1ms timing-functie: easy-in-out fill-modus: forward li.anim: nth-child (# $ i) animatie: naam: drop-duur: 100ms * $ i timing-functie: easy-in-out fill-mode: naar voren
Hier gebruikte ik een for loop dat gaat van 1 tot 6 met de index van $ i.
Nu moeten we deze index gebruiken om elke animatie aan te hechten li elementen met verschillende tijdsduren.
Denk eerst aan de li.anim: n-kind (# $ i) lijn.
Hier pakken we de $ ihet kind van de li element met klasse van Anim.
We zullen dit omschakelen Anim klasse. Dus wanneer het wordt toegevoegd aan li elementen, de hoofdframe-animatie met de naam van laten vallen zal actie ondernemen. Wanneer het wordt verwijderd, de vouwen animatie zal actie ondernemen.
Het volgende belangrijke ding is de looptijd attribuut.
duur: 100ms * $ i voor de laten vallen animatie verlengt de duur van de animatie voor elk oplopend kindernummer. Dus, wanneer deze code wordt gecompileerd, de eerste li kind zal hebben duur: 100ms, en het laatste kind zal hebben duur: 600ms.
Dit geeft het gevoel elk element na elkaar te animeren.
We doen hetzelfde voor de vouwen animatie. Deze keer zou het laatste element sneller moeten worden geanimeerd duur: 80ms * (6- $ i) + 1ms. De 1 ms toegevoegd aan de duur is te wijten aan het feit dat wanneer u de duur instelt op 0, er waarschijnlijk enkele problemen optreden en uw animatie mogelijk niet correct werkt.
Toen we de li element, ik heb gezegd dat we het moesten gebruiken Geen weergeven om ongewenste animaties te vermijden. Als u dit niet instelt geen, je zult zien dat het vouwen animatie wordt eenmaal afgespeeld wanneer de pagina is geladen.
Als we de tonen eigendom aan geen, we zullen dat niet zien, en dan moeten we het doen laten zien de li element voor het omschakelen van de Anim klasse.
We willen dat onze animaties worden weergegeven wanneer we op het hamburgersymbool klikken. Dus laten we wat jQuery gebruiken om de tonen eigendom van elk li item naar blok en schakel ook de Anim klasse.
$ (document) .ready (function () $ ("# hamburger"). klik (functie () $ ("# top"). toggleClass ("topRotate"); $ ("# bottom"). toggleClass ( "bottomRotate"); $ ("li"). show (); $ ("li"). toggleClass ("anim"););)Bekijk de huidige code
Je zult merken dat we de animatie van elk kunnen zien li element afzonderlijk. We hebben echter liever een uitgebreider menugevoel.
Om dat te verhelpen, hoeven we alleen maar de hoogte van een div uit te breiden. Dat div is #achtergrond, die we aanvankelijk hebben toegevoegd bij het maken van de ul en li elementen.
#achtergr.breedte: 100% hoogte: 0 achtergrondkleur: # 9b9b9b positie: absoluut + overgang (.45s) & .expand hoogte: 550px
We zullen de uitbreiden klasse om de hoogte attribuut aan 550px binnen .45s. Merk op dat ik de overgang mixin om de overgang te definiëren met een specifieke tijdparameter.
Eindresultaat
Gedurende deze tutorial hebben we geoefend in het gebruik van for loops in HTML en CSS via de Jade en Sass template-engines. Daarbovenop hebben we CSS keyframe-animaties gemaakt en deze met verschillende duurattributen aan specifieke HTML-elementen gekoppeld. Daarna hebben we klassen omgeschakeld met jQuery om die animaties te besturen.
