20 fantastiska julprojekt dolda i CodePen
CodePen är en online lekplats för begåvade front-end-utvecklare, en plats där du alltid kan hitta coola projekt för att bredda dina horisonter och se vilka andra utvecklare som är uppe till. Årsskiftet är en bra tid att överraska dina nära och kära med kreativa personliga projekt eller säga tack till dina kunder med några coola och avancerade mönster som kommer att hjälpa semestern.
I det här inlägget tar vi en titt på 20 fantastiska julexperiment på CodePen, som du kan använda för inspiration för att skapa egna design.
1. Family Christmas Songbook
Denna härliga Family Christmas Songbook-app kan spela dina favoritjulsångar på SoundCloud. Stilreglerna är skrivna i LÄSER stilarkspråk, och funktionaliteten för musikspelaren tillhandahålls av ett anpassat jQuery-plugin.
Snöflingorna och julgranens ikoner i bakgrunden ger en högtidlig atmosfär till designen, och om du svävar över pennan kan du också hitta några subtila CSS-effekter.
2. Digital julgran
Att designa för jul är alltid ett tacksamt jobb, eftersom dess typiska visuella element kan byggas på många kreativa sätt. Denna penna är ett bra exempel på detta. Först kan man bara se färgglada trianglar som inte är relaterade till semestern, men när du klickar på Reveal-knappen sätts de samman i ett julgran. Det är inte bara en unik lösning, utan också påminner om ett enklare spel.
3. Juliming med snöfall
Du behöver inte nödvändigtvis använda JavaScript, om du vill skapa en cool animation till jul. I denna penna skapas både snöfallanimationen och bakgrundsbilden rent i CSS. Det är värt att granska koden lite, eftersom den visar de otroliga möjligheterna hos CSS3. Bakgrundsbilden kan till och med misstas för en riktig SVG-grafik.
4. Santa på körningen!
Santa på körningen! är ett roligt JavaScript-spel för semestern som använder sig av phaser.js HTML5-spelramen. Det finns inte så många regler i detta spel: Santa kör oändligt, eller åtminstone tills han faller ner. Denna penna ger dig ett utmärkt tillfälle att förstå hur man skriver ett enklare spel i JavaScript.
5. Secret Santa Name Picker
Att plocka ett namn ur en hatt har varit ett populärt sätt i skolor och kontor att välja Secret Santas - den här penna är bara en digital version av denna tradition. Eftersom det bara använder vanilj JavaScript, kan du enkelt lägga in det på din egen webbplats. Ändra bara namnen inom givningsvariabeln.
6. Julbollar i ren CSS
Dessa glada julbollar är skrivna i ren CSS som tar hävstång av gränslinjerna. Bollens olika delar sätts samman genom att använda exakt beräknade relativa positioner.
Om du snabbt vill lägga till en semesteratmosfär till en webbsida, lägg bara några av dessa bollar till lämpliga platser i en färg som matchar webbplatsens övergripande utformning.
7. rörliga snöflingor
Du kan göra dessa snöflingor rör sig genom att sväva över dem på skrivbordet eller genom att luta din smartphone. Funktionaliteten tillhandahålls av objektorienterad JavaScript som smart används av utvecklaren för att skapa en anpassad Snowflake-klass.
Snöflingorna själva är byggda i CSS3, och bakgrunden använder gradienter - det finns inga bilder i den här penna alls.
8. Holiday Accordion Experiment
Detta semesterspel är helt enkelt vackert. Om du sveper över en flik kommer det att fokusera genom att expandera lite, och om du klickar på det plötsligt dyker upp och täcker hela sidan. Det är intressant att notera att den här pennan använder skalbar vektorgrafik (SVG) som är utformad med CSS.
SVGs är kraftfullare än de verkar vara vid första anblicken, de kan vara smart positionerade och utformade med samma stilregler som vi använder med vanliga HTML-element.
9. Flat Pure CSS Snowman
Vem sa att platt design behöver vara tråkig? Denna underbara snögubbe kan enkelt lägga till julen i alla stilar. Det finns inga bilder som används för snögubben, det är helt skrivet i CSS. Det är värt att ta en titt på CSS-koden lite och se hur utvecklaren använder: före och: efter pseudo-selektorerna för att uppnå det avsedda resultatet.
10. CSS3 Snowflake
Du kan underlätta skapandet av CSS3-bara bilder genom att använda avancerade utvecklingsverktyg för avancerad utveckling. Denna snygga CSS3 snöflingan är ett utmärkt exempel på detta. Utvecklaren utnyttjade Jade-templerande språk som kompilerar till HTML, och Sass CSS preprocessor för att implementera denna fantastiska snöflinga design.
11. Julknapp
Smarta designer väljer ofta subtila lösningar, precis som den snöiga julknappen i den här penna. Den mörkröda bakgrunden är ett perfekt val för en juldesign; inte allt behöver vara grönt trots allt.
Färgerna, gradienterna, typsnittet och svängningseffekten gör den här knappen mycket elegant och högtidlig. Du behöver bara några av dem för att snabbt dekorera en plats för Kristus.
12. Parallax Happy Holiday
Om du gillar parallax rullning, varför skulle du inte använda den för dina semesterdesigner? Utvecklaren av den här pennan experimenterade smart med effekten, och använde Parallax.js jQuery-plugin på ett mindre vanligt sätt. Rullningseffekten är inte vertikal som vanligt men horisontell. Julstämningen intensifieras med ett imponerande snöfall
Om jag var tvungen att välja vilken typ av penna som helst, skulle det vara färgvalet: vita bokstäver på en delvis vit bakgrund försämrar tillgängligheten av designen väsentligt.
13. CSS Julpapperspapper
Du kan skapa ett helt unikt julpapperspapper med hjälp av CSS3. Utvecklaren av denna penna visar inte bara en, men sex varianter för detta. De vackra mönstren uppnås genom det smarta utnyttjandet av CSS-gradienter och egenskapen bakomblandningsläge.
Du hittar ännu mer coola exempel och en detaljerad förklaring på utvecklarens egen webbplats.
14. Boks inom en låda
Denna fantasifulla design inspirerades av traditionella ryska dockor (en docka inuti en docka). Om du öppnar ytterlådan genom att klicka på den, avslöjar den en innerlåda som också är ytterlådan i en annan innerlåda. Funktionen är skriven i jQuery, och de exakta platserna för lådorna ställs in med hjälp av absoluta och relativa lägesregler i CSS-filen.
15. Presentförpackning med pappersskalningseffekt
Om du lyckas ta bort bandet från den här gåvan genom att dra den bort kan du titta på superkoolpappersskalningseffekten som avslöjar presentens inre innehåll. Du kan läsa hela handledningen på utvecklarens webbplats, det är ett knep att det är definitivt värt att lära. Om du bara vill använda koden kan du klona den från GitHub också.
16. Holiday Spirit Animerad Canvas
Jul kan vara en bra tid för att experimentera med nya saker, precis som utvecklaren gjorde det i den här pennan genom att använda HTML5-duk som en animerad bakgrund. Duken finns före innehållet (Happy Holidays!) I HTML-filen, och den är inställd som bakgrund med hjälp av smart CSS-positionering.
Pennan använder också ett bakgrunds animationsskript som ingår som en separat JavaScript-fil.
17. Presentkort UI
Detta iögonfallande presentkort är inte bara till jul, men kan användas när som helst när du vill överraska dina användare med en gåva på din hemsida. Det är inte beroende av JavaScript, eftersom det är helt skrivet i Sass-stilarkspråk.
Designen använder sig av CSS3-egenskapen för klippvägen som tillåter att utvecklare bara visar en viss region av ett element istället för att visa hela området.
18. Rent CSS Glad julkort
Denna oändligt skratta Santa - med bara HTML och CSS3 - kan ge dig möjlighet att förstå hur keyframe animationssyntaxen kan användas i praktiken. I CSS3 kan du använda @keyframes-regeln för att ange regler för en animering, och sedan kan du binda den här angivna animationen till ett visst element genom att använda animeringen CSS3-egenskapen.
Du måste lägga till namnet på keyframe som det första värdet av animeringsegenskapen, precis som utvecklaren gjorde det med de anpassade nyckelramarna kallad bodyLaugh, beardLaugh, headLaugh och mouthLaugh som är speciellt skapade för denna penna.
19. Xmas Cracker
Om du svävar över denna imponerande Xmas Cracker, avslöjar den ett unikt julmeddelande som är ett fantastiskt sätt att önska en god jul till dina besökare. HTML är skrivet i HAML, HTML Abstraction Markup Language, medan stilreglerna tar hävstångseffekt av kraften i Sass Syntactically Awesome Styesheets-språket.
Resultatet är smart och fantastiskt. Genom att lägga till lite mer JavaScript kan det till och med användas för att leverera anpassade citat eller meddelanden till användarna.
20. Blinkande Xmas Lights
Dessa blinkande julljus kan snabbt ge en unik atmosfär till vilken webbplats som helst. Front-end-koden är skriven i HAML som kompilerar till HTML, Sass som kompilerar till CSS och jQuery.
Den animerade glödande effekten uppnås genom den ovan nämnda @keyframes-regeln som tillhandahålls av CSS3. Färgen på ledningarna ställs in i jQuery-filen genom att lägga till 50 grader till nyansvärdet för föregående ledd med hjälp av HSL-färgskalan.
