Артём Мáлков

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

16 дек8 комм

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

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

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

Вполне волшебно, согласитесь? Вдобавок к этой картине все игрушки сопровождаются анимацией и издают свой звук при наведении на них (всего, кстати говоря, 36 разнообразных звуков), а также издают звук при использовании клавиатуры на сайте, например, при написании комментария.

Почему мотня, спросите вы? Ответ довольно простой – именно это название было в исходном коде Яндекса, когда скрипт был впервые представлен публике. Отсюда и повелось – «мотня» или «мотня от Яндекса». Первая версия этого украшения была представлена в 2012 году (ни много ни мало, а 6 лет на момент написания этой статьи), и тогда она была реализована на технологии Adobe Flash. Но мир не стоит на месте и с течением времени многие браузеры отказались от этой технологии в связи с угрозой безопасности компьютеров, а в 2020-м Adobe Flash и вовсе будет закрыт.

К чему я все это рассказываю? А к тому, что был период, когда звуки в этой мотне пропали и все довольствовались лишь красивой анимацией. Но только не сейчас! На нашем сайте вы можете ознакомиться с инструкцией по установке на 100% рабочей и музыкальной версии мотни от Яндекса. Поехали!

Установка новогодней мотни от Яндекса

1. Скачайте архив в конце статьи. Разархивируйте и содержимое загрузите корневую папку на вашем сайте по FTP.

2. Если на вашем сайте отсутствует библиотека jQuery – подключите ее в секцию HEAD вашего сайта:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Если библиотека уже используется – перейдите к следующему шагу.

3. В секцию BODY, перед закрывающим ее тегом, подключите скрипт и файл стилей:

<link rel="stylesheet" href="/yandex_motnya/motnya.css" />
<script src="/yandex_motnya/motnya.js"></script>

Если папку из архива вы загрузили не в корневую директорию, то не забудьте прописать корректный адрес до указанных выше файлов.

4. Далее, сразу после открывающего тега <body> вы вставляете верстку мотни:

<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" data-note="0"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="7"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="8"><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" data-note="9"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="10"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="11"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="12"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="13"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="14"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="15"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="16"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="17"><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" data-note="18"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="19"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="20"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="21"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="22"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="23"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="24"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="25"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="26"><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" data-note="27"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="28"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="29"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="30"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="31"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="32"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="33"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="34"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="35"><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" data-note="0"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="7"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="8"><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" data-note="9"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="10"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="11"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="12"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="13"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="14"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="15"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="16"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="17"><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" data-note="18"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n2 b-ball_bounce" data-note="19"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n3 b-ball_bounce" data-note="20"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n4 b-ball_bounce" data-note="21"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n5 b-ball_bounce" data-note="22"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n6 b-ball_bounce" data-note="23"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n7 b-ball_bounce" data-note="24"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n8 b-ball_bounce" data-note="25"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
				<div class="b-ball b-ball_n9 b-ball_bounce" data-note="26"><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>

Вот, собственно, и все. Просто и красиво.

Как отключить звуки при использовании клавиатуры?

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

Чтобы отключить эту функцию, в файле motnya.js почти в самом низу удалите или закомментируйте блок:

var l = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "\"", "\\"];
var k = ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"];
var a = {};
	
for(var e = 0, c = l.length; e < c; e++) {
		
	a[l[e].charCodeAt(0)] = e;
	
}

for(var _e = 0, _c = k.length; _e < _c; _e++) {
		
	a[k[_e].charCodeAt(0)] = _e;
	
}
	
$(document).keypress(function(j) {
		
	var i = $(j.target);
		
	if(!i.is("input") && j.which in a) {
			
		var index = parseInt(a[j.which]);

		balls = new Balls(context, buffer.getSound(index));
		balls.play();
			
		var ball = $("[data-note="+index+"]");
		toggleBounce(ball);

	}

});

Если вы хотите совсем отключить звук, то вдобавок в этом же файле удалите или закомментируйте блок:

buttons.forEach(function(button) {
		
	button.addEventListener("mouseenter", playBalls.bind(button));
	button.addEventListener("mouseleave", stopBalls);

});

На этом все, и до новых встреч!

Файл
Размер
Ссылка
yandex-motnya.zip
377,08 Kb
Скачать с сервера
Рекомендуем к просмотру
Как вебмастеру узнать сумму заработанных средств в РСЯ?
Статьи и советы
Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
Модули и скрипты
Новогодняя шапка на счетчик или другой элемент сайта на HTML+CSS
Статьи и советы
8
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1
      •  Пользователь
    10 янв в 19:36

    Подскажите. Эта мотня прижата к top, width:100%. Что изменить чтобы она стала обычным div, вроде position:relative. Можно как-то обернуть Ee в новый div, который ни к чему не привязан ?

      • 1
      1063
        •  Команда Pandoge
      20 янв в 10:10

      Serega, в файле motnya.css:

      .b-page__content {
      	min-height: 200px;
      	position: fixed;
      	top: 0;
      	z-index: 999999999999;
      }

      замените на:

      .b-page__content {
      	min-height: 200px;
      	position: relative;
      }
    • 2
    1
      •  Пользователь
    31 дек в 18:27

    Здравствуйте

    пожалуйста объясните по подробнее, как установить на сайт Юкоз?

      • 0
      1063
        •  Команда Pandoge
      20 янв в 10:13

      SalafSolih, здравствуйте!

      Правили ли вы раньше вёрстку вашего сайта? Если да - то будет пара вопросов, ответив на которые я смогу вам помочь.

    • 2
    1
      •  Пользователь
    15 дек в 17:40

    Извиняюсь, но у меня на битриксе не работает звук ((( обидно

      • 0
      1063
        •  Команда Pandoge
      20 янв в 10:01

      Сергей Краснов, мало информации (что за сайт, нет ли ошибок в консоли и так далее), не смогу вам помочь.

    • 3
    1
      •  Пользователь
    15 дек в 13:04

    На дле 12.1 не работает звук

      • 2
      1063
        •  Команда Pandoge
      16 дек в 00:37

      Антон Шаталов, скрипт не зависит от типа CMS, но за замечание - спасибо!

      Обновили архив и инструкцию по установке.

Подняться наверх
«Pandoge» - помощник вебмастера