20 Mahtavat jouluprojektit, jotka on piilotettu CodePeniin

CodePen on online-leikkikenttä lahjakkaille eturakentajille, jossa voit aina löytää viileitä projekteja laajentaa näköalojasi ja nähdä, mitä muut kehittäjät ovat valmiita. Loppuvuodet ovat hyvä aika yllättää rakkaitasi luovilla henkilökohtaisilla projekteilla tai sanoa kiitos asiakkaillesi viileillä, huippuluokan muotoilulla, jotka auttavat lomailijaa.

Tässä viestissä otamme katsomaan 20 mahtavaa joulukokemusta CodePenissä, voit käyttää inspiraatiota omien mallien luomiseen.

1. Perheen joululaulu

Tämä ihastuttava Family Christmas Songbook -sovellus voi toistaa SoundCloudin isännöimiäsi lempikappaleita. Tyyli-säännöt kirjoitetaan LESS-tyylitaulukon kielellä, ja musiikkisoittimen toimintoja tarjoaa mukautettu jQuery-laajennus.

Taustalla olevat lumihiutale- ja joulukuusi-kuvakkeet antavat suunnittelulle juhlallisen tunnelman, ja jos leijuu kynän yli, löydät myös hienovaraisia ​​CSS-tehosteita.

2. Digitaalinen joulukuusi

Joulun suunnitteleminen on aina kiitollinen työ, sillä sen tyypilliset visuaaliset elementit voidaan rakentaa monella luovalla tavalla. Tämä kynä on hyvä esimerkki tästä. Aluksi näet vain värikkäitä kolmioita, jotka näennäisesti eivät liity lomiin, mutta kun napsautat Reveal-painiketta, ne asetetaan yhteen joulukuusi. Se ei ole vain ainutlaatuinen ratkaisu, vaan muistuttaa myös yksinkertaisempaa peliä.

3. Joulun animaatio lumisateella

Sinun ei tarvitse käyttää JavaScriptia, jos haluat luoda viileän animaation jouluun. Tässä kynässä sekä lumisade, että taustakuvat luodaan puhtaasti CSS: ssä. Koodia kannattaa tutkia vähän, koska se näyttää CSS3: n uskomattomia ominaisuuksia. Taustakuva voidaan jopa sekoittaa todelliseen SVG-kuvaan.

4. Santa On Run!

Santa On Run! on hauska JavaScript-peli vapaapäiviä varten, joissa käytetään phaser.js HTML5-pelikehystä. Tässä pelissä ei ole liian monia sääntöjä: Santa juoksee äärettömästi tai ainakin kunnes hän putoaa. Tämä kynä antaa sinulle erinomaisen mahdollisuuden ymmärtää, miten kirjoittaa yksinkertaisempi peli JavaScriptissä.

5. Salaisen sanan nimen valinta

Nimen poiminta hatusta on ollut suosittu tapa kouluissa ja toimistoissa valita Secret Santas - tämä kynä on vain digitaalinen versio tästä perinteestä. Koska se käyttää vain vanilja-JavaScript-ohjelmaa, voit upottaa sen helposti omalle sivustollesi. Muuta vain muuttujan nimiä.

6. Joulupallot Pure CSS: ssä

Nämä iloiset joulupallot on kirjoitettu puhtaalla CSS: llä, jossa otetaan huomioon raja-säteen säännöt. Pallojen eri osat on asetettu yhteen käyttämällä tarkasti laskettuja suhteellisia asemia.

Jos haluat nopeasti lisätä loma-ilmapiirin web-sivulle, aseta vain joitakin näistä palloista sopiviin paikkoihin, jotka vastaavat sivuston kokoa..

7. Liikkuvat lumihiutaleet

Voit tehdä nämä lumihiutaleet liikkumalla siirtämällä niitä työpöydälle tai kallistamalla älypuhelinta. Toiminnallisuudesta huolehtii objektorientoitu JavaScript, jota kehittäjä käyttää älykkäästi mukautetun Snowflake-luokan luomiseksi.

Itse lumihiutaleet on rakennettu CSS3: een, ja taustalla on kaltevuudet - tässä kynässä ei ole kuvia.

8. Holiday Accordion Experiment

Tämä loma harmonikka on yksinkertaisesti kaunis. Jos siirrät välilehden päälle, se keskittyy laajentamalla hieman, ja jos napsautat sitä, se yhtäkkiä avautuu ja peittää koko sivun. On mielenkiintoista huomata, että tämä kynä käyttää skaalautuvaa vektorigrafiikkaa (SVG), joka on muotoiltu CSS: llä.

SVG: t ovat tehokkaampia kuin näyttävät ensi näkemältä, ne voidaan sijoittaa älykkäästi ja suunnitella samalla tyylisääntöillä, joita käytämme tavallisten HTML-elementtien kanssa.

9. Tasainen puhdas CSS-lumiukko

Kuka sanoi, että litteä muotoilu on tylsää? Tämä ihana lumiukko voi helposti lisätä joulun henkeä mihin tahansa muotoiluun. Lumimiehelle ei ole kuvia, se on kirjoitettu kokonaan CSS: ään. On syytä tarkastella CSS-koodia hieman ja nähdä, miten kehittäjä käyttää: ennen ja: pseudo-valitsinten jälkeen saavuttaakseen aiotun tuloksen.

10. CSS3 Snowflake

Voit helpottaa vain CSS3-kuvien luomista käyttämällä edistyksellisiä etupään kehitystyökaluja; tämä hyvin suunniteltu CSS3-lumihiutale on erinomainen esimerkki tästä. Kehittäjä käytti Jade-mallinnuskieliä, joka kootaan HTML-muotoon, ja Sass CSS-esikäsittelijä toteuttamaan tämän upean lumihiutaleiden suunnittelun.

11. Joulupainike

Älykäs muotoilu valitsee usein hienovaraisia ​​ratkaisuja, aivan kuten tämän kynän luminen joulupainike. Tummanpunainen tausta on täydellinen valinta joulun suunnitteluun; Kaikkien ei tarvitse olla vihreitä.

Värit, kaltevuudet, kirjasin ja hover-vaikutus tekevät tästä painikkeesta erittäin tyylikkään ja juhlallisen. Sinun tarvitsee vain muutamia niistä, jotka koristavat nopeasti kristillisen ajan.

12. Parallax Happy Holiday

Jos pidät parallaksirullausta, miksi et käyttäisi sitä lomamalleihisi? Tämän kynän kehittäjä kokeili tarkasti vaikutusta ja käytti Parallax.js-jQuery-laajennusta vähemmän yleisesti, vieritysvaikutus ei ole pystysuora, vaan vaakasuora. Joulun tunnelmaa tehostavat vaikuttava lumisade

Jos minun olisi valittava jokin tämän kynän vika, se olisi värivalinta: valkoisen valkoisen taustan valkoiset kirjaimet heikentävät merkittävästi suunnittelun saavutettavuutta.

13. CSS: n joulupakkauskirja

Voit luoda täysin ainutlaatuisen joulun käärepaperin CSS3: n avulla. Tämän kynän kehittäjä ei näytä vain yhtä vaan kuutta muunnosta. Kauniita kuvioita saavutetaan CSS-gradienttien ja tausta-sekoitus-tilan ominaisuuksien älykäs käyttö.

Löydät vielä viileämpiä esimerkkejä ja yksityiskohtaisen selityksen kehittäjän omalla verkkosivustolla.

14. Laatikko laatikon sisällä

Tämä mielikuvituksellinen muotoilu on saanut inspiraationsa perinteisistä venäläisistä nukkeista (nuken sisällä olevasta nukesta). Jos avaat ulkoisen laatikon napsauttamalla sitä, se paljastaa sisäisen laatikon, joka on myös toisen sisäkotelon ulkopakkaus. Toiminto on kirjoitettu jQuery: ssä, ja laatikoiden tarkat paikat asetetaan absoluuttisten ja suhteellisten sijaintisääntöjen avulla CSS-tiedostossa.

15. Lahjapaketti, jossa on paperin kuorivaikutus

Jos onnistut poistamaan nauhan tästä lahjasta vetämällä sen pois, voit tarkastella superkoolin paperin kuorivaikutusta, joka paljastaa lahjan sisäisen sisällön. Voit lukea koko opetusohjelman kehittäjän verkkosivuilta, se on temppu, jota kannattaa oppia. Jos haluat vain käyttää koodia, voit kloonata sen myös GitHubista.

16. Holiday Spirit -maalausmaalaus

Joulu voi olla hyvä aika kokeilla uusia asioita, aivan kuten kehittäjä teki tämän kynän avulla HTML5-kankaalla animoituna taustana. Kankaalle tulee HTML-tiedostossa oleva sisältö (Happy Holidays!) Ja se asetetaan taustaksi älykkään CSS-paikannuksen avulla.

Kynä käyttää myös tausta-animaatiokomentoa, joka sisältyy erilliseen JavaScript-tiedostoon.

17. Lahjakortin käyttöliittymä

Tämä silmiinpistävä lahjakortti ei ole vain joulua, vaan sitä voidaan käyttää milloin tahansa, kun haluat yllättää käyttäjiäsi verkkosivuillasi. Se ei perustu JavaScriptiin, koska se on kirjoitettu kokonaan Sass-tyylisivuille.

Suunnittelussa käytetään CSS3-ominaisuutta, jonka avulla kehittäjät voivat näyttää vain tietyn alueen alueen, sen sijaan, että näytetään koko alue.

18. Pure CSS Hyvää Joulukorttia

Tämä äärettömän naurava joulupukki, joka käyttää vain HTML: ää ja CSS3: ta, voi antaa sinulle mahdollisuuden ymmärtää, miten avainrakenteen animaatio-syntaksia voidaan käyttää käytännössä. CSS3: ssa voit käyttää @keyframes-sääntöä animaation sääntöjen määrittämiseen, ja sitten voit sitoa tämän määritetyn animaation tiettyyn elementtiin käyttämällä animaatiota CSS3-ominaisuutta.

Sinun on lisättävä avainrungon nimi animaatioominaisuuden ensimmäiseksi arvoksi, aivan kuten kehittäjä teki tämän mukautetun avainkehyksen avulla, jota kutsutaan nimellä bodyLaugh, beardLaugh, headLaugh ja suuhun..

19. Xmas Cracker

Jos siirrät tämän vaikuttavan Xmas Crackerin päälle, se paljastaa ainutlaatuisen joulusanoman, joka on hämmästyttävä tapa toivottaa hyvää joulua vierailijoillesi. HTML on kirjoitettu HAML, HTML Abstraction Markup Language, kun taas tyylisäännöt ottavat käyttöön Sass Syntactically Awesome Styesheets -kielen voiman..

Tulos on älykäs ja mahtava. Lisäämällä hieman enemmän JavaScriptiä sitä voidaan käyttää jopa mukautettujen lainausten tai viestien toimittamiseen käyttäjille.

20. Vilkkuva Xmas-valot

Nämä vilkkuvat jouluvalot voivat nopeasti antaa ainutlaatuisen tunnelman kaikille verkkosivuille. Etumerkkikoodi on kirjoitettu HAML: ään, joka kootaan HTML: ksi, Sass, joka kokoaa osaksi CSS, ja jQuery.

Animoidun hehkuva vaikutus saavutetaan edellä mainitulla CSS3: n @keyframes-sääntöllä. Ledien värit asetetaan jQuery-tiedostoon lisäämällä 50 astetta edellisen lyijyn värisävyn arvoon HSL-väriasteella.