Как украсить сайт к Новому году — излагаем все нюансы

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

Снег

Распространенное новогоднее украшение ресурсов, ведь зима в северных широтах всегда ассоциируется со снегом.

Пример реализован с помощью CSS, поэтому будет отображаться во всех браузерах вне зависимости от его настроек. Вот как это работает.

Создаем три изображения со снежинками в формате в формате png. Фон делаем прозрачным. Это кадры нашей будущей анимации, от количества снежинок зависит плотность снегопада, поэтому делать много снежинок не стоит.  Сделайте снежинки разного размера — это создаст ощущение перспективы, т.е. снегопад будет трехмерным.

Изображения: (реальный размер 400х400 px):

 

В background-image все используемые изображения перечислим через запятую. Сделаем фон , на который вставим изображения и анимируем их свойством animation.

15s — время анимации. Настроим кадры:

Ничего сложного, несколько картинок и немного кода и вуаля — снегопад на сайте вам обеспечен. Какого вида будут снежинки и как они будут двигаться — зависит от вашей фантазии.

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

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

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

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

2. Украшение: Мерцающая гирлянда для uCoz

В отличие от прошлых скриптов, этот код добавит на ваш сайт более аккуратный, но не менее праздничный элемент. Мигающая разноцветная гирлянда обязательно преобразит ваш сайт!

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

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

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

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

Популярный скрипт «Сколько времени осталось до Нового года». Вот один из вариантов его реализации на JS

Формат — дни, часы, минуты, секунды. Внешний вид можно настроить с помощью css под стили и цвет вашего сайта. Реализован исключительно на JS, поэтому если скрипты отключены — работать не будет.

Метель

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

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

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

Как-то перед новым годом в Яндекс красиво оформили вход в почту и украшение стало очень популярным. Не могу не поделиться такой красотой.  

 Используется transform со свойством rotate. При наведении курсора на шарики гирлянды они начинают покачиваться и издавать мелодичные звуки. К сожалению, возможности JSFiddle не позволяют загрузить внешний файл, поэтому выкладываю его в облако. (Файл со звуком ny2012.swf, 215 КБ)

И если в прошлой статье рассматривались скелеты, основанные на CSS, то теперь вы видите вполне реальное применение этих возможностей.

Результат со звуком можно посмотреть здесь.

В JSFiddle выложен весь код. Не пугайтесь, что его достаточно много, ничего сложного там нет — использование CSS для описания классов и реализации анимации.

При установке на сайт, не забудьте подключить:

Либо же используйте развернутый скрипт как в JSFiddle.

Удачи! Пусть ваш ресурс выглядит по-новогоднему ярко.

А научиться рисовать хорошие сайты можно на профессии «Веб-дизайнер».

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

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

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

5. Украшение: Еловая ветка с игрушками для ucoz

Елка и новогодние игрушки – первое, что встречается каждому из нас в канун Нового года. Создайте для своих посетителей атмосферу уникального праздника, разместив на сайте еловую ветку с игрушками с помощью простого скрипта.

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

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

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

6. Скрипт: Светящаяся гирлянда для uCoz

Эта анимированная светящаяся гирлянда способна преобразить и украсить любой сайт. Яркие переключающиеся цвета создадут праздничное настроение у посетителей вашего сайта. 

Гирлянда на JavaScript

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

7. Скрипт: Новогодняя анимированная гирлянда со снегом и еловой веткой

Гирлянды, елочные ветки, новогодние игрушки и узорчатые снежинки – все это является неотъемлемыми составляющими новогоднего празднования. Зачем ограничиваться чем-то одним? Разместите на своем сайте сразу все для яркого и веселого настроения – в этом вам поможет этот простой скрипт. 

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

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

8. Скрипт: Летящие вниз белые снежинки

Говорят, в природе не существует двух одинаковых снежинок, чьи узоры были бы схожи. Так же дела обстоят и со скриптами, отвечающими за их вывод. Еще один вариант праздничных анимированных снежинок для вашего сайта! 

9. Скрипт: Мелкий снежок на сайте

Медленно падающие узорчатые снежинки не так близки к реальному положению дел. Создайте для посетителей вашего сайта настоящую новогоднюю погоду, к которой многие из нас так привыкли – используя этот скрипт, вы устроите на своем сайте безостановочный снегопад. 

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

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

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

10. Скрипт: Снег из курсора

Снегопад и падающие снежинки – это красиво и празднично, но возможность управления процессом кажется более интересной и привлекательной. С помощью этого скрипта вы устроите снегопад, исходящий из курсоров ваших посетителей. 

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

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

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

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

Хинт для программистов: если зарегистрироваться на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании. Перейти к регистрации.

11. Скрипт: Курсор в форме снежинки со снегопадом

Этот скрипт подойдет тем, кто не готов довольствоваться общепринятыми решениями. Если снегопад, то из курсора, если курсор – то узорчатая снежинка!

12. Скрипт: Синие снежинки

Может, вы устали от бесконечных белых снежинок, заполонивших улицы и сайты в канун Нового года? Этот скрипт позволит вам привнести немного уникальности в праздничную атмфосферу вашего сайта, отобразив на нем падающие снежинки синего цвета.

Всех с праздниками и надеемся данная коллекция новогодних скриптов пригодится при встречи Нового года.

Поделитесь в соц.сетях:

Оцените статью: (Пока оценок нет) Загрузка...