Простые ползунки для публикаций с отражением

jQuery 13.06.2014

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

ДЕМО

ИСХОДНИКИ

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

Шаг 1. HTML

Для начала, по традиции, начнем с разметки, у нас будет контейнер,в котором будут содержаться два класса с блоками, название у них будет соответствующее, item1 one и item2 two. Также мы добавляем класс кнопки, и контейнер в котором будет содержаться дополнительный контент.

<div class="wrapper">
<div class="container clearfix">
<div class="item1 one reflection clearfix">
<h1>Начало</h1>
<p>Описание.</p>
<span class="circle"><span class="arrow"></span></span>
</div>
<div class="dropdown">
<p>Описание.</p>
</div>
</div>
<div class="container clearfix">
<div class="item2 two reflection clearfix">
<h1>Начало</h1>
<p>Описание.</p>
<span class="circle2"><span class="arrow2"></span></span>
</div>
<div class="dropdown2">
<p>Описание.</p>
</div>
</div>
</div>

Для добавления дополнительных блоков не составит особого труда, нам необходимо добавить классы с новыми значениями, соответственно item3 three и item4 four. Кроме этого нужно продублировать значение классов, при этом изменив их синтаксис.

Шаг 2. CSS

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

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.wrapper{
margin:0 auto;
width:1300px;
margin-top:50px;
}
.title{
font:30px Source Sans Pro;
color:#757575;
}
.item1,.item2{
width:600px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F7F7F7), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #F7F7F7 0%, #E8E8E8 100%);
z-index:1000;
position:relative;
padding-bottom:20px;
float:left;
margin-right:10px;
box-shadow:rgba(0,0,0,0.5) 0px 1px 10px;
h1{
padding:20px 20px 5px 20px;
font:16px Source Sans Pro;
margin:0px;
color:#757575;
}
p{
padding:0px 13px 0px 20px;
font:14px Source Sans Pro;
text-align:justify;
margin:0px;
float:left;
width:85%;
color:#969696;
}
}
.reflection{
-webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.5)));
z-index:0;
position:relative;
}
.reflect{
-webkit-box-reflect:none;
}
.circle,.circle2{
content:"";
width:40px;
height:40px;
border:3px solid #969696;
border-radius:100px;
float:left;
margin-top:-5px;
position:relative;
opacity:0.3;
}
.arrow,.arrow2{
position:absolute;
content:"";
top:17px;
left:13px;
width:0px;
height:0px;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid #969696;
border-bottom:7px solid transparent;
}
.one{
border-top:5px solid hsla(170, 45%, 55%, 1);
}
.two{
border-top:5px solid hsla(209, 65%, 55%, 1);
}
.glow{
cursor:pointer;
opacity:0.5;
border:3px solid hsla(170, 45%, 55%, 1);
}
.glow-arrow{
cursor:pointer;
border-top:7px solid hsla(170, 45%, 55%, 1);
}
.glow2{
cursor:pointer;
opacity:0.5;
border:3px solid hsla(209, 65%, 55%, 1);
}
.glow-arrow2{
cursor:pointer;
border-top:7px solid hsla(209, 65%, 55%, 1);
}
.container{
position:relative;
}
.dropdown,.dropdown2{
width:600px;
height:100px;
background:#3b3f45;
position:absolute;
display:none;
top:124px;
box-shadow:inset rgba(0,0,0,0.3) 0px 5px 5px;
p{
padding:20px 13px 0px 20px;
font:14px Source Sans Pro;
text-align:justify;
margin:0px;
float:left;
width:85%;
color:#969696;
}
}
.small{
font:16px Source Sans Pro;
}

Кроме этого мы добавляем <em>.reflection,</em> который будет отвечать за отражение, также обратите внимание, мы добавляем градиент для каждого браузера, чтобы достичь кроссбраузерности.

Шаг 3. JS

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


1$(".circle").mouseover(function(){
$(this).addClass("glow");
$(".arrow").addClass("glow-arrow");
});
$(".circle").mouseleave(function(){
$(this).removeClass("glow");
$(".arrow").removeClass("glow-arrow");
});
$(".circle").click(function(){
$(".dropdown").slideToggle();
$(".item1").toggleClass("reflect");
});
$(".circle2").mouseover(function(){
$(this).addClass("glow2");
$(".arrow2").addClass("glow-arrow2");
});
$(".circle2").mouseleave(function(){
$(this).removeClass("glow2");
$(".arrow2").removeClass("glow-arrow2");
});
$(".circle2").click(function(){
$(".dropdown2").slideToggle();
$(".item2").toggleClass("reflect");
});