Концепт музыкального плеера для сайта на JS | RUDEBOXМузыкальные плееры, мы уже не раз уделяли этой теме внимание, мы рассматривали простые, адаптивные и модерн плееры, сейчас мы рассмотрим концепт музыкального плеера созданный нашим зарубежным коллегой. Идея плеера достаточно простая, у нас есть прямоугольник, в котором помещено изображение исполнителя, при этом, если нажать на изображение то происходит загиб края и появления контроля плеером, при этом происходит приятная анимация. При развороте мы будем иметь три кнопки, иконка музыки, играть/пауза и рандомного воспроизведения музыки.

Единственным недостатком, на мой взгляд, является отсутствие индикатора воспроизведения музыки. И так, давайте рассмотрим основные нюансы.

Шаг 1. HTML

У нас есть контейнер, в котором будет содержаться два элемента, это правый и левый край изображений, в обвертке правого края у нас будет содержаться кнопки управления:

Кроме этого мы добавим класс с тенью, для большей реалистичности.

Концепт музыкального плеера для сайта на JS | RUDEBOX

Шаг 2. CSS

Для работы нам необходимо добавить трансформации, и определить углы излома изображений:

Шаг 3. JS

Чтобы у нас все работало, нам необходимо добавить немного магии:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: