Дизайн радио-проигрывателя для сайта на CSS3

Stats: 1463 0
Author: RUDEBOX
Category: Css
Comments: Комментариев нет
Tags: HTML5

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

&lt;div class=&quot;panel panel-channel-list favorites&quot;&gt;
    &lt;header&gt;
      &lt;div class=&quot;title&quot;&gt;Избранное&lt;/div&gt;
    &lt;/header&gt;
    &lt;div class=&quot;list&quot;&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;div class=&quot;title&quot;&gt; &lt;span class=&quot;name&quot;&gt;247 A State Of Trance Armin Van Buuren&lt;/span&gt;&lt;span class=&quot;country&quot;&gt;(UK)&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;categories&quot;&gt;Dance&lt;/div&gt;
          &lt;div class=&quot;bitrate&quot;&gt;128 kbit&lt;/div&gt;
          &lt;div class=&quot;star fa fa-star&quot;&gt;&lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class=&quot;title&quot;&gt; &lt;span class=&quot;name&quot;&gt;Sky Radio&lt;/span&gt;&lt;span class=&quot;country&quot;&gt;(ES)&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;categories&quot;&gt;Top 40&lt;/div&gt;
          &lt;div class=&quot;bitrate&quot;&gt;192 kbit&lt;/div&gt;
          &lt;div class=&quot;star fa fa-star&quot;&gt;&lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class=&quot;title&quot;&gt; &lt;span class=&quot;name&quot;&gt;Energy Dance&lt;/span&gt;&lt;span class=&quot;country&quot;&gt;(CH)&lt;/span&gt;&lt;/div&gt;
          &lt;div class=&quot;categories&quot;&gt;Trance, House&lt;/div&gt;
          &lt;div class=&quot;bitrate&quot;&gt;64 kbit					&lt;/div&gt;
          &lt;div class=&quot;star fa fa-star&quot;&gt;&lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;

<div class="title">Избранное</div>

</header>

<ul>

<li>

<div class="title"> <span class="name">247 A State Of Trance Armin Van Buuren</span><span class="country">(UK)</span></div>

<div class="categories">Dance</div>

</li>

<li>

<div class="title"> <span class="name">Sky Radio</span><span class="country">(ES)</span></div>

</li>

<li>

<div class="title"> <span class="name">Energy Dance</span><span class="country">(CH)</span></div>

<div class="categories">Trance, House</div>

</li>

</ul>

</div>

Затем мы добавляем разметку, в которой будут содержаться блоки, с информацией и станциями, мы добавляем классы для добавления в закладки, а также удобный плеер внизу списка.

Дизайн радио-проигрывателя для сайта на CSS3

Шаг 2. CSS

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

.panel.panel-channel-list.available {
left: 4%; right: 52%;
}
.panel.panel-channel-list.favorites {
left: 52%; right: 4%;
}
.panel.panel-controls {
position: absolute;
left: 4%; right: 4%;
bottom: 2%;
height: 5rem;
padding: 0.5rem;
.cover-overlay {
display: none;
@include absolute(100%, 100%);
background-image: url('');
background-size: cover;
background-position: center;
opacity: 0.2;
}
.cover {
float: left;
width: 4rem;
height: 4rem;
margin-right: 0.5rem;
background-image: url('');
background-size: cover;
@include border-radius(4px);
}
.playButton {
float: left;
width: 3rem;
height: 3rem;
margin: 0.5rem;
border: 2px solid lighten($c, 10%);
@include border-radius(3rem);
line-height: 3rem;
text-align: center;
vertical-align: center;
i {
margin-left: 2px;
font-size: 1.4rem;
color: lighten($c, 40%);
}
&amp;.playing i:before {
content: &quot;\f04c&quot;;
}
}
.tracker {
position: relative;
margin-left: 9rem;
.slider {
margin-top: 0.2rem;
.time, .totalTime {
float: left;
font-size: 0.8rem;
i {
margin-right: 5px;
}
.slide {
float: left;
width: 60%;
height: 0.5rem;
overflow: hidden;
background-color: rgba(White, 0.3);
@include border-radius(0.5rem);
margin: 0.4rem 0.5rem;

.pos {
width: 21%;
height: 0.5rem;
background-color: White;
@include border-radius(0.5rem);
}
}
@include clearfix();
}
.trackName {
font-weight: 600;
i {
width: 1.2rem;
}
}


.artistName {
font-size: 0.9rem;
}
.favorite {
position: absolute;
top: 0rem;
right: 0.5rem;
i {
font-size: 1.2rem;
}
&amp;.starred i:before {
content: &quot;\f005&quot;
}
}
.volume {
position: absolute;
right: 0;
bottom: 0;
.icon {
display: inline-block;
padding-bottom: 0.2rem;
width: 1rem;
}
.slide {
display: inline-block;
width: 4rem;
height: 0.5rem;
background-color: rgba(White, 0.3);
@include border-radius(0.5rem);
margin: 0.0rem 0.5rem;
.pos {
width: 80%;
height: 0.5rem;
background-color: White;
@include border-radius(0.5rem);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

.panel.panel-channel-list.available {

left: 4%; right: 52%;

}

.panel.panel-channel-list.favorites {

left: 52%; right: 4%;

}

.panel.panel-controls {

position: absolute;

left: 4%; right: 4%;

bottom: 2%;

height: 5rem;

padding: 0.5rem;

.cover-overlay {

display: none;

@include absolute(100%, 100%);

background-image: url('');

background-size: cover;

background-position: center;

opacity: 0.2;

}

.cover {

float: left;

width: 4rem;

height: 4rem;

margin-right: 0.5rem;

background-image: url('');

background-size: cover;

@include border-radius(4px);

}

.playButton {

float: left;

width: 3rem;

height: 3rem;

margin: 0.5rem;

border: 2px solid lighten($c, 10%);

@include border-radius(3rem);

line-height: 3rem;

text-align: center;

vertical-align: center;

i {

margin-left: 2px;

font-size: 1.4rem;

color: lighten($c, 40%);

}

&.playing i:before {

content: "\f04c";

}

.tracker {

position: relative;

margin-left: 9rem;

.slider {

margin-top: 0.2rem;

.time, .totalTime {

float: left;

font-size: 0.8rem;

i {

margin-right: 5px;

}

.slide {

float: left;

width: 60%;

height: 0.5rem;

overflow: hidden;

background-color: rgba(White, 0.3);

@include border-radius(0.5rem);

margin: 0.4rem 0.5rem;

.pos {

width: 21%;

height: 0.5rem;

background-color: White;

@include border-radius(0.5rem);

}

@include clearfix();

}

.trackName {

font-weight: 600;

i {

width: 1.2rem;

}

.artistName {

font-size: 0.9rem;

}

.favorite {

position: absolute;

top: 0rem;

right: 0.5rem;

i {

font-size: 1.2rem;

}

&.starred i:before {

content: "\f005"

}

.volume {

position: absolute;

right: 0;

bottom: 0;

.icon {

display: inline-block;

padding-bottom: 0.2rem;

width: 1rem;

}

.slide {

display: inline-block;

width: 4rem;

height: 0.5rem;

background-color: rgba(White, 0.3);

@include border-radius(0.5rem);

margin: 0.0rem 0.5rem;

.pos {

width: 80%;

height: 0.5rem;

background-color: White;

@include border-radius(0.5rem);

}

Мы приводим к рассмотрению часть кода, более детально можно просмотреть в исходниках, давайте перейдем к следующему шагу.

Шаг 3. JS

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

$(&quot;.favorite&quot;).on &quot;click&quot;, -&gt;
$(this).toggleClass(&quot;starred&quot;);
$(&quot;.playButton&quot;).on &quot;click&quot;, -&gt;
$(this).toggleClass(&quot;playing&quot;);
$(&quot;.slider .slide&quot;).on &quot;click&quot;, (e)-&gt;
$this = $(this)
pos = (e.offsetX / $this.width()) * 100
console.log pos.toFixed(0) + &quot;%&quot;
$this.find(&quot;.pos&quot;).width(pos + &quot;%&quot;);
$(&quot;.volume .slide&quot;).on &quot;click&quot;, (e)-&gt;
$this = $(this)
pos = (e.offsetX / $this.width()) * 100
roundPos = Math.round(pos / 25) * 25
console.log pos.toFixed(0) + &quot;%, &quot; + roundPos + &quot;%&quot;
$this.find(&quot;.pos&quot;).width(roundPos + &quot;%&quot;)
if roundPos &gt; 50
$(&quot;.volume .icon i&quot;).removeClass().addClass &quot;fa fa-volume-up&quot;
else if roundPos &gt; 0
$(&quot;.volume .icon i&quot;).removeClass().addClass &quot;fa fa-volume-down&quot;
else
$(&quot;.volume .icon i&quot;).removeClass().addClass &quot;fa fa-volume-off&quot;

$ -&gt;
$(&quot;.list&quot;).perfectScrollbar()

$(".favorite").on "click", ->

$(this).toggleClass("starred");

$(".playButton").on "click", ->

$(this).toggleClass("playing");

$(".slider .slide").on "click", (e)->

$this = $(this)

pos = (e.offsetX / $this.width()) * 100

console.log pos.toFixed(0) + "%"

$this.find(".pos").width(pos + "%");

$(".volume .slide").on "click", (e)->

$this = $(this)

pos = (e.offsetX / $this.width()) * 100

roundPos = Math.round(pos / 25) * 25

console.log pos.toFixed(0) + "%, " + roundPos + "%"

$this.find(".pos").width(roundPos + "%")

if roundPos > 50

$(".volume .icon i").removeClass().addClass "fa fa-volume-up"

else if roundPos > 0

$(".volume .icon i").removeClass().addClass "fa fa-volume-down"

else

$(".volume .icon i").removeClass().addClass "fa fa-volume-off"

$ ->

$(".list").perfectScrollbar()

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