Knippen, Scheren en Meer Knippen!

0
26

Er zijn zo veel dingen die je kunt doen met uitknippaden. Ik heb het verkennen ze al geruime tijd en zijn gekomen met verschillende technieken en het gebruik van de gevallen voor ze — en ik wil graag mijn bevindingen met u! Ik hoop dat dit zal de aanzet geven tot nieuwe ideeën voor leuke dingen die je kunt doen met de CSS-clip-pad eigendom. Hopelijk, zult u hen te gebruiken op uw projecten of spelen en plezier te hebben met hen.

Voordat we dieper in, het is de moeite waard te vermelden dat dit mijn derde post hier op CSS-Tricks over clip paden. Je zou willen om te controleren deze voor een kleine achtergrond:

  • Met behulp van CSS Clip Pad voor het Maken van Interactieve Effecten
  • Met behulp van CSS Clip Pad voor het Maken van Interactieve Effecten, Deel II

Dit artikel is vol van nieuwe ideeën!

Idee 1: De Dubbele Clip

Een handige truc is het gebruik van clipping paths to cut content vele malen. Het klinkt misschien voor de hand, maar ik heb nog niet veel mensen gezien met dit concept.

Bijvoorbeeld, laten we eens kijken naar een uitbreiding van het menu:

Zie de Pen
Het menu meer door Mikael Ainalem (@ainalem)
op CodePen.

Clipping kan alleen worden toegepast op een DOM knooppunt keer. Een knooppunt kan verschillende actieve exemplaren van dezelfde CSS-regel, dus dat betekent een clip-pad per exemplaar. Toch is er geen bovengrens voor het aantal keren dat u kunt combineren geknipt knooppunten. We kunnen, bijvoorbeeld, plaatst u een bijgesneden <div> in een ander geknipt <div> en zo op. In de afkomst van de DOM nodes, we kunnen van toepassing zijn als vele afzonderlijke sneden als we willen.

Dat is precies wat ik heb gedaan in de demo hierboven. Ik laat een onvolledige knooppunt vul een andere afgekapt knooppunt. De ouder fungeert als een grens, die het kind vult tijdens het inzoomen. Dit zorgt voor een ongewone effect waarbij een afgeronde menu verschijnt. Zie het als een geavanceerde methode van overflow: hidden.

U kunt, natuurlijk, beweren dat de SVGs zijn beter geschikt voor dit doel. In vergelijking met uitknippaden, SVG is in staat van het doen van een veel meer. Onder andere dingen, SVG zorgt voor een soepele schalen. Als clipping volledig ondersteund Bézier-curves, zou het gesprek anders. Dit is niet het geval op het moment van schrijven. Ongeacht, uitknippaden zijn erg handig. Een knooppunt, een CSS-regel en je bent goed om te gaan. Zo ver als de demo hierboven is betrokken, uitknippaden doen een goede baan en dus een haalbare optie is.

Ik heb samen korte video met uitleg over de innerlijke werking van het menu:

Idee 2: In-En Uitzoomen Clip Paden

Een andere (minder duidelijk) truc is om gebruik clipping paden voor in-en uitzoomen. In feite kunnen We het gebruik van CSS transitions te animeren uitknippaden!

De overgang systeem is heel verbazingwekkend hoe het is gebouwd. In mijn mening, de aanvulling op de web is een van de grootste sprongen die het internet heeft genomen in de afgelopen jaren. Het ondersteunt de overgangen tussen een hele reeks van verschillende waarden. Clipping paths worden tot de aanvaarde waarden die we kunnen animeren. Animatie, in het algemeen, betekent interpolatie tussen twee uitersten. Voor het knippen, dit vertaalt zich naar een interpolatie tussen twee compleet verschillende paden. Hier is waar het web verfijnde animatie systeem toont zijn kracht. Het maakt niet alleen samen met enkele waarden — het werkt ook in de animatie sets van waarden.

De animatie uitknippaden specifiek, elke coördinaat wordt geïnterpoleerd afzonderlijk. Dit is belangrijk. Het maakt uitknippad animaties kijken samenhangend en soepel.

Laten we eens kijken naar de demo. Klik op een afbeelding om opnieuw het effect:

Zie de Pen
Merk gesneden zoom door Mikael Ainalem (@ainalem)
op CodePen.

Ik ben met behulp van het clip-pad overgangen in deze demo. Het wordt gebruikt om in te zoomen van een clipping path over een kleine regio te gaan op een andere groot. De kleinste versie van het uitknippad is veel kleiner dan de resolutie — in andere woorden, het is onzichtbaar voor het oog wanneer deze wordt toegepast. Het andere uiterste is iets groter dan de viewport. Op dit zoomniveau, geen bezuinigingen zichtbaar zijn omdat alle clipping vindt plaats buiten het zichtbare gebied. Animeren tussen deze twee verschillende uitknippaden zorgt voor een interessant effect. De gesnoeide vorm lijkt te onthullen van de inhoud achter als hij zoomt in.

Zoals je wellicht gemerkt hebt, de demo maakt gebruik van verschillende vormen. In dit geval, ik ben met behulp van logo ‘ s van de populaire schoen merken. Dit geeft u een idee van wat het effect zou uitzien wanneer deze worden gebruikt in een meer realistisch scenario is.

Nogmaals, hier is een video die wandelingen door de technische zaken in detail:

Idee 3: Een Onvolledige Overlay

Een ander idee is het gebruik van clipping paths te maken hoogtepunt effecten. Bijvoorbeeld, laten we zeggen dat we willen gebruiken clipping paths te maken van een actieve staat in een menu.

Zie de Pen
Scheve rekbare menu door Mikael Ainalem (@ainalem)
op CodePen.

De bijgesneden pad boven strekt zich uit tussen de verschillende menu-opties als het bezielt. Daarnaast gebruiken we een interessante vorm heeft te maken met de UI een beetje.

De demo maakt gebruik van een aangepast kopie van de inhoud waar de kopie ligt op de top van de bestaande inhoud. Het is geplaatst in exact dezelfde positie als het menu en dient als de actieve toestand. In essentie, het lijkt net als elke andere regelmatige actieve staat voor een menu. Het verschil is dat het is gemaakt met uitknippaden plaats van fancy CSS-stijlen op HTML-elementen.

Met behulp van knippen kunt maken van sommige ongebruikelijke effecten hier. De scheve vorm is één ding, maar we krijgen ook het elastisch effect. Het menu wordt geleverd met twee aparte sneden — één links en één rechts — die het mogelijk maakt te bezielen, de bezuinigingen met verschillende timing met de overgang van de vertragingen. Het resultaat is een rekbare animatie met zeer weinig inspanning. Als de standaard versoepeling is niet-lineair is, is de vertraging veroorzaakt een lichte rubberen band effect.

De tweede truc hier is om met de vertragingen afhankelijk van de richting. Als de actieve stand moet naar rechts verplaatsen, en vervolgens de juiste kant moet om te beginnen met het animeren van de eerste, en vice versa. Ik krijg de gerichte bewustzijn met behulp van een streepje JavaScript nodig om het toepassen van de juiste klasse dienovereenkomstig aan klikken.

Idee 4: Segmenten van de Cirkel

Hoe vaak zie je niet een circulaire uitbreiding van het menu op het web? Belachelijk, toch?! Goed, uitknippaden het niet alleen mogelijk, maar tamelijk triviaal ook.

Zie de Pen
De cirkelvormige menu door Mikael Ainalem (@ainalem)
op CodePen.

We normaal gesproken menu ‘ s die links bevatten besteld in een enkele lijn of zelfs in de dropdowns, net als de eerste truc die we bekeken. Wat we hier aan het doen bent in plaats daarvan is het plaatsen van die links in bogen plaats van rechthoeken. Met behulp van rechthoeken zou de conventionele manier, natuurlijk. Het idee hier is om te verkennen een meer mobiele-vriendelijke interactie met twee specifieke UX principes in het achterhoofd:

  • Een duidelijke doelgroep, dat is comfortabel in te tikken met een duim
  • Verandering vindt plaats dicht bij de brandpunt — de plaats waar je de visuele focus is op het moment

De demo is niet specifiek over clipping paths. Ik toevallig te gebruiken clipping paths te maken van de pen. Nogmaals, als de uitvouwbare menu demo eerder, het is een kwestie van gemak. Met knippen en een border radius van 50%, krijg ik de bogen moet ik in een mum van tijd.

Idee 5: De In – / Uitschakelen

Schakelt nooit ophouden te verbazen web-ontwikkelaars, zoals ons. Het lijkt wel alsof iemand introduceert een nieuwe interpretatie van een wissel elke week. Nou, hier is de mijne:

Zie de Pen
Omgekeerd schakelen door Mikael Ainalem (@ainalem)
op CodePen.

De demo is een remake van deze dribbble geschoten door Oleg Frolov. Het combineert alle drie de technieken die we in dit artikel. Deze zijn:

  • De dubbele clip
  • Zoomen clip paden
  • Een onvolledige overlay

Al deze aan/uit-schakelaars lijken te hebben één ding gemeen. Ze bestaan uit een ovaal achtergrond en een cirkel, die lijkt op de echte mechanische schakelaars. De manier waarop deze toggle werkt, is door het opschalen van een circulaire clipping pad in een ronde container. De container knipt de inhoud door overflow: hidden, dus dubbel knippen.

Een ander belangrijk deel van de demo is het hebben van twee afwisselende versies in de markup. Zij zijn de oorspronkelijke en de yin-yang omgekeerde gespiegelde kopie. Met behulp van twee versies in plaats van één is, op risico van herhaalde, een kwestie van gemak. Met twee, we hoeven alleen maar om een overgang te creëren voor de eerste versie. Dan kunnen we hergebruiken grootste deel van het voor de tweede. Aan het einde van de overgang van de in – / uitschakelen schakelt over naar de tegenovergestelde versie. Als de omgekeerde versie is identiek met de vorige einde staat, is het onmogelijk om ter plaatse de shift. Het goede ding over deze techniek is het hergebruiken van delen van de animatie. Het nadeel is de jank we krijgen als het onderbreken van de animatie. Dat gebeurt wanneer de gebruiker stoten te schakelen voordat de animatie is voltooid.

Laten we eens kijken onder de motorkap:

Slotwoord

Je zou denken: Verkenning is één ding, maar hoe zit het met de productie? Kan ik gebruik maken van clipping paths) op een site die ik ben momenteel bezig? Is het klaar voor prime time?

Nou, die vraag is niet eenvoudig te beantwoorden. Er zijn onder andere twee problemen om een kijkje te nemen op:

1. Browser ondersteuning
2. Prestaties

Op het moment van schrijven is er, volgens caniuse, ongeveer 93% steun van de browser. Ik zou zeggen dat we op de rand van de massa-adoptie. Let op, dit aantal neemt de WebKit prefix rekening.

Er is ook altijd de IE argument, maar het is echt geen argument voor mij. Ik kan niet zien dat het de moeite waard om te gaan de extra mijl voor IE. Moet u oplossingen voor een onveilige browser? Uw gebruikers zijn beter af met een moderne browser. Er zijn natuurlijk een paar zeldzame gevallen waar de erfenis is een must. Maar je zult waarschijnlijk geen rekening met moderne CSS in die gevallen.

Hoe zit het met de prestaties dan? Goed, de prestaties wordt lastig als dingen oplopen, maar niets dat ik zou zeggen dat zou voorkomen dat we met uitknippaden vandaag. Het is altijd gemeten prestatie die telt. Het is waarschijnlijk dat clipping, gemiddeld, zorgt voor een grotere teruggang in prestaties dan andere CSS-regels. Maar vergeet niet dat de praktijken die we hebben besproken hier zijn aanbevelingen, geen wet. Behandel ze als zodanig. Maak er een gewoonte van om de prestaties te meten.

Kom op, knip uw webpagina ‘ s in stukken. Zie wat er gebeurt!