Параллакс слайдер контента "Yellow" на JQuery и CSS3! | Vladmaxi.net
ГлавнаяВеб-разработчикуJQueryПараллакс слайдер контента “Yellow” на JQuery и CSS3!
Дата: 19.07.2013 в 00:12 | Просмотров: 7110

Параллакс слайдер контента “Yellow” на JQuery и CSS3!

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

Сегодня хотелось бы рассмотреть параллакс слайдер с использование CSS анимации. Мы будем управлять анимацией каждого отдельного элемента и создадим эффект параллакса (Parallax) посредством анимации фона. Этот слайдер контента будет прекрасным способом привлечения внимания Ваших посетителей.

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

Как работает этот слайдер контента?

Он состоит из нескольких слайдов, каждый из которых имеет заголовок h2, абзац с текстом, ссылку на что-либо и картинку:

В ядре (коде) этого слайдера заложены анимации для каждого элемента. Мы управляем поведением слайдов, задавая им нужный класс.

Например, для эффекта скольжения слайда вправо, нужно дать ему класс da-slide-toright. Создавать свои эффекты можно, создавая новые классы, и применяя к ним стили. В исходниках мы уже имеем четыре класса с анимациями и эффектами, которые вы можете применить по своему усмотрению (изменить, переставить).:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

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

Опции Parallax слайдера

Доступны следующие опции при вызове cslider плагина:

  • current : 0, – индекс текущего слайда, определяет, какой слайд будет показан первый, при загрузке страницы;
  • bgincrement : 50, – значение положения фона эффекта параллакс (чем больше значение, тем больше анимация движения фона);
  • autoplay : false, – запретить автопрокрутку, true – разрешить автоматическое движение слайдов;
  • interval : 4000 – если значение автопрокрутки true, то здесь задается скорость автоматического движения слайдов (в миллисекундах).

Вот пример возможного варианта настройки опций:

Эффект параллакса слайдера создается путем перемещения фона в противоположном направлении при скольжении. С параметром bgincrement Вы можете контролировать количество пикселей, на которое он будет перемещен.

Заключение

Итак, слайдер – это очень полезная разработка, направленная на увеличение Ваших продаж, привлечение внимания, или для оповещения Важной информации.

В данном уроке мы рассмотрели классный, современный эффект параллакс – желаем найти ему эффективное применение на Вашем сайте! Мы надеемся, что Вам нравится наш небольшой эксперимент и Вы нашли для себя что-то полезное! ;)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


Добавить комментарий