Klippning, Klippning, och Mer Klippning!

0
13

Det finns så många saker du kan göra med urklippsbanor. Jag har utforskat dem under ganska lång tid och har kommit fram med olika tekniker och fall användning för dem — och jag vill dela mina slutsatser med dig! Jag hoppas att detta kommer att väcka nya idéer till roliga saker du kan göra med CSS-clip-väg egendom. Förhoppningsvis kommer du antingen sätta dem att använda på dina projekt eller leka och ha kul med dem.

Innan vi fördjupar oss i, det är värt att nämna att detta är mitt tredje inlägg här på CSS-Tricks om klippet vägar. Du kanske vill kontrollera dem ut för en liten bakgrund:

  • Med hjälp av CSS Klippet Vägen för att Skapa Interaktiva Effekter
  • Med hjälp av CSS Klippet Vägen för att Skapa Interaktiva Effekter, Del II

Denna artikel är full av nya idéer!

Idé 1: Dubbel-Klipp

Ett snyggt trick är att använda urklippsbanor att minska innehållet många gånger. Det låter kanske självklart, men jag har inte sett många människor använder detta begrepp.

Till exempel, låt oss titta på en expanderande meny:

Se Pennan
Menyn ” mer ” av Mikael Ainalem (@ainalem)
på CodePen.

Klippning kan endast tillämpas på en DOM-nod en gång. En nod kan ha flera aktiva instanser av samma CSS-regel, så som innebär ett klipp-väg per instans. Men det finns ingen övre gräns för hur många gånger du kan kombinera klippt noder. Vi kan till exempel placera en klippt <div> inuti en annan klippt <div> och så vidare. I anor av DOM-noder, vi kan gälla många olika nedskärningar som vi vill.

Det är precis vad jag gjorde i demo ovan. Jag låter klippt node fyll i en annan klippt nod. Moderbolaget fungerar som en gräns, där barnet fyller upp medan du zoomar in. Detta skapar en speciell effekt där en rundad-menyn visas. Tänk på det som en avancerad metod för overflow: hidden.

Du kan naturligtvis hävda att SVGs är bättre lämpade för detta ändamål. Jämfört med urklippsbanor, SVG kan göra mycket mer. Bland annat SVG ger en jämn skalning. Om klippning fullt stöd Bézier-kurvor, samtalet skulle vara annorlunda. Detta är inte fallet i skrivande stund. Oavsett, urklippsbanor är mycket bekvämt. En nod, en CSS-regel och du är bra att gå. Så långt som demo ovan är berörda, urklippsbanor göra ett bra jobb och därmed är ett gångbart alternativ.

Jag satte ihop en kort video som förklarar det inre arbetet i menyn:

Idé 2: Zooma Klipp Vägar

Annan (mindre uppenbart) knep är att använda urklippsbanor för att zooma. Vi kan faktiskt använda CSS övergångar för att animera urklippsbanor!

Övergången är ganska förbluffande i hur det är byggt. I min mening, dess förutom att webben är en av de största språng, som webben har tagits under senare år. Det stöder övergångar mellan en rad olika värden. Urklippsbanor är bland de accepterade värden vi kan animera. Animation i allmänhet, innebär interpolation mellan två ytterligheter. För klippning, detta kan översättas till en interpolation mellan två helt olika vägar. Här är där webben är raffinerade animation system visar sin styrka. Det behöver inte bara arbeta med gemensamma värderingar — det fungerar även när animering uppsättningar av värderingar.

När animering urklippsbanor specifikt, varje koordinat blir interpolerade separat. Detta är viktigt. Det gör urklippsbana animationer ser enhetligt och smidigt.

Låt oss titta på demo. Klicka på en bild för att starta om den effekt:

Se Pennan
Märke klipp ut zooma av Mikael Ainalem (@ainalem)
på CodePen.

Jag använder clip-väg övergångar i denna demo. Det används för att zooma in från en urklippsbana täcker en liten region att gå in i en annan stor en. Den minsta versionen av urklippsbana är mycket mindre än den resolution — med andra ord, det är osynligt för ögat när de tillämpas. Den andra ytterligheten är något större än det virtuella. Vid denna zoom-nivå, inga nedskärningar är synliga eftersom alla klippning sker utanför det synliga området. Animera mellan dessa två olika urklippsbanor skapar en intressant effekt. Den klippta formen verkar för att avslöja innehållet bakom det som det zoomar in.

Som ni kanske har märkt, demo använder olika former. I detta fall, jag använder logotyper populära sko märken. Detta ger dig en uppfattning om vilken effekten skulle se ut när den används i ett mer realistiskt scenario.

Igen, här är en video som går igenom den tekniska saker i fina detaljer:

Idé 3: Klippt Overlay

En annan idé är att använda urklippsbanor att skapa belysa effekter. Till exempel, låt oss säga att vi vill använda urklippsbanor för att skapa ett aktivt i en meny.

Se Pennan
Skev stretchig meny av Mikael Ainalem (@ainalem)
på CodePen.

Demo ovan är för närvarande inte stöds av Safari.

Den klippta sökvägen ovan sträcker sig mellan de olika meny alternativ när man animerar. Förutom att vi med hjälp av en intressant form för att göra UI sticker ut lite.

Demo använder en förändrad kopia av samma innehåll där exemplar sitter på toppen av det befintliga innehållet. Det är placerat i exakt samma position som den menyn och fungerar som aktiv. I huvudsak, det verkar som alla andra vanliga aktiva tillståndet för en meny. Skillnaden är att det är skapat med urklippsbanor snarare än snygga CSS-format på HTML-element.

Med hjälp av klippning gör det möjligt att skapa några ovanliga effekter här. Den skeva form är en sak, men vi får också stretchig effekt också. Menyn levereras med två separata nedskärningar — en på vänster och en på höger — som gör det möjligt att animera snitt med olika timing med övergången förseningar. Resultatet är en tänjbar animation med mycket liten ansträngning. Som standard lättnader är icke-linjär, förseningen orsakar en liten gummisnodd effekt.

Den andra knep här är att tillämpa förseningar beroende på riktning. Om den aktiva staten måste flytta till höger, sedan till höger måste börja animera första, och vice versa. Jag får riktad medvetenhet genom att använda en skvätt JavaScript för att tillämpa rätt klass följaktligen klick.

Idé 4: Skivor av Kakan

Hur ofta ser du en rund expanderande meny på webben? Absurt, eller hur!? Tja, urklippsbanor gör det inte bara möjligt, men ganska trivialt som väl.

Se Pennan
Den cirkulära meny av Mikael Ainalem (@ainalem)
på CodePen.

Vi brukar se menyer som innehåller länkar ordnade i en enda linje eller ens i menyerna, som den första trick vi tittade på. Vad vi gör här stället är att placera dessa länkar i bågar i stället för rektanglar. Med hjälp av rektanglar skulle vara konventionellt sätt, naturligtvis. Tanken här är att utforska en mer mobil interaktion med två specifika UX principer i åtanke:

  • Ett tydligt mål som är bekvämt att peka med tummen
  • Förändring sker nära brännpunkt — den plats där din visuella fokus är just nu

Demo är inte specifikt om urklippsbanor. Jag bara råkar använda urklippsbanor att skapa pennan. Återigen, som utbyggbart menyn demo tidigare, det är en fråga om bekvämlighet. Med klippning och en gräns radie av 50%, jag får bågar jag behöver på nolltid.

Idé 5: Växla

Växlar upphör aldrig att förvåna webbutvecklare som oss. Det verkar som att någon introducerar en ny tolkning av en växla varje vecka. Nåväl, här är mina:

Se Pennan
Inverterad växla av Mikael Ainalem (@ainalem)
på CodePen.

Demo är en remake av denna dribbble skott av Oleg Frolov. Det kombinerar alla tre av de tekniker vi som behandlas i denna artikel. Dessa är:

  • Den dubbla klipp
  • Zooma klipp vägar
  • En klippt overlay

Alla dessa on/off switchar verkar ha en sak gemensamt. De består av en oval bakgrund och en cirkel, som liknar riktiga mekaniska brytare. Hur detta växla fungerar är genom att skala upp en cirkulär urklippsbana inne i en rundad behållare. Behållaren nedskärningar innehållet genom att overflow: hidden, alltså dubbelt klippning.

En annan viktig del av demo är att ha två alternerande versioner i kodspråket. De är de ursprungliga och dess yin-yang inverterad speglad kopia. Med hjälp av två versioner istället för en är, med risk för att vara tjatig, en fråga om bekvämlighet. Med två, vi behöver bara skapa en övergång för den första versionen. Då kan vi återanvända det mesta av det för den andra. Vid slutet av övergångsperioden växla växlar över till den motsatta versionen. Som en inverterad version är identisk med den föregående slutet staten, är det omöjligt att upptäcka skift. Det som är bra med denna teknik är att återanvända delar av animation. Nackdelen är att det jank vi får när vi avbryta animation. Det händer när användaren slag växla innan animeringen är klar.

Låt oss åter ta en titt under huven:

Avslutande ord

Du kanske tror: Prospektering är en sak, men vad händer om produktionen? Kan jag använda urklippsbanor på en webbplats jag arbetar för närvarande på? Är det redo för prime time?

Tja, att frågan inte har något enkelt svar. Det är, bland annat, två problem att ta en närmare titt på:

1. Webbläsare-stöd
2. Prestanda

I skrivande stund finns det, enligt caniuse, ca 93% webbläsare stöd. Jag skulle säga att vi är på randen av en utbredd användning. Observera att detta nummer tar WebKit-prefix hänsyn till.

Det är också alltid IE argument, men det är verkligen inget argument för mig. Jag kan inte se att det är värt att gå den extra milen för IE. Bör du skapa lösningar för en osäker webbläsare? Din användare är bättre med en modern webbläsare. Det är, naturligtvis, några sällsynta fall där arv är ett måste. Men du kommer antagligen inte att tänka på moderna CSS i dessa fall.

Vad sägs om resultatet då? Tja, prestanda blir knepigt när saker hopar sig, men inget som jag skulle säga skulle hindra oss från att använda urklippsbanor idag. Det är alltid mätt prestanda som räknas. Det är troligt att klippning, i genomsnitt, orsakar en större prestanda än andra CSS-regler. Men kom ihåg att den praxis som vi har täckt här är rekommendationer, inte lag. Behandla dem som sådana. Att göra en vana av att mäta prestanda.

Gå på, skär dina webbsidor i bitar. Se vad som händer!