Здравствуйте. Сегодня статья будет об украшении сайта к приближающимся новогодним праздникам. Перепробовал несколько вариантов. Ни один из них не нравился. И тут на одном из сайтов увидел симпатичную гирлянду в шапке. Ее и решил себе установить. В интернете скрипт этой гирляны проскакивает под странным название «Новогодняя мотня от Яндекса». Пишут, что несколько лет назад поисковик украсил свой сайт. Кто-то спарсил скрипт, картинки и выложил в сеть.
Если поводить мышкой по гирлянде, то шары качаются и издают мелодичный звук. В исходном варианте в гирлянде только красные и белые шары. Мной добавлены шары синего цвета.
Как же украсить сайт к новому году с помощью этой гирлянды. В конце статьи дам ссылку на скачивание архива. В архиве сам скрипты и все необходимые файлы. Распаковать архив и разместить папку в корне вашего блога. Не скопировать файлы в корень, а именно всю папку скопировать.
В файле header.php разместите такой код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="/new_year_bals7/swfobject.min.js"></script> <script type="text/javascript" src="/new_year_bals7/newyear.js"></script> <link rel="stylesheet" href="/new_year_bals7/style.css"> <div class="b-page_newyear"> <div class="b-page__content"> <!-- Новогодние шары --> <i class="b-head-decor"> <i class="b-head-decor__inner b-head-decor__inner_n1"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n2"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n3"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n4"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n5"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n6"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> <i class="b-head-decor__inner b-head-decor__inner_n7"> <div class="b-ball b-ball_n1 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> <div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div> </i> </i> </div> </div>
Вот и вся установка. Обновите страницу и наслаждайтесь гирляндой. Если хотите, чтобы не было звука, из папки удалите файл ny_sing.swf.
Для выбора цветов шаров в гирлянде, найдите в файле style.css в папке скрипта такой код
.b-ball_n1 .b-ball__i{background:url(balls/b-ball_n1_blue.png) no-repeat} .b-ball_n2 .b-ball__i{background:url(balls/b-ball_n2.png) no-repeat} .b-ball_n3 .b-ball__i{background:url(balls/b-ball_n3.png) no-repeat} .b-ball_n4 .b-ball__i{background:url(balls/b-ball_n4.png) no-repeat} .b-ball_n5 .b-ball__i{background:url(balls/b-ball_n5_blue.png) no-repeat} .b-ball_n6 .b-ball__i{background:url(balls/b-ball_n6.png) no-repeat} .b-ball_n7 .b-ball__i{background:url(balls/b-ball_n7.png) no-repeat} .b-ball_n8 .b-ball__i{background:url(balls/b-ball_n8.png) no-repeat} .b-ball_n9 .b-ball__i{background:url(balls/b-ball_n9.png) no-repeat}
Чтобы поменять цвет шара с красного на синий, добавьте в конце названия файла «_blue». Шар поменяет свой цвет.
Все красные шары продублированы синими. Белые оставлены без изменений. Если у вас пропал белый шар, значит переименовали не ту строчку.
Скрипт актуализирован для jquery 1.11.1. Звук гирлянды есть. Теперь и при использовании последней версии библиотеки сможете украсить сайт к новому году.
Сам архив со скриптом
[sociallocker]
Что-то не нашла по ссылке ЗДЕСЬ где подписаться на рассылку.
Форма рассылки на главной боковой панели.
Добрый день. Подскажите где ссылка на архив? на рассылку подписалась….
Добрый. В письме после подписки придет код. Его нужно ввести в поле.
Здравствуйте! С НАСТУПАЮЩИМ НОВЫМ ГОДОМ!
У меня вопрос, как эту прелесть установить на сайте Водпресс, куда именно вставлять код, чтобы эти шары были на всех страницах. Тема сайта Blain
Спасибо,
С УВ Татьяна
В файл заголовка header.php. Папку из архива скопировать в корень сайта.
В самом деле к Новому году хочется украсить свой сайт, чтобы было праздничное настроение. Тем более, что это настроение будет и у вас и у читателей.
До Нового года осталось не так много времени. Пора задуматься о разных новогодних атрибутах. Вот и свой сайт надо украсить Есть множество вариантов. Ваша гирлянда мне очень понравилась, выглядит празднично и ярко. Любое украшение сайта создает новогоднее настроение.
Главное не переборщить с украшениями. Все хорошо в меру.
Прикольно, надо попробовать!
Добрый день Денис! Наконец то я узнал, как вас зовут! Мы с вами из одного времени! Дружеский совет: не подписывайтесь вашим ником Bahus и сделайте себе граватар. Пока вас не увидел на фото и не узнал ваше имя, как то не особо внушал доверия ваш ник и непонятное существо заменяющее фото. Психология людей, ничего не поделаешь!
Вначале вообще не было желания украшать свой блог. Но вот зашел в вам в гости !Классное украшение! Мне тоже очень понравилось! Так что с удовольствием воспользуюсь!
Так что, все повязано.
Денис, может сжать png файлы в сборке? Прогнал через тинипнг — сэкономил 58% на размере картинок.
Украшение то, что надо! Забрал к себе)
Можно и сжать конечно. Или просто пересохранить в gif фотошопом. Обычно ставят на пару недель и удаляют. Можно и не жать.
Пару лет назад ставил себе на блог подобный скрипт. В этот раз решил блог никак не украшать… Смотрел на других — у кого-то снег идёт, у кого-то гирлянда… Приелось всё уже. Но сам по себе скрипт неплох. Я когда себе ставил тоже что-то в нём модифицировал, уж не помню точно что и CSS правил…
Я в этот год тоже не стал ничего на блог добавлять. Тоже все приелось.