• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Музыкальная анимация с помощью CSS + JS (Производитель музыкальной анимации с помощью JavaScript)
Музыкальная анимация с помощью CSS + JS
Kosten
Дата: Вторник, 2018-12-18, 22:16 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


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

Не исключаю, что такую функцию можно применить как приветствие, где можно записать протокольные звуки или вообще новость, и сам дизайн установить под блок, где задать название, примерно "новостной блок" - где пользователь или гость заходит, и может узнать подробнее о сайте от самого администратора,вообщем, то что будет записано на пластинке.

Так изначально смотрится при наведение курсора.



Приступаем к установке:

HTML

Код
<div id="gtesamog-sakodam">
  <div id="tusevanilok"></div>
  </div>
<audio id="kagetukov" src="Ссылка на музыку или объявление.mp3" preload="auto" controls></audio>


CSS

Код
audio {
  display: none;
}
#gtesamog-sakodam {
    height: 175px;
    width: 175px;
    background: rgba(239, 237, 237, 0.8);
    border-radius: 25px;
    position: relative;
    box-shadow: 0 0 20px 0 rgba(16, 16, 16, 0.15);
    transition: .5s linear;
}
#gtesamog-sakodam:before {
    content: "\f001";
    font-family: FontAwesome;
    font-size: 68px;
    background: -webkit-linear-gradient(50deg, #ec947b 50%, #71105c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #e66d18;
    position: absolute;
    line-height: 175px;
    left: 57px;
}
#gtesamog-sakodam:hover #tusevanilok {
  margin-left: 110px;
  transform: rotate(360deg);
}
#tusevanilok {
  position: absolute;
  height: 138px;
  width: 138px;
  z-index: -1;
  border-radius: 100%;
  background: transparent;
  margin: 19px;
  transition: .9s linear;
  box-shadow:
    0 8px 6px -8px rgba(21, 20, 20, 0.5),
    0 0 1px 1px rgba(21, 20, 20, 0.5),
    0 0 0 1px #676464 inset,
    0 0 0 2px #1b1a1a inset,
    0 30px 0px -29px #444 inset,
    0 -30px 0px -29px #444 inset,
    0 0 0 3px #2b2a2a inset,
    0 0 0 4px #1b1a1a inset,
    0 0 0 5px #2b2a2a inset,
    0 33px 0px -27px #444 inset,
    0 -33px 0px -27px #444 inset,
    0 0 0 6px #1b1a1a inset,
    0 0 0 7px #2b2a2a inset,
    0 0 0 8px #1b1a1a inset,
    0 34px 0px -25px #444 inset,
    0 -34px 0px -25px #444 inset,
    0 0 0 9px #2b2a2a inset,
    0 0 0 10px #1b1a1a inset,
    0 0 0 11px #2b2a2a inset,
    0 35px 0px -23px #444 inset,
    0 -35px 0px -23px #444 inset,
    0 0 0 12px #1b1a1a inset,
    0 0 0 13px #2b2a2a inset,
    0 0 0 14px #1b1a1a inset,
    0 36px 0px -21px #444 inset,
    0 -36px 0px -21px #444 inset,
    0 0 0 15px #2b2a2a inset,
    0 0 0 16px #1b1a1a inset,
    0 0 0 17px #2b2a2a inset,
    0 37px 0px -19px #444 inset,
    0 -37px 0px -19px #444 inset,
    0 0 0 18px #1b1a1a inset,
    0 0 0 19px #2b2a2a inset,
    0 0 0 20px #1b1a1a inset,
    0 38px 0px -17px #444 inset,
    0 -38px 0px -17px #444 inset,
    0 0 0 21px #2b2a2a inset,
    0 0 0 22px #1b1a1a inset,
    0 0 0 23px #2b2a2a inset,
    0 39px 0px -15px #444 inset,
    0 -39px 0px -15px #444 inset,
    0 0 0 24px #1b1a1a inset,
    0 0 0 25px #2b2a2a inset,  
    0 0 0 26px #1b1a1a inset,
    0 40px 0px -13px #444 inset,
    0 -40px 0px -13px #444 inset,
    0 0 0 27px #2b2a2a inset,
    0 0 0 28px #1b1a1a inset,
    0 0 0 29px #2b2a2a inset,
    0 41px 0px -11px #444 inset,
    0 -41px 0px -11px #444 inset,
    0 0 0 30px #1b1a1a inset,
    0 0 0 43px #2b2a2a inset,
    0 0 0 45px #AF2A10 inset,
    0 0 0 47px #2b2a2a inset,
    0 0 0 62px #AF2A10 inset,
    0 0 10px 78px rgba(0,0,0,0.5) inset;
}


JS

Код
var audio = $("#kagetukov")[0];
$("#gtesamog-sakodam").mouseenter(function() {
  audio.play();
}).mouseleave(function() {
  audio.pause();
});


К материалу приложен архив, где аналогичные данные.

Демонстрация
Прикрепления: 8918610.png(25.7 Kb) · music-animation.zip(3.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Музыкальная анимация с помощью CSS + JS (Производитель музыкальной анимации с помощью JavaScript)
  • Страница 1 из 1
  • 1
Поиск: