20 niesamowitych projektów świątecznych ukrytych w CodePen

CodePen to internetowy plac zabaw dla utalentowanych programistów, miejsce, w którym zawsze można znaleźć fajne projekty, aby poszerzyć swoje horyzonty i zobaczyć, co robią inni programiści. Święta na koniec roku to świetny czas, aby zaskoczyć swoich bliskich kreatywnymi osobistymi projektami lub podziękować swoim klientom za pomocą fajnych, nowatorskich projektów, które pomogą w radości z wakacji.

W tym poście przyjrzymy się 20 niesamowitych świątecznych eksperymentów na CodePen, które możesz wykorzystać do inspiracji do tworzenia własnych projektów.

1. Śpiewnik rodzinny na Boże Narodzenie

Ta urocza aplikacja Christmas Christmas Songbook może odtwarzać Twoje ulubione świąteczne piosenki na SoundCloud. Reguły stylu są napisane w języku arkusza stylów LESS, a funkcjonalność odtwarzacza muzyki jest dostarczana przez niestandardową wtyczkę jQuery.

Ikony płatka śniegu i choinki w tle nadają projektowi uroczystej atmosfery, a jeśli najedziesz na pióro, możesz również znaleźć subtelne efekty CSS.

2. Cyfrowa choinka

Projektowanie na Boże Narodzenie to zawsze wdzięczna praca, ponieważ jej typowe elementy wizualne można budować na wiele kreatywnych sposobów. Ten długopis jest tego dobrym przykładem. Na początku można zobaczyć tylko kolorowe trójkąty, pozornie niezwiązane z świętami, ale po kliknięciu przycisku Ujawnij, są one połączone w choinkę. To nie tylko unikalne rozwiązanie, ale także przypomina prostszą grę.

3. Animacja świąteczna z opadem śniegu

Nie musisz używać JavaScript, jeśli chcesz stworzyć fajną animację na Boże Narodzenie. W tym piórze zarówno animacja opadów śniegu, jak i obrazy tła są tworzone wyłącznie w CSS. Warto trochę zbadać kod, ponieważ pokazuje on niesamowite możliwości CSS3. Obraz tła może być nawet pomylony z prawdziwą grafiką SVG.

4. Santa On The Run!

Santa On The Run! to zabawna gra JavaScript na święta korzystająca z frameworka HTML5 phaser.js. W tej grze nie ma zbyt wielu zasad: Święty Mikołaj działa nieskończenie, a przynajmniej dopóki nie upadnie. To pióro daje doskonałą możliwość zrozumienia, jak napisać prostszą grę w JavaScript.

5. Tajny zbieracz imion Świętego Mikołaja

Wybór nazwy z kapelusza był popularnym sposobem w szkołach i biurach, aby wybrać Secret Santas - to pióro jest jedynie cyfrową wersją tej tradycji. Ponieważ wykorzystuje tylko waniliowy JavaScript, możesz łatwo osadzić go w swojej własnej witrynie. Po prostu zmień nazwy wewnątrz zmiennej podaj.

6. Bombki w czystym CSS

Te wesołe bombki są pisane w czystym CSS, co pozwala wykorzystać reguły dotyczące granic. Różne części kulek są łączone, wykorzystując precyzyjnie obliczone pozycje względne.

Jeśli chcesz szybko dodać świąteczną atmosferę do strony internetowej, po prostu włóż niektóre z tych piłek do odpowiednich miejsc w kolorze pasującym do ogólnego projektu witryny.

7. Ruchome płatki śniegu

Możesz sprawić, że płatki śniegu będą się poruszać, unosząc je nad pulpitem lub przechylając smartfon. Funkcjonalność jest zapewniona przez obiektowy JavaScript, który jest mądrze wykorzystywany przez programistę do tworzenia niestandardowej klasy Snowflake.

Same płatki śniegu są wbudowane w CSS3, a tło wykorzystuje gradienty - w tym pisaku nie ma żadnych obrazów.

8. Wakacyjny eksperyment akordeonowy

Ten akordeon wakacyjny jest po prostu piękny. Jeśli najedziesz kursorem na zakładkę, ostrość zostanie ustawiona przez rozwinięcie, a po jej kliknięciu pojawi się nagle i zakryje całą stronę. Warto zauważyć, że to pióro używa Scalable Vector Graphics (SVG), które są stylizowane za pomocą CSS.

SVG są potężniejsze niż na pierwszy rzut oka, mogą być elegancko rozmieszczone i zaprojektowane z użyciem tych samych reguł stylu, których używamy ze zwykłymi elementami HTML.

9. Płaski czysty CSS Snowman

Kto powiedział, że płaska konstrukcja musi być nudna? Ten uroczy bałwanek z łatwością doda świątecznego ducha do każdego projektu. Nie ma obrazów używanych przez bałwana, jest on całkowicie napisany w CSS. Warto przyjrzeć się trochę kodowi CSS i zobaczyć, jak deweloper używa pseudo selektorów: before i: po osiągnięciu zamierzonego rezultatu.

10. Płatek śniegu CSS3

Możesz ułatwić tworzenie obrazów tylko w CSS3 przy użyciu zaawansowanych narzędzi programistycznych; ten dobrze zaprojektowany płatek śniegu CSS3 jest tego doskonałym przykładem. Deweloper wykorzystał język szablonów Jade, który kompiluje się w HTML, oraz preprocesor Sass CSS, aby zaimplementować ten wspaniały projekt płatka śniegu.

11. Przycisk świąteczny

Inteligentne projekty często wybierają subtelne rozwiązania, podobnie jak śnieżny świąteczny guzik w tym piórze. Ciemnoczerwone tło to idealny wybór na świąteczny projekt; nie wszystko musi przecież być zielone.

Kolory, gradienty, krój pisma i efekt zawisu sprawiają, że ten przycisk jest bardzo elegancki i uroczysty. Potrzebujesz tylko kilku z nich, aby szybko ozdobić stronę na Boże Narodzenie.

12. Parallax Happy Holiday

Jeśli lubisz przewijanie paralaksy, dlaczego nie chcesz go używać do swoich świątecznych projektów? Twórca tego pióra mądrze eksperymentował z efektem i używał wtyczki jQuery Parallax.js w mniej powszechny sposób, efekt przewijania nie jest pionowy jak zwykle, ale poziomy. Atmosferę świąteczną potęgują imponujące opady śniegu

Gdybym musiał wybrać jakąkolwiek wadę tego pióra, byłby to wybór koloru: białe litery na częściowo białym tle znacznie osłabiają dostępność projektu.

13. Świąteczny papier do pakowania CSS

Za pomocą CSS3 możesz stworzyć całkowicie unikalny świąteczny papier do pakowania. Twórca tego pióra pokazuje nie tylko jeden, ale sześć wariantów. Piękne wzory uzyskuje się dzięki inteligentnemu wykorzystaniu gradientów CSS i właściwości trybu mieszania tła.

Jeszcze więcej fajnych przykładów i szczegółowe wyjaśnienia można znaleźć na własnej stronie dewelopera.

14. Pudełko w pudełku

Ten pomysłowy projekt został zainspirowany tradycyjnymi rosyjskimi lalkami (lalką wewnątrz lalki). Jeśli otworzysz zewnętrzne pudełko, klikając na nie, odkryje ono wewnętrzne pudełko, które jest również zewnętrznym pudełkiem innego wewnętrznego pudełka. Funkcjonalność jest napisana w jQuery, a dokładne miejsca pól są ustawiane za pomocą reguł bezwzględnych i względnych pozycji w pliku CSS.

15. Pudełko z efektem skórki papieru

Jeśli uda ci się usunąć wstążkę z tego prezentu, przeciągając ją, możesz spojrzeć na efekt superkolistej skórki papieru, który ujawnia wewnętrzną zawartość prezentu. Możesz przeczytać pełny samouczek na stronie dewelopera, jest to sztuczka, którą zdecydowanie warto się nauczyć. Jeśli chcesz po prostu użyć kodu, który możesz sklonować również z GitHub.

16. Animowane płótno Holiday Spirit

Święta Bożego Narodzenia mogą być świetnym czasem na eksperymentowanie z nowymi rzeczami, tak jak deweloper zrobił to w tym piórze, używając płótna HTML5 jako animowanego tła. Płótno pojawia się przed treścią (Happy Holidays!) W pliku HTML i jest ustawione jako tło za pomocą inteligentnego pozycjonowania CSS.

Pióro używa również skryptu animacji tła dołączonego jako oddzielny plik JavaScript.

17. Interfejs podarunkowy

Ta przyciągająca wzrok karta podarunkowa jest nie tylko na Święta Bożego Narodzenia, ale może być używana w dowolnym momencie, gdy chcesz zaskoczyć swoich użytkowników prezentem na swojej stronie. Nie opiera się na JavaScript, ponieważ jest całkowicie napisany w języku arkusza stylów Sass.

Projekt wykorzystuje właściwość CSS3 ścieżki klipu, która pozwala programistom wyświetlać tylko określony region elementu, zamiast pokazywać cały jego obszar.

18. Czysta wesoła kartka świąteczna CSS

Ten nieskończenie roześmiany Mikołaj - używając tylko HTML i CSS3 - może dać ci możliwość zrozumienia, w jaki sposób składnia animacji klatek kluczowych może być używana w praktyce. W CSS3 możesz użyć reguły @keyframes, aby określić reguły animacji, a następnie możesz powiązać określoną animację z określonym elementem przy użyciu właściwości CSS3 animacji.

Musisz dodać nazwę klatki kluczowej jako pierwszą wartość właściwości animacji, tak jak deweloper zrobił to za pomocą niestandardowych klatek kluczowych o nazwie bodyLaugh, beardLaugh, headLaugh i mouthLaugh specjalnie stworzonych dla tego pióra.

19. Xmas Cracker

Jeśli najedziesz na ten imponujący Xmas Cracker, ujawni on wyjątkową wiadomość świąteczną, która jest niesamowitym sposobem na życzenie Wesołych Świąt swoim gościom. HTML jest napisany w języku HAML, HTML Abstraction Markup Language, podczas gdy zasady stylu wykorzystują siłę języka Sass Syntactically Awesome Styesheets.

Rezultat jest naprawdę inteligentny i niesamowity. Dodając trochę więcej JavaScript, można go nawet użyć do dostarczania niestandardowych cytatów lub wiadomości do użytkowników.

20. Migające światła świąteczne

Te migające lampki świąteczne mogą szybko nadać niepowtarzalną atmosferę każdej stronie internetowej. Kod frontonu jest napisany w języku HAML, który kompiluje się w HTML, Sass, który kompiluje się w CSS, i jQuery.

Animowany efekt świecący jest osiągany przez wspomnianą wcześniej regułę @keyframes dostarczoną przez CSS3. Kolory diod są ustawiane w pliku jQuery przez dodanie 50 stopni do wartości odcienia poprzedniej diody przy użyciu skali kolorów HSL.