Скрипт — новогодние украшения, шарики, гирлянды, мотня и снежинки на сайт

Новый 2020 год уже через две недели и решили тут с одним клиентом навести небольшой новогодний декор на его сайте (мебель из сосны). И внедрить следующие скрипты:

  1. Гирлянда с шариками (Новогодняя мотня — украшение было взято со страницы входа в почту Яндекса, а в ее исходном коде был комментарий к этой гирлянды <!— новогодняя мотня newyear.html —> вот так и появилось это обозначение )
  2. Фоновая новогодняя музыка Jingle Bells
  3. Падающие снежинки

А сейчас приступим к написанию инструкции, которая будет полезна не только мне, но и Вам если вы задались на своем сайте сделать новогодние украшения! Кстати эти способы кроссплатформенные и их можно применять на абсолютно любых сайтах под управлением таких CMS как:

  • Opencart
  • WordPress
  • Bitrix
  • Joomla
  • и др

Анимированная елочная гирлянда с шариками

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

новогодняя гирлянда на сайт
Скрипт — новогодняя гирлянда на сайт

Я буду рассматривать установку на основе сайта под управлением  OpenCart

HTML

В файл head расположенный /public_html/catalog/view/theme/ВашаТема/template/common

добавляем код сразу после тега body:

CSS

Добавляем все в тот же файл head строку в которой подцепляешь стили для нашей гирлянды

JS

Сюда же в файл head подключаем и наш скрипт

Скачать файлы в архиве — скачать

Новогодняя музыка на сайт

После того как гирлянды были установлены, очень не хватало новогодней музыки и мы ее установили и немного обработали, что бы не так сильно орала ))

подписаться на канал айтишника

За музыку будет отвечать строчка которую тоже подключаем в head или footer страницы

скачать новогоднюю музыку — Jingle Bells

Падающие снежинки на сайте

И когда уже такая красота, сейчас когда в Москве идет дождь))) захотелось снега!!!! Получите и снег!  напомню что все что я вам показываю очень удачно работает на сайте клиента под управлением Opencart 3 и даже не смотря на то, что эти скрипты немного подтормаживают сайт, все таки хочется немного волшебства!)

Поэтому подключаем в в head или footer страницы этот скрипт

и вот вот сам код этого скрипта:

или скачиваем скрипт падающие снежинки у меня с яндекс диска — скачать скрипт падающие снежинки

 

Вот таким нехитрым способом мы украсили сайт к новому 2020 году!!!

и если у вас возник вопрос:

  • как сделать падающий снег на сайте?
  • как сделать новогоднюю гирлянду на сайте?
  • как включить фоном новогоднюю музыку при заходе на сайт?
  • как украсить сайт на новый год?

На все эти вопросы вы найдете ответы на моем блоге!

С Наступающим Новым 2020 годом! Ура!!!!

 

Рейтинг
( 1 оценка, среднее 5 из 5 )
nibbl/ автор статьи
Я отец двух сыновей, ITишник, предприниматель и просто человек который любит делиться полезной информацией с другими людьми на такие темы как: Windows, Unix, Linux, Web, SEO и многое другое!
Понравилась статья? Поделиться с друзьями:
Блог ITишника и просто человека
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: