Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью CSS3 и jQuery. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные эффекты за счет их взаимного смещения. Слайдер будет содержать несколько слайдов, которые будут смещаться, создавая интересный эффект. В демонстрации будет использоваться автоматическая и ручная прокрутка..

 
Как всегда, мы начнем с разметки HTML, в каждом слайде размещается элемент h2, абзац и элемент div с изображением:

Ядром слайдера являются анимации каждого элемента. Контролировать повдение элементов можно с помощью классов направлений, устанавливаемых для слайда.

Например, когда слайд смещается вправо, он получить (с помощью JavaScript кода) класс “da-slide-toright”. Есть четыре возможных класса направлений.

  • .da-slide-fromright — при движении справа
  • .da-slide-fromleft — при движении слева
  • .da-slide-toright — при движении направо
  • .da-slide-toleft — при движении налево

Используя данные классы мы можем управлять анимациями каждого элемента:

Рассмотрим некоторые опции плагина jQuery. Эффект  параллакса создается смещением фона в направлении обратном движению слайда. Параметр bgincrement позволяет управлять эффектом.

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