К Новому году хочется чего-то красивого и праздничного: фейерверков, подарков, хорошего настроения и немного анимации. В этой статье собраны примеры с ресурса codepen.io, которые подарят вам праздничное новогоднее настроение.
Елка от Dan Wilson
See the Pen 500 Baubles by Dan Wilson (@danwilson) on CodePen.
Елка от Chris Gannon
Красивая анимация svg-ёлки на основе JavaScript-библиотеки GSAP.
See the Pen Merry Christmas Tree! by Chris Gannon (@chrisgannon) on CodePen.
3D-елка от Wakana Y.K.
Рассмотри елку со всех сторон! На основе Three.js.
See the Pen Happy Holidays! 2023 by Wakana Y.K. (@wakana-k) on CodePen.
Сразу 2 новогодних елки от Paulina Hetman
Первая с музыкальным сопровождением.
See the Pen Three.js dancing Tree (for Xmas) by Paulina Hetman (@pehaa) on CodePen.
Вторая в виде открытки.
See the Pen Santa was here. by Paulina Hetman (@pehaa) on CodePen.
Анимация цифр 2024 от Chris Gannon
See the Pen Iridescent 2024 by Chris Gannon (@chrisgannon) on CodePen.
Еще одна анимация цифр, регулируемая ползунком. Автор David East
See the Pen CSS Party by David East (@davideast) on CodePen.
Happy New Year от Swarup Kumar Kuila
Открытка подойдет для поздравления с любым Новым годом.
See the Pen happy new year 2020 by Swarup Kumar Kuila (@uiswarup) on CodePen.
Открытка с текстом 2020 от Dev Loop
Наведите на цифры 2020
See the Pen 2020 Interaction by Dev Loop (@dev_loop) on CodePen.
С Новым годом от Louis Hoebregts
Открой подарок и насладись анимацией! Можно приблизить любую букву и рассмотреть, что же там происходит в новом году.
See the Pen Happy New Year ! by Louis Hoebregts (@Mamboleoo) on CodePen.
Неоновая надпись Happy New Year с анимацией от ashish jangra
See the Pen happy new year 2016 by ashish jangra (@techdesign) on CodePen.
Елки с эффектом параллакса от Dan Zen
See the Pen Happy Holidays from ZIM - Styling nth-child for CodePen Challenge by Dan Zen (@danzen) on CodePen.
Зимний дворик от Ivan Grozdic
See the Pen Magical Winter - pure css - #02 by Ivan Grozdic (@ig_design) on CodePen.
Удивленный Дед Мороз в окне от Jordana Morais
See the Pen Pure CSS Happy Holidays! by Jordana Morais (@jordanamorais) on CodePen.
Спящий Санта от ChhaviKhandelwal
See the Pen Sleeping Santa by chhavi khandelwal (@ChhaviKhandelwal) on CodePen.
Санта. Необычный. Вид сзади.
Автор Mogeli lortkipanidze
See the Pen Merry XXX-mas by Mogeli lortkipanidze (@Hastalavistababy) on CodePen.
Санта останавливается здесь от Chris Gannon
See the Pen Santa Stop Here! by Chris Gannon (@chrisgannon) on CodePen.
Стеклянный шар с котом и елкой от David Evans
See the Pen A very snowy Catmas! by David Evans (@dav3evans) on CodePen.
Поздравление с Рождеством и Новым годом от Flávio Amaral
Приятная незамысловатая открытка с елкой и подарками.
See the Pen Css Christmas Tree by Flávio Amaral (@flavio_amaral) on CodePen.
С Новым кодом от isladjan
See the Pen Happy new Coding by isladjan (@isladjan) on CodePen.
Рождественская бомба от Chris Gannon
Бомба не страшная, а поздравительная.
See the Pen Christmas Bomble by Chris Gannon (@chrisgannon) on CodePen.
Рождественский CSS-календарь от Johnny Fekete
Кликните на каждое из чисел календаря - найдите сюрприз или прочитайте надпись "Возвращайтесь в другой день". Использован только CSS. Разметка с помощью Grid. Ссылка на codepen.io.
Календарь подарков от Olivia Ng
Основан на Grid-разметке и текстурах из градиентов.
See the Pen CSS Grid: Advent Calendar by Olivia Ng (@oliviale) on CodePen.
Вам подарок к Рождеству от GreenSock
See the Pen Christmas Announcement by GreenSock (@GreenSock) on CodePen.
Сколько времени осталось до Нового года от Peter Schmalfeldt
Таймер обратного отсчета на основе jQuery-плагина Flipclocks. CSS и JS-код нужно смотреть в настройках.
See the Pen Happy New Year by Peter Schmalfeldt (@manifestinteractive) on CodePen.
Счетчик обратного отсчета до Нового года от jusuf-azer
See the Pen Countdown to New Year by jusuf-azer (@jusuf-azer) on CodePen.
Идеи для новогодних ярлыков для интернет-магазина от Lauren Ashpole
See the Pen CSS Christmas Tags (Flip on Hover) by Lauren Ashpole (@laurenashpole) on CodePen.
Открытка к Рождеству и Новому году с анимацией от Pradyumna Newalkar
В стиле детской открытки.
See the Pen Christmas Greetings by Pradyumna Newalkar (@pradyumna1) on CodePen.
Merry Christmas от Jon Kantner
See the Pen Christmas Holly and Stroke Animation by Jon Kantner (@jkantner) on CodePen.
Happy New Year от Didi
Вы когда-нибудь хотели, чтобы вас поздравили с Новым годом на разных языках? Наконец-то ваше желание сбылось. Смотрите - и наслаждайтесь.
See the Pen Happy New Year by Didi (@Didi25) on CodePen.
Фейерверк в честь Нового года от Jonas Sandstedt
See the Pen Happy New Year! by Jonas Sandstedt (@sandstedt) on CodePen.
Воздушные шары от ilithya
Подредактированный вариант. Исходник для 2019 года.
See the Pen New Years Balloons by Elen (@ambassador) on CodePen.
Анимационная открытка со снеговиком от Vangel Tzo
Здесь представлен слегка отредактированный вариант для 2020 года. Исходник для 2015 смотрите по ссылке.
See the Pen Skroutz new year css animation! by Elen (@ambassador) on CodePen.
Новогодняя гирлянда от Imapo
See the Pen IMAPO.RU - Happy new year by Imapo (@Imapo) on CodePen.
Гирлянда от Zaur Tigiev
See the Pen New Year Garland — Новогодняя гирлянда by Elen (@ambassador) on CodePen.
Простая открытка со снеговиком на основе HTML/CSS от Svyatoslav Kozinets
See the Pen Snowman | Happy New Year! by Svyatoslav Kozinets (@slavent) on CodePen.
Открывающаяся открытка от ivan
Открытка поздравляет с приходом 2019 года, но это легко исправить в html-коде.
See the Pen Happy New Year Greeting Card by ivan (@ivanbar) on CodePen.
Don't Worry And Happy New Year от Isac Dias
See the Pen Don't Worry And Happy New Year by Isac Dias (@isacdias) on CodePen.
Надпись Happy New Year с анимацией в SVG-стиле от SnailCrusher
See the Pen Happy New Year! -- CSS Only by SnailCrusher (@Sector22) on CodePen.
Поздравление Happy New Year от йети, автор Laurent Heneman
See the Pen HAPPY NEW YEAR ! by Laurent Heneman (@manheman) on CodePen.
Дед Мороз помашет вам рукой от Inverser
Подождите 14 секунд - и Дед Мороз помашет вам рукой
See the Pen Santa waving css+png/Дед Мороз by Inverser (@inverser) on CodePen.
Подарок от от Jon Kantner
See the Pen Shiny Jumping Present by Jon Kantner (@jkantner) on CodePen.
Танцующий снеговик от Christopher Voigt
See the Pen Dancing Snowman by Christopher Voigt (@chlorophyllkid) on CodePen.
Новогодний снег
Снег от Abhishek Sachan
Для снега использована анимация на основе canvas, а для текста применено свойство background-clip: text.
See the Pen Clipped Text with Animation by Elen (@ambassador) on CodePen.
Снег от Alphardex
See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.
Красивый снежный текст от Mark Boots
Основан на использовании css-переменных.
See the Pen Ice Text by Mark Boots (@MarkBoots) on CodePen.
Загрузчик в стиле Рождества от Jon Kantner
See the Pen Loading Christmas by Jon Kantner (@jkantner) on CodePen.
Больше загрузчиков вы найдете в этой статье.
