Как украсить свой сайт к Новому году?

Новый год

Новый год уже близко. А это значит, что нужно нарядить не только ёлку и себя, но и сайт. Собрали для вас подборку праздничных украшений для сайта. Внедряйте и дарите посетителям новогоднее настроение.

Новогоднее украшение от «Яндекса»

Несколько лет назад «Яндекс» добавила под Новый год украшение для страницы входа в Яндекс.Почту. Оно стало достаточно популярным среди веб-разработчиков, и некоторые даже немного доработали исходную версию скрипта.

Украшение представляет собой ёлочную ветвь с новогодними шариками. При наведении курсора и нажатии клавиш шарики начинают двигаться и издавать звук.

See the Pen JwyZJJ by Alexey (@centuri0n) on CodePen.

Ёлочная ветка на углу страницы

Достаточно простое, но вместе с тем красивое украшение сайта. Простой скрипт отображает png-изображение в углу страницы. Вот пример одного из вариантов:

See the Pen ebEXwL by Alexey (@centuri0n) on CodePen.

Метель

JS-скрипт реализует анимацию метели на сайте. Такое незамысловатое украшение создаст новогоднее настроение посетителям. Скрипт реализован на pixi.js.

See the Pen Blizzard w/ PixiJS ⛄️ by Jhey (@jh3y) on CodePen.

Простой снегопад

Для эффекта снегопада можно использовать только три изображения и немного CSS-кода. Каждое изображение различается расположением и размером снежинок. В результате наложения картинок и их смещения получается красивый и простой эффект снегопада.

See the Pen Simple snowfall by Alexey (@centuri0n) on CodePen.

Новогодняя гирлянда

Простая гирлянда, выполненная на основе SVG-изображений и CSS. Все лампочки в гирлянде плавно мигают. Можно экспериментировать с фоном, общим стилем, цветом лампочек, скоростью воспроизведения анимации и так далее.

See the Pen Christmas Garland by Alexey (@centuri0n) on CodePen.

Гирлянда на JavaScript

Более реалистичная гирлянда, которую можно поместить на самый верх страниц сайта. Скрипт реализует поочерёдно 4 состояния гирлянды: выключенная, включённые лампы двух цветов, включённые лампы двух других цветов, полностью включённая гирлянда.

See the Pen IMAPO.RU — Happy new year by Imapo (@Imapo) on CodePen.

Боковая панель с Санта-Клаусом

Скрипт реализует эффект падающих снежинок, а также размещает сбоку Санта-Клауса. При наведении курсора на Санту выводится карточка с текстом. Его по желанию можно менять на что угодно в HTML-файле.

See the Pen Simple CSS Sliding Santa Panel by Mark Sottek (@WhizofaWiz) on CodePen.

Новогодний фейерверк

Скрипт реализован на jQuery и HTML 5 Canvas. С его помощью на страницу выводится анимация фейерверка, состоящего из различных фигур: от кругов и овалов до сердечек и контуров планет. Демо можно посмотреть на сайте.

Таймер обратного отсчёта

Один из вариантов реализации таймера обратного отсчёта до Нового года. Скрипт написан полностью на JavaScript. Если захотите использовать его каждый год, то в нём не понадобится ничего менять — скрипт не завязан на конкретной дате.

See the Pen LMjaww by Alexey (@centuri0n) on CodePen.

Новогодняя открытка

Скрипт отображает новогоднюю открытку. При клике по ней открывается новогоднее поздравление. Какой там будет текст, зависит только от вашей фантазии. Такое украшение будет красиво смотреться на главной странице вашего сайта.

See the Pen Animated Christmas Card by Łukasz Niedźwiecki (@lukasz-niedzwiecki) on CodePen.

Мы представили далеко не все варианты украшений сайта к Новому году. В комментариях вы можете рассказать о своём опыте украшения сайта и поделиться ссылками на другие скрипты.