Parallax-слайдер контента на CSS3 и jQuery
Такая идея пришла в голову под впечатлением от слайдера, использованного на странице веб-сайта Kendo UI, платформы для разработки современных интерфейсов на HTML. Нам сразу же захотелось воссоздать подобный эффект на собственном примере.
Как это работает
Слайдер состоит из нескольких слайдов, в каждом из которых присутствует элемент h2, абзац, ссылка и отсек для изображения:
Ядро данного слайдера заключается в анимации для каждого элемента. Мы будем управлять поведением элементов за счет классов направления для соответствующих слайдов. Например, когда мы будем прокручивать текущий слайд вправо, мы зададим ему класс «da-slide-toright». У нас будет 4 разных класса для каждого и возможных направлений слайдов.
.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft
Используя данные классы, мы сможем управлять анимацией каждого элемента:
Опции
При запуске плагина cslider, нам будут доступны следующие опции:
Parallax-эффект будет реализован за счет сдвига фона слайдера в обратном направлении скольжения слайдов. Посредством bgincrement мы можем управлять числом пикселей, на которое он будет сдвинут.
Учтите, что мы используем простенькую версию отката для браузеров, не поддерживающих анимацию и переходы в CSS (такие все еще встречаются).
Надеемся, что вам понравился наш сегодняшний эксперимент, и вы найдете ему применение!
Как это работает
Слайдер состоит из нескольких слайдов, в каждом из которых присутствует элемент h2, абзац, ссылка и отсек для изображения:
Код
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Some headline</h2>
<p>Some description</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img">
<img src="images/1.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<!-- ... -->
</div>
<!-- ... -->
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
<div class="da-slide">
<h2>Some headline</h2>
<p>Some description</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img">
<img src="images/1.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<!-- ... -->
</div>
<!-- ... -->
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
Ядро данного слайдера заключается в анимации для каждого элемента. Мы будем управлять поведением элементов за счет классов направления для соответствующих слайдов. Например, когда мы будем прокручивать текущий слайд вправо, мы зададим ему класс «da-slide-toright». У нас будет 4 разных класса для каждого и возможных направлений слайдов.
.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft
Используя данные классы, мы сможем управлять анимацией каждого элемента:
Код
/* Slide in from the right*/
.da-slide-fromright h2{
animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 60%; opacity: 1; }
}
.da-slide-fromright h2{
animation: fromRightAnim1 0.6s ease-in 0.8s both;
}
.da-slide-fromright p{
animation: fromRightAnim2 0.6s ease-in 0.8s both;
}
.da-slide-fromright .da-link{
animation: fromRightAnim3 0.4s ease-in 1.2s both;
}
.da-slide-fromright .da-img{
animation: fromRightAnim4 0.6s ease-in 0.8s both;
}
/* Adjust animations for different behavior of each element: */
@keyframes fromRightAnim1{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
0%{ left: 110%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
0%{ left: 110%; opacity: 0; }
1%{ left: 10%; opacity: 0; }
100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
0%{ left: 110%; opacity: 0; }
100%{ left: 60%; opacity: 1; }
}
Опции
При запуске плагина cslider, нам будут доступны следующие опции:
Код
$('#da-slider').cslider({
current : 0,
// индекс начального слайда
bgincrement : 50,
// инкремент позиционирования фона
// (parallax-эффект) при скольжении
autoplay : false,
// слайд-шоу вкл. / выкл.
interval : 4000
// временная задержка между трансформациями
});
current : 0,
// индекс начального слайда
bgincrement : 50,
// инкремент позиционирования фона
// (parallax-эффект) при скольжении
autoplay : false,
// слайд-шоу вкл. / выкл.
interval : 4000
// временная задержка между трансформациями
});
Parallax-эффект будет реализован за счет сдвига фона слайдера в обратном направлении скольжения слайдов. Посредством bgincrement мы можем управлять числом пикселей, на которое он будет сдвинут.
Учтите, что мы используем простенькую версию отката для браузеров, не поддерживающих анимацию и переходы в CSS (такие все еще встречаются).
Надеемся, что вам понравился наш сегодняшний эксперимент, и вы найдете ему применение!
-
FalleN -
8809 -
1 -
225
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...