Игра Яндекс Практикума
Игра Яндекс Практикума
Игра Яндекс Практикума

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

Отредактировано

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

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

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

  1. Ёлочная ветка на углу страницы
  2. Метель
  3. Новогодняя гирлянда
  4. Гирлянда на JavaScript
  5. Боковая панель с Санта-Клаусом
  6. Новогодний фейерверк
  7. Таймер обратного отсчёта
  8. Новогодняя открытка

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

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

 

Метель

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

 

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

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

Гирлянда на JavaScript

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

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

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

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

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

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

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

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

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

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

Следите за новыми постами
Следите за новыми постами по любимым темам
31К открытий31К показов