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

В данном уроке мы рассмотрим два примера. Для достижения данных эффектов были использованы плагины jQuery cond от Ben Alman и jQuery Transit от Rico Sta. Cruz. И так, приступим.

Шаг 1. HTML

Для начала нам необходимо создать контейнер с классом id sl-slider, в котором будет содержаться цвета для слайдов и изображений.

Добавим к каждому слайду определенные атрибуты data, которые необходимы для добавления срезов.

Мы определили, что ориентация data должна быть или «вертикалью» или «горизонталью». Слайд будет разрезан или горизонтально или вертикально. Значение data-cut1-rotation и data-cut2-rotation будут градусами вращения для каждого из слайдов и значения data-cut1-scale и data-cut2-scale будут масштабом. Для первого слайда определим следующие значения:

Чтобы добиться данных эффектов при помощи JavaScript нам необходима следующая структура.

Далее мы возьмем текущий слайд и скопируем его wrappers контента, создавая «разрез».

С разметкой закончили, теперь перейдем к следующему этапу.

Шаг 2. CSS

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

Зададим стили для навигации, для этого будем использовать технологию image-less. Нам необходимы небольшие поля повернутые на 45 градусов.

Нам необходим переход, чтобы изменить прозрачность RGBA, что бы при наведении все выглядело плавно.

Теперь для слайдов и новых wrapperбудет абсолютная позиция, и они займут 100% ширину и высоту.

Мы будем контролировать внешний вид, и разрезать слайды с помощью JavaScript.

Для контента «cuts» будет абсолютно позиционирован. Определим общий стиль для него.

Для того чтобы не видеть края разреза, когда мы поворачиваем его, мы добавим некоторое дополнение.

Определим стиль контента и содержания.

Если, например, слайд горизонтальный, оболочка будет иметь ширину в 100% от ширины экрана и 50% от высоты экрана. Div с классом sl-deco, как и все другие элементы контента, будет иметь абсолютную позицию. Мы разместим его по центру и дадим ему основание со значением 50%.

Мы добавим стиль к псевдо-элементу :after который использует различные буквы из нашего шрифта как значок животного в контенте.

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

Определим стили для цитат которые будут иметь ширину 30%, так как мы хотим, чтобы она была по центру, мы сделаем её левое значение 35% и соответствующее выравнивания текста.

Теперь добавим кавычки для цитаты.

Элемент cite будет иметь другой вид.

Темные или черные слайды будут иметь перевернутую цветовую гамму.

Для остальных установим различные значения.

Теперь добавим анимацию.

При перемещении туда и обратно, нужно что бы всё это происходило в обратном направлении.

Со стилями закончили.

Шаг 3. JavaScript

Рассмотрим возможности плагина.

Опция translateF это количество переводов и сокращений в процентном отношении. Мы начнем с выполнения функции _init.

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

При этом контент каждого слайда, также будет включать в себя wrapper с div, первый с классом sl-content, второй с классом sl-content-wrapper. В функции _loadEvents мы будем связывать события щелчка для кнопок навигации и изменения размера события в окне.

Слайдер и sl-content-wrapper разделяемые элементы должны иметь ширину и высоту окна. Это то, что происходит в функции _setSize. Также добавим «срез» и переход к следующему слайду. В которой мы будем разворачивать содержимое текущего слайда, таким образом удалив два div с классом sl-content-cut.

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

Читайте также: