Utklipp, Utklipp, og Mer Klipping!

0
8

Det er så mange ting du kan gjøre med klipping stier. Jeg har vært å utforske dem for en stund og har kommet opp med ulike teknikker og bruksområdene for dem — og jeg ønsker å dele mine funn med dere! Jeg håper dette vil stimulere nye ideer til morsomme ting du kan gjøre med CSS-clip-banen eiendom. Forhåpentligvis, vil du enten sette dem til å bruke på prosjektene dine eller spille rundt og ha det gøy med dem.

Før vi dykke ned i, er det verdt å nevne at dette er mitt tredje innlegg her på CSS-Triks om klippet stier. Du ønsker kanskje å sjekke dem ut for litt bakgrunn:

  • Ved hjelp av CSS Klippet Banen for å Lage Interaktive Effekter
  • Ved hjelp av CSS Klippet Banen for å Lage Interaktive Effekter, Del II

Denne artikkelen er full av nye ideer!

Idé 1: Den Doble Klippet

Et godt triks er å bruke klipping stier å kutte innhold mange ganger. Det kan virke åpenbart, men jeg har ikke sett mange mennesker ved å bruke dette konseptet.

For eksempel, la oss se på en ekspanderende meny:

Se Penn
Menyen mer av Mikael Ainalem (@ainalem)
på CodePen.

Klipping kan bare anvendes til en DOM node gang. En node kan ha flere aktive forekomster av den samme CSS-regel, så det betyr at ett klipp-bane per tilfelle. Likevel, det er ingen øvre grense for hvor mange ganger du kan kombinere klippet noder. Vi kan for eksempel plassere en maskert <div> inne i en annen maskert <div> og så videre. I herkomst av DOM noder, vi kan bruke så mange separate kutt som vi ønsker.

Det er nøyaktig hva jeg gjorde i demo ovenfor. Jeg la en maskert node fyll ut en annen maskert node. Foreldre fungerer som en grense, der barnet fyller opp mens du zoomer inn. Dette skaper en uvanlig effekt der en avrundet-menyen vises. Tenk på det som en avansert metode av overflow: hidden.

Du kan selvfølgelig argumentere for at SVGs er bedre egnet for dette formålet. I forhold til klipping stier, SVG er i stand til å gjøre mye mer. Blant andre ting, SVG gir jevn skalering. Hvis klipping støttes fullt Bézier kurver, samtalen vil bli annerledes. Dette er ikke tilfelle i skrivende stund. Uansett, klipping stier er veldig praktisk. En node, en CSS-regel, og du er godt å gå. Så langt som demo ovenfor er opptatt av, klipping stier gjøre en god jobb, og dermed er et levedyktig alternativ.

Jeg satt sammen en kort video som forklarer det indre arbeidet i menyen:

Idé 2: Zooming Klippet Veier

En annen (mindre opplagt) trikset er å bruke klipping stier for å zoome. Vi kan faktisk bruke CSS overganger for å animere klipping stier!

Overgangen system er forbløffende i hvordan det er bygget. I min mening, sin tillegg til internett er en av de største sprangene at internett har tatt i de siste årene. Den støtter overganger mellom en hel rekke forskjellige verdier. Klipping stier er blant de aksepterte verdier vi kan animere. Animasjon, generelt, betyr interpolering mellom to ytterligheter. For klipping, betyr dette en interpolering mellom to fullstendig forskjellige baner. Her er der nettet er raffinert animasjon system viser sin styrke. Det betyr ikke bare arbeidet med enslige verdier — det fungerer også når du blir sett av verdier.

Når blir klipping stier spesielt, hver koordinere blir interpolert separat. Dette er viktig. Det gjør beskjæringsbane animasjoner ser sammenhengende og glatt.

La oss se på demoen. Klikk på et bilde for å starte effekt:

Se Penn
Helt kuttet zoom av Mikael Ainalem (@ainalem)
på CodePen.

Jeg bruker clip-banen overganger i denne demoen. Det brukes til å zoome inn fra en beskjæringsbane som dekker et lite område å gå inn i en annen stor en. Den minste versjonen av beskjæringsbane er mye mindre enn oppløsning — med andre ord, det er usynlig for øyet når den brukes. Den andre ytterligheten er litt større enn viewport. På dette zoomnivået, ingen kutt er synlig siden alle klipping finner sted utenfor det synlige området. Animerte mellom disse to forskjellige klipping stier, skaper en interessant effekt. Det maskert form ser ut til å avsløre innholdet bak det som det zoomer inn.

Som du kanskje har lagt merke til, den demo bruker forskjellige former. I dette tilfellet, jeg bruker logoer av populære sko merker. Dette gir deg en idé om hva effekten vil se ut når den brukes i et mer realistisk scenario.

Igjen, her er en video som går gjennom den tekniske ting i fine detaljer:

Idé 3: En Maskert Overlegg

En annen idé er å bruke klipping stier for å skape merke virkninger. For eksempel, la oss si at vi ønsker å bruke klipping stier for å skape en aktiv tilstand i en meny.

Se Penn
Skjev elastiske meny av Mikael Ainalem (@ainalem)
på CodePen.

Den demo ovenfor er for øyeblikket ikke støttes av Safari.

Den avkuttede banen ovenfor strekker seg mellom de forskjellige meny-alternativer når det animerer. Dessuten, vi bruker en interessant form for å gjøre BRUKERGRENSESNITTET skiller seg ut litt.

Den demo bruker en endret kopi av det samme innholdet der kopi sitter på toppen av eksisterende innhold. Det er satt i nøyaktig samme posisjon som meny og fungerer som aktiv tilstand. I hovedsak, det ser ut som alle andre vanlige aktiv stat for en meny. Forskjellen er at det er opprettet med klipping stier snarere enn fancy CSS-stiler for HTML-elementer.

Ved hjelp av klipping gjør det mulig å skape noen uvanlige bivirkninger her. Den skjeve form er en ting, men vi får også den elastiske effekt også. Menyen kommer med to separate kutt — en på venstre side og ett på høyre — som gjør det mulig å animere kutt med ulike timing med overgang til forsinkelser. Resultatet er en elastiske animasjon med svært liten innsats. Som standard lettelser er ikke-lineær, forsinkelsen fører til en liten gummi band effekt.

Det andre trikset her er å bruke forsinkelser, avhengig av retning. Hvis den aktive tilstanden behov for å flytte til høyre, så høyre side må begynne å animere første, og vice versa. Jeg får retningsbestemt bevissthet ved hjelp av en dash av JavaScript for å bruke riktig klasse i henhold til dette på klikk.

Idé 4: Stykker av Kaken

Hvor ofte ser du en sirkulær ekspanderende meny på nettet? Absurd, rett!? Vel, klipping stier som ikke bare gjør det mulig, men ganske trivielt som godt.

Se Penn
Den sirkulære meny av Mikael Ainalem (@ainalem)
på CodePen.

Vi vanligvis se menyer som inneholder linker bestilt i en enkelt linje eller i dropdowns, som den første triks vi så på. Det vi gjør her i stedet plasserer disse lenkene inne buer snarere enn rektangler. Ved hjelp av rektangler ville være den vanlige måten, selvfølgelig. Ideen her er å utforske en mer mobilvennlig interaksjon med to spesifikke UX prinsipper i tankene:

  • Et klart mål som er behagelig å trykke med tommelen
  • Endre sted nær brennpunkt — stedet der din visuelle fokus er i øyeblikket

Demoen er ikke spesifikt om klipping stier. Jeg bare skje til bruk klipping stier for å skape pennen. Igjen, som kan utvides meny demo tidligere, er det et spørsmål om bekvemmelighet. Med klipping og en border-radius av 50%, får jeg buer jeg trenger på kort tid.

Ideen 5: Slå

Slår aldri slutter å forbløffe web-utviklere som oss. Det virker som om noen introduserer en ny tolkning av et veksle hver uke. Vel, her er mine:

Se Penn
Omvendt slå av Mikael Ainalem (@ainalem)
på CodePen.

Demoen er en remake av denne dribbble skutt av Oleg Frolov. Den kombinerer alle tre av de teknikker vi har dekket i denne artikkelen. Disse er:

  • Den doble klippet
  • Zooming klippet veier
  • En maskert overlegg

Alle disse på/av-brytere synes å ha en ting felles. De består av en oval bakgrunn og en sirkel, som ligner ekte mekaniske brytere. Måten dette veksle fungerer på er ved å skalere opp en sirkulær beskjæringsbane inne i en avrundet container. Beholderen kutt innholdet av overflow: hidden, dvs. dobbelt klipping.

En annen viktig del av demoen er å ha to alternerende versjoner i markup. De er de opprinnelige og dens yin-yang invertert speilet kopi. Ved hjelp av to versjoner i stedet for én, er i fare for å bli repeterende, et spørsmål om bekvemmelighet. Med to, vi trenger bare å opprette en overgang for den første versjonen. Så, vi kan bruke det meste av det for den andre. På slutten av overgangen vippebrytere over til motsatt versjon. Som invertert versjon er identisk med den forrige end state, det er umulig å få øye på skift. Den gode tingen om denne teknikken er å gjenbruke deler av animasjon. Ulempen er jank vi får når avbryte animasjon. Det skjer når brukeren slag veksle før animasjonen har fullført.

La oss igjen ta en titt under panseret:

Avsluttende ord

Du tenker kanskje: Leting er en ting, men hva om produksjon? Kan jeg bruke klipping stier på et nettsted jeg jobber på? Er det klar for prime time?

Vel, det spørsmålet har ikke et enkelt svar. Det er blant annet to problemer å ta en nærmere titt på:

1. Nettleserstøtte
2. Ytelse

I skrivende stund er det, i henhold til caniuse, ca 93% browser support. Jeg vil si vi er på randen av masse adopsjon. Merk dette nummeret tar WebKit-prefiks i betraktning.

Det er også alltid IE argument, men det er egentlig ikke noe argument for meg. Jeg kan ikke se at det er verdt å gå den ekstra mil for IE. Skal du lage løsninger for en usikker nettleser? Brukerne er bedre med en moderne nettleser. Det er, selvfølgelig, noen sjeldne tilfeller der arv er et must. Men har du sannsynligvis ikke vil vurdere moderne CSS i det hele tatt i disse tilfellene.

Hvordan om ytelse da? Vel, ytelse blir vanskelig ting som mount opp, men ingenting som jeg vil si ville hindre oss fra å bruke klipping stier i dag. Det er alltid målbare resultater som teller. Det er sannsynlig at klipping, i gjennomsnitt, fører til en større ytelse rammet enn andre CSS-regler. Men husk at den praksis vi har dekket her er anbefalinger, ikke lov. Behandler dem som sådan. Gjør det til en vane ut av måling av ytelse.

Gå på, kutte dine web sider i stykker. Se hva som skjer!