20 Félelmetes karácsonyi projektek a CodePenben

A CodePen egy online játéktér a tehetséges front-end fejlesztők számára, ahol mindig találhat hűvös projekteket a látószögek kibővítésére, és megnézheti, hogy mire képes a többi fejlesztő. Az év végi ünnepek nagyszerű alkalom arra, hogy a szeretett embereket kreatív személyes projektekkel meglepjék, vagy köszönjük az ügyfeleknek néhány hűvös, élvonalbeli tervet, amely segít a nyaralás élményében..

Ebben a hozzászólásban megpillantunk 20 fantasztikus karácsonyi kísérlet a CodePen-en, hogy saját inspirációhoz használhassa saját terveit.

1. Családi karácsonyi dalkönyv

Ez a kedves családi karácsonyi dalkönyv alkalmazás képes lejátszani a kedvenc karácsonyi dalokat a SoundCloud-on. A stílusszabályokat a LESS stíluslap nyelvén írják, és a zenelejátszó funkcióit egy egyéni jQuery plugin biztosítja..

A háttérben a hópehely és a karácsonyfa ikonjai ünnepélyes légkört adnak a designnak, és ha a toll felett lebeg, talál néhány finom CSS-effektust is.

2. Digitális karácsonyfa

A karácsonyi tervezés mindig hálás feladat, mivel tipikus vizuális elemei sok kreatív módon építhetők. Ez a toll jó példa erre. Először csak színes háromszögek láthatók, amelyek látszólag nem kapcsolódnak az ünnepekhez, de amikor rákattint a Reveal gombra, összeállítják őket egy karácsonyfára. Ez nem csak egy egyedülálló megoldás, hanem egy egyszerűbb játékra is emlékeztet.

3. Karácsonyi animáció hóeséssel

Nem feltétlenül kell JavaScript-t használni, ha hűvös animációt szeretne létrehozni karácsonyra. Ebben a tollban mind a hóesés animációja, mind a háttérképek kizárólag a CSS-ben jönnek létre. Érdemes egy kicsit megvizsgálni a kódot, mivel megmutatja a CSS3 hihetetlen képességeit. A háttérkép még egy valódi SVG-grafikával is tévedhet.

4. Mikulás a futáson!

Santa a futáson! egy szórakoztató JavaScript játék a phaser.js HTML5 játékkeretet használó ünnepekre. Ebben a játékban nincs túl sok szabály: a Santa végtelenül fut, vagy legalábbis addig, amíg le nem esik. Ez a toll kiváló lehetőséget nyújt arra, hogy megértsük, hogyan írhat egy egyszerűbb játékot a JavaScript-ben.

5. Titkos Mikulás Névválasztó

Az iskolákban és irodákban népszerű utat választottak ki egy kalapból, hogy kiválasszák a Secret Santas-t - ez a toll csupán a hagyomány digitális változata. Mivel csak vanília JavaScript-t használ, könnyen beágyazhatja a saját webhelyére. Csak változtassa meg a neveket a megadott változóban.

6. Karácsonyi labdák a Pure CSS-ben

Ezek a vidám karácsonyi bálok tiszta CSS-ben vannak írva, figyelembe véve a határ-sugár szabályait. A golyók különböző részeit pontosan kiszámított relatív pozíciók segítségével állítjuk össze.

Ha szeretne gyorsan hozzáadni egy ünnepi hangulatot egy weblaphoz, csak helyezzen be néhány ilyen golyót a megfelelő helyre egy olyan színben, amely megegyezik a webhely általános tervezésével..

7. Mozgatható hópelyhek

Ezeket a hópelyheket mozgathatja az asztalon vagy az okostelefon billentésével. A funkcionalitást objektum-orientált JavaScript biztosítja, amelyet a fejlesztő finoman használ egy egyedi hópehely osztály létrehozásához.

A hópelyhek maguk a CSS3-ban épülnek, és a háttér színátmeneteket használ - a tollban nincsenek képek.

8. Nyaralási akordion kísérlet

Ez az ünnepi harmonika egyszerűen szép. Ha egy fül fölé húzza, hogy egy kicsit kibővítve összpontosítson, és ha rákattint, hirtelen felugrik, és lefedi az egész oldalt. Érdekes megjegyezni, hogy ez a toll a skálázható vektorgrafikát (SVG) használja, amely CSS-sel van kialakítva.

Az SVG-k erősebbek, mint amilyennek első látásra látszanak, okosan elhelyezhetők és ugyanolyan szabályokkal tervezhetők, mint a szokásos HTML-elemeknél.

9. Lapos tiszta CSS hóember

Ki mondta, hogy a lapos kivitelnek unalmasnak kell lennie? Ez a szép hóember könnyedén hozzáadhatja a karácsonyi szellemet bármilyen designhoz. Nincsenek képek a hóember számára, ez teljesen a CSS-ben íródott. Érdemes egy kicsit megnézni a CSS kódot, és nézze meg, hogy a fejlesztő hogyan használja a következőt: és a pszeudo szelektorok után, hogy elérje a kívánt eredményt.

10. CSS3 Hópehely

A CSS3-alapú képek létrehozását a fejlett front-end fejlesztési eszközök segítségével könnyítheti meg; ez a jól megtervezett CSS3 hópehely kiváló példa erre. A fejlesztő ezt a lenyűgöző hópehely tervezést a HTML-re fordító Jade-sablon nyelvet és a Sass CSS előfeldolgozót használja..

11. Karácsonyi gomb

Az intelligens formatervezési minták gyakran választanak finom megoldásokat, akárcsak a havas karácsonyi gomb a tollban. A sötét piros háttér tökéletes választás a karácsonyi tervezéshez; nem mindennek kell zöldnek lennie.

A színek, a színátmenetek, a betűtípus és a lebegő hatás nagyon elegáns és ünnepélyesvé teszik ezt a gombot. Néhány közülük szüksége van arra, hogy gyorsan díszítse a kereszténység oldalát.

12. Parallaxis boldog ünnep

Ha szereted a parallaxis görgetést, akkor miért nem használnád ezt a nyaralás tervezése során? Ennek a tollnak a fejlesztője ésszerűen kísérletezett a hatással, és a Parallax.js jQuery plugint kevésbé gyakorolta, a görgetési effektus nem függőleges, hanem vízszintes. A karácsonyi hangulatot lenyűgöző havazás erősíti

Ha ezt a tollat ​​bármilyen hibájára kellene választanom, a színválasztás lenne: a fehér alapon lévő fehér betűk jelentősen gyengítik a design elérhetőségét.

13. CSS karácsonyi csomagolópapír

CSS3 segítségével létrehozhat egy teljesen egyedi karácsonyi csomagolópapírt. Ennek a tollnak a fejlesztője nem csak egy, hanem hat változatot mutat be. A gyönyörű mintákat a CSS gradiensek és a háttér-blend mód tulajdonságainak intelligens kihasználása biztosítja.

Még több hűvös példát és részletes magyarázatot találhat a fejlesztő saját honlapján.

14. Doboz belül

Ezt a fantáziadús tervezést a hagyományos orosz babák (a baba belsejében lévő baba) ihlette. Ha megnyitja a külső dobozt, rákattintva rá, egy belső doboz jelenik meg, amely szintén egy másik belső doboz külső doboza. A funkcionalitás jQuery-ben van írva, és a dobozok pontos helyét a CSS fájl abszolút és relatív pozíciószabályainak segítségével állítják be.

15. Ajándékdoboz papírtörlő hatással

Ha sikerül eltávolítani a szalagot ebből az ajándékból, akkor húzza meg a szuperkoolos papírhámozó hatást, amely feltárja az ajándék belső tartalmát. A teljes bemutatót a fejlesztő weboldalán olvashatja, ez egy trükk, amit érdemes megtanulni. Ha csak a kódot szeretné használni, akkor a GitHub-tól is klónozhat.

16. Holiday Spirit Animált vászon

A karácsony nagyszerű alkalom lehet új dolgokkal való kísérletezésre, csakúgy, mint a fejlesztő ebben a tollban, a HTML5 vászon segítségével animált háttérként. A vászon a tartalom (Happy Holidays!) Előtt jelenik meg a HTML-fájlban, és az intelligens CSS-pozicionálás segítségével háttérként van beállítva.

A toll is használ egy háttér animációs szkriptet, amely külön JavaScript fájlként szerepel.

17. Ajándékkártya felhasználói felület

Ez a szemet gyönyörködtető ajándékkártya nemcsak karácsonyra szolgál, hanem bármikor használható, amikor meg akarja lepni a felhasználókat egy ajándékkal a webhelyén. Nem támaszkodik a JavaScriptre, mivel ez teljesen a Sass stíluslap nyelvén íródott.

A design a CSS3 klip-útvonal tulajdonságát használja, amely lehetővé teszi a fejlesztők számára, hogy csak egy adott területet jelenítsenek meg az egész terület helyett..

18. Tiszta CSS boldog karácsonyt kártya

Ez a végtelenül nevető Santa - csak HTML-t és CSS3-t használva - lehetőséget ad arra, hogy megértsük, hogyan lehet használni a keyframe animációs szintaxist a gyakorlatban. A CSS3-ban a @keyframes szabály segítségével adhatja meg az animáció szabályait, majd ezt a megadott animációt egy CSS3-animáció animációjához kötheti..

Az animációs tulajdonság első értékének hozzá kell adnia a kulcskeret nevét, ugyanúgy, mint a fejlesztő, amit a testLaugh, a beardLaugh, a headLaugh és az erre a tollra kifejezetten létrehozott egyedi kulcskeretekkel csinált..

19. Xmas Cracker

Ha lenyűgözi ezt a lenyűgöző Xmas Cracker-et, egy egyedülálló karácsonyi üzenetet tár fel, amely egy csodálatos módja, hogy kellemes karácsonyi ünnepeket kívánjon a látogatóknak. A HTML a HAML-ben, a HTML Abstraction Markup Language-ban van írva, míg a stílusszabályok a Sass Syntactically Awesome Styesheets nyelvének hatalmát befolyásolják.

Az eredmény okos és fantasztikus. Egy kicsit több JavaScript hozzáadásával akár egyéni árajánlatokat vagy üzeneteket is küldhet a felhasználóknak.

20. Villogó Xmas fények

Ezek a villogó karácsonyi fények gyorsan adhatnak egyedülálló hangulatot minden weboldalhoz. A front-end kódot HAML-ben írják, amely HTML-be, Sass-ba fordítva, CSS-be fordítja, és jQuery.

Az animált izzó hatás a CSS3 által biztosított fent említett @keyframes szabály alkalmazásával érhető el. A LED-ek színeit a jQuery fájlban állítja be úgy, hogy a HSL színskála segítségével 50 fokot ad hozzá az előző vezetés színárnyalatához..