Inhoud
- 01. Geanimeerd zonnestelsel
- 02. Walvis
- 03. Jelly menu
- 04. Versleepbare overloop
- 05. Vloeiend raster met tekstuitlijning: uitvullen
- 06. Squishy knoppen
- 07. Pure CSS-peeling plakkerig
- 08. tekst tekst tekst
- 09. Ballen van angst
- 10. Scheurbare doek
- 11. JavaScript-trein
- 12. Zwaartepunten
CodePen is een code-editor die in uw browser werkt en u direct voorbeelden van uw werk geeft. Het is ook een geweldige plek om uw creaties te delen en te ontdekken wat anderen doen. Hier hebben we een overzicht samengesteld van enkele van de beste UI-elementen en animaties die op CodePen zijn gedeeld.
01. Geanimeerd zonnestelsel
Dit geanimeerde model, gemaakt door Julian Garnier, toont de acht planeten in een baan om de zon in 3D (ja, je leest het goed - ondanks wat je op school te horen kreeg, hebben techneuten onlangs besloten dat Pluto niet langer officieel een planeet is). De demo is geïnspireerd op soortgelijke projecten van Alex Giron en Nicolas Gallager.
02. Walvis
Aangepast van deze Flash-animatie van een walvis die je muis over het scherm volgt, is Diego Leme's CodePen-versie gemaakt met SVG en JavaScript. Het is een goed voorbeeld van hoe enkele eenvoudige vormen kunnen samenwerken om iets verbazingwekkends te creëren.
03. Jelly menu
Dit ziet eruit als elk ander menu totdat je het een scroll geeft en ontdekt dat het van gelei is gemaakt! Menu-items buigen als ze bewegen en draaien weer op hun plaats als ze stilstaan.
04. Versleepbare overloop
Soms werken uw plannen voor het instellen van tekst en de tekst zelf niet samen. Met de versleepbare overloop kunt u alles netjes houden zonder concessies te doen aan de inhoud. Tekst vervaagt wanneer deze de balken raakt en kan worden gescrolld door te slepen.
05. Vloeiend raster met tekstuitlijning: uitvullen
Deze handige techniek maakt gebruik van tekstuitlijning: uitvullen om een vloeiend raster te maken voor uw responsieve lay-outs, zodat u geen horizontale marges, zwevende of duidelijke fixes hoeft te definiëren. Je kunt er meer over lezen in de blogpost van Patrick Kunka.
06. Squishy knoppen
Deze ongelooflijk zachte knoppen zorgen voor een pseudo-tactiele ervaring op uw scherm, zelfs als ze met een muis worden gebruikt. We hebben ze nog niet op een aanraakinterface geprobeerd, maar we weten zeker dat ze ons versteld zullen doen staan.
07. Pure CSS-peeling plakkerig
Deze CSS-sticky roept een aangenaam tastbaar geheugen op, dit keer van een label dat gemakkelijk loslaat om iets anders te onthullen.
08. tekst tekst tekst
Geef wat titeltekst weer via een scrollend rond venster in James-Bond-intro-stijl. Het venster kaatst terug wanneer het het einde van de tekst raakt.
09. Ballen van angst
Deze ballen zijn op een griezelige, levensechte manier bang voor je muisaanwijzer. Als je agressief beweegt, raken ze in paniek en verspreiden ze zich, maar als je langzaam nadert, drijven ze weg met dezelfde snelheid, waarbij ze altijd een bepaalde afstand aanhouden. Interessant is dat als je te ver weg komt ze samenklonteren en nieuwsgierig naar je toe komen.
10. Scheurbare doek
Dit is een gordijn dat je kunt schudden. Nee, het is meer dan dat. Je kunt het heel hard schudden. Het is zelfs mogelijk om gaten te maken en er stukjes af te scheuren, die bevredigend rond het scherm stuiteren. Je kunt dit ding grondig vernielen en je een echte vandaal voelen.
11. JavaScript-trein
Deze spookachtige trein slingert door een reeks schimmige tunnels. Een ongelooflijke creatie met een kleine hoeveelheid code.
12. Zwaartepunten
Hemellichamen zweven doelloos rond in deze simulator totdat je de boel opschudt door wat zwaartekrachtpunten toe te voegen. Een interessant aspect om op te merken is dat de zwaartekrachtpunten zelf tot elkaar worden aangetrokken, zodat ze langzaam naar elkaar toe kruipen totdat ze samenkomen om een groter, krachtiger punt te vormen.
