Fast position webelementer
Brugen af faste positionelementer er vokset i popularitet og bliver et fælles element på nettet.
Denne teknik indebærer fastsættelse af noget element i browseren, mens resten af siden ruller. Ofte finder vi dette gjort på hovedelementer, herunder hovednavigering til et websted. Dette er også en populær tilgang på enkeltsider, hvor navigationen på siden skal være til stede. Vi finder også forskellige elementer af websider, der er låst på plads ved hjælp af sådanne teknikker.
Der er mange situationer, vi kan finde, hvor fastsættelse af et element på siden er en god ting, men det hele kommer tilbage til et enkelt formål. I næsten alle disse situationer holder det faste element altid en kritisk del af siden foran brugerne.
Vigtigheden af disse elementer varierer, men i et vist omfang er det grundlæggende mål at holde en del af siden permanent i visningsporten.
Som du overvejer at bruge denne teknik, anbefaler jeg stærkt, at du nøje overvejer hvorfor og hvordan du gør det. Husk, at uanset hvilken del af din side der ikke bevæger sig, trækker der automatisk stor opmærksomhed. Så vær sikker på at du sætter den på arbejde. Lad os dykke ind!
Faste overskrifter
Faste overskrifter er langt de mest almindelige faste positionelementer, så meget i virkeligheden var jeg nødt til at begynde at tilføje til denne samling for at undgå for mange prøver. Oftest er overskriften fastgjort på plads for at sikre, at sidens navigation altid er til stede. Som jeg nævnte før, er dette især tilfældet, når man beskæftiger sig med en enkelt side hjemmeside.
Der er mange subtile variationer i, hvordan du kan håndtere faste overskrifter, så vi vil gennemgå nogle prøver for forskellige ideer om denne tilgang.
Freckles & Handsome
Dette er hvad jeg ville overveje et klassisk eksempel på denne teknik. Overskriften er fastgjort på plads, mens du ruller gennem webstedet. Dette omfatter logoet og de vigtigste navigationselementer. Derudover er det en enkelt side hjemmeside. Ved at klikke på hovednavigationen ruller du til den relevante del af siden.
I et sådant tilfælde gør den klæbende overskrift gennemsyn på siden med enkeltside lige fremad. Det undgår også et af de mere irriterende aspekter af mange enkeltwebsider: når navigationen kun er øverst på siden, men det ruller igennem i aldre. Som sådan ser den faste header ikke kun flot ud og holder webstedets vigtigste brandingfront og center, men sikrer også, at webstedet er nemt at bruge.
Mapalong
Dette eksempel bruger en fast header, men med sin egen mindre vridning. Dette websted er også et enkelt side layout, men mangler nogen i side navigation. I dette tilfælde indeholder den faste overskrift hovedlogoet og et tegn på knappen, begge meget vigtige elementer. Men endnu bedre end dette, når du ruller ned på siden, flytter hovedopkaldet til overskriften, da det ruller ud af visningen. Som et resultat er det primære konverteringssted for webstedet altid synligt. Og endnu bedre end det, handler handlingen i opfordringen til handling, der falder ud i visningen, brugerens opmærksomhed på det og understreger endvidere konverteringspunktet i designet! Efter min mening en strålende brug af tilgangen.
Kisko Labs
En anden smart tilgang til den faste position header er en teknik, jeg kalder dias og pind. På Kisko Labs-webstedet stikker kun en del af overskriften. Når du ruller ned på siden, rulles også hovednavigationen. Det er indtil det rammer toppen af skærmen, så stikker det der. Således glider navigationen (eller ruller) som normalt og stikker derefter til toppen.
En ekstra detaljer, der er rigtig flot her, er, hvordan navigationen fremhæver den del af siden, du ser i øjeblikket. Da dette er et enkelt side design, er det nyttigt at have den aktuelle del af siden identificeret som du ville med den normale "aktuelle side" status for enhver navigation.
Løft tag
En almindelig udvidelse af denne stil er at indarbejde en vis grad af gennemsigtighed i det klæbende lag. I mange af de eksempler, du finder her, gøres dette ved simpelthen at have en ujævn kant til det klæbende element. Nogle gange gøres dette ved at have et element stikker ud fra den faste stang, andre gange med en skrå kant. På webstedet Raise the Roof er det opnået med en meget organisk og næsten tilfældig grænse.
I denne prøve finder vi et interessant visuelt resultat. Gennem brugen af overlappende elementer skaber siden visuel dybde, da indholdet ruller bag hovedet. Dette understreges yderligere af månen i baggrunden, der også er rettet. Slutresultatet er tre visuelle lag. En sådan dybde giver en stor grad af visuel interesse og kan skabe et visuelt slående design.
Velkommen til vandet
Velkommen til vandet er en temmelig usædvanlig skabelse. Meget lidt om dette websted passer til normerne af weblayout og design. Af særlig interesse for emnet i denne artikel er den faste overskrift. På dette websted tjener det faste element som et navigationsværktøj til webstedet. Men på mange måder har det mere af en værktøjslinje at føle det.
Yderligere prøver af faste overskrifter
Her er nogle ekstra eksempler på faste overskrifter. Du finder en bred vifte af stilarter og subtile variationer her.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Lav bedre apps
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb Guitarer
Trussystem
Faste fodfødder
Måske er det mest oplagte modsætning til den faste overskrift det faste fodfæste. I sådanne tilfælde sidder sidens side på bunden af skærmen. Når brugeren ruller, forbliver elementet på plads.
Ligesom ethvert andet fast element er oprettelse af et fokuspunkt stadig det primære mål. Interessant nok med fodfødte som disse er det oftest en sekundær funktion, der stadig er et primært mål.
Unleaded Group
Unleaded Group-webstedet er et glimrende eksempel på dette. Her indeholder den faste footer elementer, der er handlingsorienterede og strejker til kerneformålet med webstedet. Først bemærk at alle elementer i denne bar er ting, en bruger kan gøre: fremme dem på sociale medier, ring et telefonopkald eller mail dem. For det andet er de de primære handlinger, som agenturet sandsynligvis vil have dig til at tage. De vil enten have dig til at promovere dem eller kontakte dem. Disse er de primære grunde til at have et websted som dette. Så det giver god mening at rette dem på plads, jeg en fodbold, hvor de får meget opmærksomhed.
Envato
Envato-webstedet har også en fast fodplade. Her indeholder baren webstedets primære logo, som er interessant blevet flyttet her fra den typiske øverste venstre. Helt ærligt, for et mærke som Envato er det ikke et problem. Du finder også en række drop down-menuer, der lancerer dig på deres forskellige webejendomme. Denne enkle funktion er deres virkelige mål. Faktisk kan du sige, at denne virksomhedsprofilside ikke er rigtig, hvor de vil have folk til at ende. Som sådan er fokus på at køre dig tilbage til deres indholdswebsteder fremtrædende og uundgåelig.
Kiyuco
For mange websteder som denne er deres e-mail marketing programmer af afgørende betydning. Som sådan har en fastplaceret fodplade, der fremhæver prominente tilmeldingsformularen, en lang vej til at vokse sådanne postlister. Kan e-mail marketing hjælpe dig med at promovere dit websted over en længere periode og mere effektivt forfølge klienter? Hvis det er tilfældet, ville det måske være et godt værktøj, at en fast fodplade som denne.
Fast position sidebjælker
Låsningselementer på en webside på plads er ikke noget begrænset til overskrifter og sidefødder, selv om de måske er de mest populære. Det ser ud til, at en fast position sidebar er et nært sekund.
Faste sidebjælker indeholder ofte meget lignende oplysninger til, hvad du ville finde i et overskrift. Dette omfatter ting som logoer, navigation og sociale medier værktøjer. Her er nogle eksempler at overveje, hvis du vil bruge denne tilgang.
Jorge Rigabert
Dette smukke websted er et perfekt eksempel på stilen på arbejdspladsen. Her sidebjælken indeholder siderne primære branding og navigation muligheder. Denne sidebar-type tilgang er stor, fordi den holder navigationen i betragtning, da siden ruller, men også fordi den ikke krydser med indholdet, når det bevæger sig. Selvom dette kan være en subtil skelnen, giver den en utrolig jævn grænseflade. Websteder som dette viser en elegance, der ser ud til at være enkel, men det er utrolig svært at sætte sammen.
Flere farer flere helte
Jeg elsker virkelig den måde, dette websted fungerer på. De faste elementer i sidepanelet er de kernefunktioner, som webstedsejere vil have dig til at tage. Mere end noget, de vil have dig til at høre musikken! Som sådan er den fremtrædende og permanent på skærmen "play" -funktion klar og venter. Jeg kan ikke forestille mig et mere kritisk element til webstedet, og for at få det så fremtrædende vist, giver det bare god mening. Og du er nødt til at elske at det ikke er blevet præsenteret på en ubehagelig måde; det spiller ikke engang automatisk afspilning. Kudos til designeren, der styrede denne fristelse.
Yowza
Nogle gange er det ønskeligt at oprette et enkelt klæbrig element, der fremmer en bestemt funktion. Vi har set dette med forskellige feedback- og supporttjenester, som du kan plugge ind på dit websted. I dette tilfælde er en Facebook-lignende knap blevet anbragt på siden af siden. Den forbliver på plads, mens du ruller på siden. Dette trækker selvfølgelig brugerens opmærksomhed på elementet og opfordrer dem til at bruge det. Jeg vil sige dette viser magt og betydning af sociale henvisninger i en web-baseret forretning som denne.
Som en sidebemærkning elsker jeg områdets twist på 10px øverste grænse, der er blevet så populær. Her ruller elementet simpelthen forbi. Ikke en dramatisk animation, men noget om det er sjovt og tilføjer et lag af interesse og liv til webstedet.
Fat-Man Collective
Dette websted følger alle de mønstre, vi har fundet i vores tidligere prøver. Men det skiller sig ud på en enorm måde på grund af en simpel animation. Når du ruller ned på siden, animerer og ruller tegnet i sidelinjen. Dette element løfter enkeltvis webstedet til en unik og mindeværdig kategori. Hvordan er det, at noget så trivielt kan have en sådan indvirkning. Det tager denne simple hjemmeside og pumper den fuld af awesomeness. Det viser, at agenturet bag det elsker at polere deres arbejde med de typer af færdiggørelser, som enhver klient kommer til at dø for.
Flere faste sidebarelementer
Her er nogle ekstra eksempler på faste sidebjælker på arbejdspladsen.
Dumme digte
Colin McKinney
informant
Dette er Marcela
Janette D. Council
Kun logo
En tilgang, som vi ikke finder alt det, der ofte er et fast positionslogo. I dette eksempel er logoet låst på plads, selvom siden ruller. Denne atypiske tilgang holder webstedets navn foran og center. Design som dette kan være interessant at overveje. Det er virkelig svært at gætte på, hvorfor de måske har gjort det, men man kan kun antage, at den vigtigste branding er af afgørende betydning. Måske har de meget lignende konkurrence? Måske vil de bare sørge for at huske deres navn? Uanset om det er en interessant teknik, der er værd at huske på, hvis det gælder for dit projekt.
"Tilbage til toppen"
Når det kommer til virkelig lange sider, er en god funktion at tilføje et link, der fører dig til toppen af siden. Og med klæbende elementer kan du oprette et sådant link, der forbliver på samme sted som du ruller på siden. Dette er præcis det, de prøver, der er tilvejebragt her, har gjort.
Ofte er et sådant element placeret lige udenfor layoutet. På denne måde forstyrrer det ikke noget andet i designet, da det krydser siden. Du vil også bemærke, hvordan disse elementer ofte har en pil pege op - måske et indlysende element at inkludere, men meget vigtigt at huske på, da det hurtigt informerer brugerne om dens formål.
Denne fremgangsmåde står i modsætning til begrebet klæbrig hoved. I dette tilfælde er navigationen oftest kun øverst på siden. Så tilbage er der vigtigt, da det giver folk mulighed for hurtigt at hoppe rundt om indholdet af websteder. I tilfælde af websteder med enkeltsider, selv om dette kan være lidt af et irriterende ekstra skridt.
Overlapps
Denne prøve viser et godt ekstra touch, da det ikke viser returneringen til topelementet, medmindre du ikke er faktisk øverst på siden. Måske en indlysende detalje at medtage, men som du finder det er det ikke altid tilfældet. En del af magten i denne tilgang er, at selve handlingen af det fremgår, gør opmærksom på det for at sikre en bruger er opmærksom på det.
To yderligere prøver
De to følgende eksempler har begge ret til de øverste knapper, selv om de er synlige hele tiden. Det er interessant for mig, at dette element hyppigst placeres i nederste højre hjørne af skærmen. Det er ikke den mest fremtrædende del af designet, så måske er sekundær naturen god for et så mindre vigtigt element. Du vil selvfølgelig bemærke selvom elementet stadig fremhæves ved at bryde grænserne og med dristige farver. Jeg formoder, at historiens moral er at overveje dens betydning for brugen af dit design. Hvis det gør hele forskellen, skal du sørge for at den er synlig.
Wildcard tænker
Dusanka & David
Flere faste elementer
I dette sidste eksempel tager vi et kig på et websted, der har mange faste elementer på siden. På mange måder bryder dette websted med de fleste normer for webdesign og layout. Bortset fra logoet i øverste venstre hjørne er næsten ingenting på sit sædvanlige sted.
Vi finder nogle elementer, som vi er bekendt med, baseret på denne artikel, dog som den faste sidelinje. Du vil dog bemærke, at to andre er langt fra typiske. For eksempel er den faste footer, der indeholder nogle site wide links. Ting som privatlivspolitikker og vilkår og betingelser berettiger sjældent en sådan fremtrædende stilling på en side. Men her finder du dem anbragt på siden med nogle andre ret vigtige navigationslinks.
Jeg kan virkelig godt lide, hvordan de har slået brugerkontoforbindelserne til øverste højre hjørne. Det er her, hvor de ofte placeres, men er sjældent faste der uanset scrollning som i dette tilfælde. Jeg kan godt lide dette, fordi det sikrer, at du altid hurtigt kan få adgang til medlemmets funktioner på webstedet; noget, som måske nogle andre apps og hjemmesider kunne have gavn af.
Alt i alt er dette websted langt fra normalt, men noget om det virker utrolig godt og er nemt at elske. Det usædvanlige layout gør det ikke svært at bruge, og slutresultatet er en tydelig og behagelig oplevelse.
Ressourcer
Endelig vil jeg med denne runde gerne medtage nogle nyttige jQuery plugins der adresserer behovet for fastgørelseselementer til et bestemt sted på en side. De tilbyder forskellige funktioner, der passer til forskellige behov, du måtte have, så sørg for at udforske dem alle for at finde den rigtige pasform.
Det store er, at de er alle jQuery-plugins, og de er super enkle at implementere. Hvis du vil producere denne stil, vil disse i det mindste gøre det til et nemt stykke arbejde.
Meerkat
Meerkat er et af mine yndlingsværktøjer til dette job. Det er evnen til at være skjult gør det til et godt værktøj til visning af salgsfremmende indhold eller vigtige funktioner som f.eks. Tilmeldingsskemaer til e-mail.
Stickyscroll
Stickyscroll er et plugin, som giver dig mulighed for at oprette elementer, der rulle med siden, indtil de rammer toppen, og så holder de sig på plads. Dette plugin hjælper også med at sikre, at elementer ikke ruller ind i en footer-region ved at give det en bundgrænse; en god ekstra funktion sikkert.
Waypoints
Waypoints giver dig mulighed for at udløse jQuery-begivenheder, når en bruger ruller til bestemte punkter på en side. Dette er praktisk, hvis du vil fremhæve eller ændre navigationen for at matche brugerens placering på siden. Men det sjove slutter ikke der, da der er utallige ting, du kan gøre for en side eller et design, som en bruger ruller og interagerer med.
Konklusion
Faste elementer er nu et fælles element designere kan sætte på arbejde. Værktøjer til at udføre sådanne funktioner og fuld browser support er ikke længere et problem.
Som sådan er det en god teknik at holde i dit værktøjsbælte og trække ud, når tiden er rigtig. Sådanne tilgange er selvfølgelig ikke den type ting, du bruger hver dag, men kan være utrolig kraftfuld, når du bruger den effektivt.