Веб-дизайнеру
Веб-разработчику
Дополнительно
Параллакс слайдер контента “Yellow” на JQuery и CSS3!
Скачать
Демо
↓ Также Вам будет интересно ↓
3D слайдер на CSS3 и JQuery / 3 примера + автопрокрутка
Цветное меню аккордеон на CSS и JQuery
Color Picker (цветовая палитра цветов) – JQuery плагин
Мини галерея изображений с автопрокруткой | JQuery плагин!
Таймер JQuery обратного отсчета времени + дизайн!
Анимированная галерея изображений с эффектами и “сеткой”!
Сегодня хотелось бы рассмотреть параллакс слайдер с использование CSS анимации. Мы будем управлять анимацией каждого отдельного элемента и создадим эффект параллакса (Parallax) посредством анимации фона. Этот слайдер контента будет прекрасным способом привлечения внимания Ваших посетителей.
Также это резиновый слайдер, что гарантирует его корректный показ при увеличении или уменьшении разрешения экрана. Лично мне, очень нравиться эта техника слайдера, сам бы поставил себе сайт.. 
Приглашаю также обязательно посмотреть на 3D слайдер с эффектами анимации.
Как работает этот слайдер контента?
Он состоит из нескольких слайдов, каждый из которых имеет заголовок h2, абзац с текстом, ссылку на что-либо и картинку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="da-slider" class="da-slider"> <div class="da-slide"> <h2>Добро пожаловать!</h2> <p>Очень рады видеть Вас на этой странице! Здесь Вы можете писать любой текст или изображение, о бщем все, что Вы зотите видеть в слайдере. Слайдер современный, с классным эффектом параллакс.</p> <a href="#" class="da-link">Подробнее...</a> <div class="da-img"><img src="images/1.png" alt="image01" /></div> </div> ... <nav class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav> </div> |
В ядре (коде) этого слайдера заложены анимации для каждого элемента. Мы управляем поведением слайдов, задавая им нужный класс.
Например, для эффекта скольжения слайда вправо, нужно дать ему класс da-slide-toright. Создавать свои эффекты можно, создавая новые классы, и применяя к ним стили. В исходниках мы уже имеем четыре класса с анимациями и эффектами, которые вы можете применить по своему усмотрению (изменить, переставить).:
.da-slide-fromright.da-slide-fromleft.da-slide-toright.da-slide-toleft
Учитывая эти классы, можно управлять анимацией каждого элемента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* 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; } } |
Опции Parallax слайдера
Доступны следующие опции при вызове cslider плагина:
current : 0,– индекс текущего слайда, определяет, какой слайд будет показан первый, при загрузке страницы;bgincrement : 50,– значение положения фона эффекта параллакс (чем больше значение, тем больше анимация движения фона);autoplay : false,– запретить автопрокрутку,true– разрешить автоматическое движение слайдов;interval : 4000– если значение автопрокруткиtrue, то здесь задается скорость автоматического движения слайдов (в миллисекундах).
Вот пример возможного варианта настройки опций:
|
1 2 3 4 5 6 7 8 |
$(function() { $('#da-slider').cslider({ autoplay : true, bgincrement : 450 }); }); |
Эффект параллакса слайдера создается путем перемещения фона в противоположном направлении при скольжении. С параметром bgincrement Вы можете контролировать количество пикселей, на которое он будет перемещен.
Заключение
Итак, слайдер – это очень полезная разработка, направленная на увеличение Ваших продаж, привлечение внимания, или для оповещения Важной информации.
В данном уроке мы рассмотрели классный, современный эффект параллакс – желаем найти ему эффективное применение на Вашем сайте! Мы надеемся, что Вам нравится наш небольшой эксперимент и Вы нашли для себя что-то полезное! 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
