• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Добавить звук при клике или наведении курсора (Создать звуковые эффекты при клике и наведении)
Добавить звук при клике или наведении курсора
Kosten
Дата: Среда, 2018-12-12, 22:30 | Сообщение 1
Администраторы
Сообщений:19239
Награды: 56


Как можно добавить звук и также мелодию при наведение на кнопку или ссылку. Если говорить о самом материале, то там не чего подробно не описано, а только предоставлен материал. Библиотека создает аудио элемент HTML5 и использует его для воспроизведения аудио файлов mp3 и ogg, где в настоящий момент будет производиться поддержка во всех обновленных браузерах.

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

На сайте atuin.ru - где представлена вторая демонстрация, так описано, но не приведено не одной ссылки скачать.

1. Трюк эффекта №1



2. Трюк эффекта №2



Установка:

Переходим по ссылке Loud Links на GitHub, где находится библиотека, что нужно скачать под эффект. Предоставленный файл loudlinks.min.js немного, где на страницы сайта и открытие их не окажет не какого внимание.

Подключаем скрипт loudlinks.min.js в конце страницы.

На нужный нам тег добавляем класс loud-link-hover для проигрывания звука при наведении и loud-link-click при клике

Далее в этот тег добавляем дата атрибут data-sound=»/folder/sound». Где sound это название mp3 и/или ogg файла

HTML

Код
<div data-sound="/folder/sound" class="loud-link-click">Нажмите</div>
<div data-sound="/folder/sound" class="loud-link-hover">Наведите</div>


Первая демонстрация кнопок

Вторая демонстрация дизайна

Официальный сайт эффекта: https://loudlinks.rocks/

PS - подскажите плизз, как реализовать эти 2 эффекта, так как по демонстраций можно наблюдать, что все работает, понять не могу, хотя сам демонстрацию делал, где взять и как залить файлы сл звуком.
Прикрепления: 0830291.png(17.6 Kb) · 7241846.png(9.0 Kb) · loud-links-mast.zip(4.4 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Добавить звук при клике или наведении курсора (Создать звуковые эффекты при клике и наведении)
  • Страница 1 из 1
  • 1
Поиск: