Share
Dankzij flexbox kunnen we tegenwoordig relatief aantrekkelijke en moderne lay-outs bouwen. In deze zelfstudie gaan we kijken naar een interface die onlangs is gebruikt voor Google National Parks, en zien hoe flexbox ons kan helpen deze te verbeteren.
Zoals altijd, laten we, voordat we verder gaan, kijken naar wat we gaan bouwen (misschien moet je de grotere versie bekijken als het volledige effect wordt geactiveerd op kijkers die breder zijn dan 800 px):
Zorg ervoor dat u de muisaanwijzer over de koppelingen beweegt om de bijbehorende effecten te activeren.
Laten we eerst eens kijken naar de markup die we zullen gebruiken om deze lay-out te bouwen. We definiëren een div element met vijf links erin (u kunt de elementen gebruiken die u geschikt acht). Elk van onze links bevat een div met de klasse van bedekking. Hieronder ziet u het geraamte van onze code:
Nu de markup klaar is, beginnen we met het definiëren van enkele initiële CSS-stijlen, met name:
Accentsconagua
div als een flexcontainer en stel de hoogte gelijk aan de kijkvensterhoogte in hoogte: 100vh.flex: 1. Bovendien hebben al onze links een achtergrondafbeelding (afkomstig van unsplash.com) die de kijkvensterhoogte beslaat. Als een terugval (als een afbeelding niet beschikbaar is), geven we ook een unieke achtergrondkleur voor elke afbeelding.Wanneer we over een link zweven, wordt de grootte ervan drie keer groter in verhouding tot de grootte van de andere links. We doen dit door de waarde van de te wijzigen buigen eigendom van de doellink. Gelukkig is deze eigenschap eigendom van de geanimeerde CSS-eigenschappen, dus we kunnen een vloeiend overgangseffect genereren (althans in de meeste recente browsers).
Hier is een deel van de CSS-code die aantoont wat we hierboven hebben beschreven:
.flex-wrapper display: flex; hoogte: 100vh; .flex-wrapper a position: relative; flex: 1; achtergrondformaat: omslag; achtergrond-positie: midden; achtergrondherhaling: geen herhaling; overgang: flex .4s; .flex-wrapper .one background-image: url (IMAGE_PATH); achtergrondkleur: rood; .flex-wrapper a: hover flex: 3;
Tot nu toe zien we dit resultaat als we de demo bekijken in een browser die flexbox ondersteunt:
Onze volgende stap is om een paar stijlen toe te wijzen aan de overlay. Dit is wat we gaan doen:
.overlay-binnen element) verticaal en horizontaal.Dit zijn de bijbehorende CSS-stijlen:
.flex-wrapper .overlay weergave: flex; align-items: center; justify-content: center; opvulling: 0 10px; positie: absoluut; boven: 0; rechts: 0; onderkant: 0; links: 0; overgang: achtergrondkleur .4s; .flex-wrapper a: hover .overlay background-color: rgba (0, 0, 0, .5);
Nu is het tijd om de binnenkant van onze overlay te stylen. Standaard zijn deze verborgen en zouden alleen moeten verschijnen als we de muisaanwijzer boven de overeenkomstige bovenliggende link houden. Maar niet meteen, we zullen ze na een korte vertraging onthullen. Deze vertraging is belangrijk; als we het niet specifiek definiëren, ziet het overgangseffect er een beetje lelijk uit. Verwijder het en test de demo om te begrijpen wat ik bedoel.
Dus kort samengevat, eerst wordt de link groter, waarna de overlay-elementen zichtbaar worden. We gebruiken ook de translate3d () om een aantal dia-effecten te maken. Last but not least gebruiken we de transformatiestijl: behouden-3d hack (of een vergelijkbare) om mogelijke flikkerende effecten in verschillende browsers te voorkomen.
En hier zijn de gerelateerde CSS-stijlen:
.flex-wrapper .overlay-inner * visibility: hidden; dekking: 0; transformatiestijl: bewaren-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: hover .overlay-inner * onacity: 1; zichtbaarheid: zichtbaar; transformeren: geen; overgang: alle .3s .3s;
Laten we kijken wat ons is gegeven.
De pagina ziet er geweldig uit op grote schermen, maar misschien op kleine of zelfs op middelgrote schermen, zullen we een paar aanpassingen moeten maken. Hier zijn bijvoorbeeld een paar dingen die we kunnen doen:
flex-richting: kolom ernaar toe. Daarbij stromen de flexitems van boven naar beneden.Onze desktop-eerste media-query ziet er als volgt uit (ik heb alleen 800px gebruikt omdat dat bij de ingesloten demo's past in deze post - u kunt kiezen wat u denkt dat het beste is):
@media-scherm en (max-breedte: 800px) .flex-wrapper flex-richting: kolom; .flex-wrapper a: hover flex: 1; .flex-wrapper a: hover .overlay background-color: transparent; .flex-wrapper .overlay h2, .flex-wrapper .overlay p dekking: 1; zichtbaarheid: zichtbaar; transformeren: geen;
Dit is de laatste verschijning van onze navigatie:
De demo werkt in alle recente browsers die flexbox ondersteunen.
In sommige browsers merk je misschien dat de animatie van de buigen eigendom is niet zo soepel als het zou moeten zijn, of misschien werkt het helemaal niet. IE11 animeert deze eigenschap bijvoorbeeld niet, terwijl Edge dat wel doet. Dit is redelijk genoeg, gezien het feit dat flexbox een nieuwe lay-outmodus is die nog steeds aan kracht wint.
In deze zelfstudie hebben we onze kennis over flexbox verbeterd door te leren hoe je een stijlvolle navigatie-indeling kunt bouwen. Hopelijk heb je genoten van wat we hier hebben gebouwd en heb je inspiratie opgedaan voor je volgende projecten!
Als u een vergelijkbare lay-out maakt, vergeet dan niet ons de aanpak (pure CSS of JavaScript-gebaseerde oplossing) die u gebruikte te tonen.
Voordat ik sluit, wil ik graag een paar sites met een vergelijkbare lay-out delen als wat we zojuist hebben gemaakt:
