Новогодняя мотня от Яндекса со звуком - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1884
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Украшения для сайта

Новогодняя мотня от Яндекса со звуком

Хочешь сказать спасибо? Кликни на рекламный баннер.

14.06.2012, 16:28
Елочные шарики, которые двигаются при наведении на них мышкой, а ещё и издают звук. Наверно спросите почему называется "Новогодняя мотня" ?! Просто это украшение взято со страницы входа в почту Яндекса, а находчивый программист в исходном коде сделал комментарий для этой веточки <-- новогодняя мотня newyear.html --> вот так и повелось... В интернете уже есть несколько похожих статей, однако все они без звука и файлы грузятся с Яндекса - тут же всё локально.
Разметка HTML :
Вот этот код вставляем после тега <body> :
Code
<div class="b-page_newyear">
  <div class="b-page__content">
  <!-- новогодняя мотня newyear.html -->
   
  <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>

CSS :
Подключаем файл стилей шариков, перед </head> :
Code
<link rel="stylesheet" href="http://megascripts.ru/demo/new_year_motnya/style.css">

В CSS стилях возможно придется слегка вам подправить значения ширины, margin, top, чтобы выровнять расположение новогоднеё мотни на страничке.
Тут подключаем jQuery, swfobject и скрипт, перед  </head>:
ВНИМАНИЕ !!! Если у Вас подключена библиотека JQERY то первую строчку (/jquery.min.js) НЕ ПИШЕМ.
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://megascripts.ru/demo/new_year_motnya/swfobject.min.js"></script>
<script type="text/javascript" src="http://megascripts.ru/demo/new_year_motnya/newyear.js"></script>





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: http://Система Yandex
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 21016 | Загрузок: 2342 | Комментарии: 28 | Рейтинг: 3.9/70
Теги: скрипты, украшение для сайта, скрипт, Скрипты для ucoz, Новогодняя мотня от Яндекса со звук
Всего комментариев: 281 2 3 »
Сообщение №27 от Виктор
Добавлен: 24.12.2015

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

Спасибо )))
Сообщение №26 от Виктор
Добавлен: 24.12.2015

Огромное человеческое спасибо, братское сердце smile
(на баннер с рекламой от Гугла тож ткнул )...

У меня уровень работы с сайтом "метод тыка пока не получится или не надоест"
Потому бывают сложности.
Эту гирлянду ухари в инете предлагают установить на сайты всем желающим "всего за девятьсот рублей". Вот увидел такую рекламу и решил поискать самому бесплатно. Оказалось, вот оно.
Несколько сайтов нашел, где показывалась эта гирлянда, но больно уж муторно объяснялось, как её ставить и куда там чего заливать. Кроме того, даже я увидел, что коды отправляют на чужие ресурсы.
Здесь доходчиво даже для рака написано.

По комментариям вижу, что "тыкальщики" навроде меня все-равно не понимают, куда и что запихивать. А автор теряется и не может объяснить элементарнейших по его мнению вещей smile

Потому попробую "по нашенски, по нубски":
1. Скачиваете папку и запихиваете ее на свой аккаунт, в корень сайта.
Т.е. в папку "public_html".
2. Проходите путь: public_html/templdtes/свой шаблон (какой у Вас).
3. В шаблоне находите файл "index.php"

Смотрите справа права по нему (на изменения и т.д.) Если необходимо - меняете права. Иначе изменения не сохранятся. Тут несложно, разберетесь.

4. Открываете файл и примерно в середине страшного кода (тогда не ошибетесь, где здесь какие
теги и прочая жуть))) пишете: "Гирлянда" и следующей строкой "Конец гирлянды". Это чтобы не "потерять" код и стереть его после новогодних праздников. Отображаться эти надписи не будут.

Между написанными строчками копируете все, что здесь Олег дает для копирования. Сохраняете изменения и смотрите сайт.

У меня получилось с первого раза )))
Огромное достижение. Всё болтается, похабно звенит и работает как положено.

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

Вот happy
Сообщение №28 от Олег
Добавлен: 24.12.2015

Спасибо за тёплые слова от рака smile раку. Я стараюсь делать сайт и добавляю материалы без лишних кодов и простыми в установке.
Отдельное спасибо за клик по рекламе.
Заходите к нам ещё smile
Сообщение №24 от Надежда
Добавлен: 12.12.2015

Привет, у меня почему то нет звука и шарики не качаются
Сообщение №25 от Олег
Добавлен: 12.12.2015

Здравствуйте.
Будьте добры ссылку на сайт.
Сообщение №23 от Валентина
Добавлен: 08.01.2014

С Новым Годом! Счастья, здоровья, удачи! Большое спасибо за вашу гирлянду. Правда помучилась, но все получилось!
Сообщение №21 от Анатолий
Добавлен: 01.01.2014

И где это подключать и как?
Подключаем файл стилей шариков, перед </head> :
Сообщение №22 от Олег
Добавлен: 01.01.2014

Даже и не знаю что Вам ответить.
</head> находиться в верхней части сайта, а как ставить написано.
Сообщение №18 от Быкова Светлана Владимировна
Добавлен: 20.12.2013

Очень хочу шарики поставить на свой сайт! Но дело в том, что я дохожу все методом тыка...
Подскажите пожалуйста в какой раздел нужно зайти, чтобы установить)
С ув.
Сообщение №19 от Олег
Добавлен: 22.12.2013

Я даже не знаю что Вам ответить, как установить - написано.
1-6 7-12 13-15
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...


Проснуться с утра яблоки помогают лучше чем кофе.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта