В предыдущем уроке мы увидели как рисовать и анимировать желеобразные формы. В этой части мы увидим как создать оригинальный слайдер, полный желе-эффектов.
Итак, вот, что нам предстоит сделать:
- Нарисовать больше желеобразных форм и текст!
- Научиться использовать изображения внутри фигур, а не только сплошные цвета.
- Анимировать фигуры, чтобы показать их или плавно скрыть.
- Преобразовывать одну форму в другую.
- Сделать весь слайдер адаптивным.
HTML и CSS
HTML и CSS коды для нашего слайдера довольно просты. По сути, они будут просто «сборками», а canvas будет рисовать все наши желе:
<div class="jelly-container">
<canvas class="jelly-canvas"></canvas>
</div>
Наш CSS (SCSS) будет следующим:
/* Основные стили */
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #106CD9;
overflow: hidden;
}
/* Желеобразный слайдер */
$width: 1300px;
$height: 600px;
// Заданные размеры
.jelly-container, .jelly-canvas {
width: $width;
height: $height;
}
// Центрирование
.jelly-container {
position: relative;
left: 50%;
top: 50%;
margin-left: - $width / 2;
margin-top: - $height / 2;
}
Как видите, требуемая разметка и стили очень просты. Вся тяжелая работа будет в JavaScript. Но сначала нам нужно нарисовать наши контуры в векторном редакторе. Посмотрим, как это сделать!
Рисуем SVG-контуры
Мы использовали векторный редактор для рисования SVG-контуров, которые нам нужны. Мы экспортировали окончательный результат в SVG-файл, получив что-то вроде этого:
Как вы можете видеть, наши пути перекрываются, и в этом нет ничего плохого, потому что одновременно отображается один текст и одна стрелка, в то время как остальные остаются скрытыми. Кроме того, круги вокруг большой фигуры были нарисованы, чтобы направлять нас при позиционировании элементов на холсте.
Заметим также, что каждая буква (и любая другая форма) должна состоять из одного замкнутого пути. Мы можем использовать любой шрифт, который мы хотим, но мы должны убедиться, что мы соблюдаем это условие.
Наконец, мы установили атрибуты id для каждой фигуры в векторном редакторе, поэтому мы можем выбрать их позже из JavaScript.
Изготовление желе-форм с Canvas
Как мы видели в первой части этого урока, для инициализации желеобразных форм нам нужна только эта строка кода:
var jelly = new Jelly('.jelly-canvas', options);
дело осложняется тем, что нужно заполнить options для отрисовки нужных нам путей с помощью желаемых эффектов.
Поскольку мы будем работать со многими объектами(options для каждой формы), мы будем использовать функцию extend и объект, который нам нужен. Вы можете найти его в JavaScript-файле (мы будем частенько его использовать). Итак, давайте посмотрим, как мы устанавливаем основные параметры для каждого типа фигуры:
/* Параметры настройки */
// Основные настройки для каждой формы
var baseOptions = {
svg: 'jelly.svg',
pointsNumber: 16
};
// Настройки для каждого круга
var optionsCircle = extend({}, baseOptions, {
paths: '#jelly-circle',
maxDistance: 40,
mouseIncidence: 25,
maxIncidence: 25
});
// Параметры для каждого изображения (большие фигуры)
var optionsImage = extend({}, baseOptions, {
paths: '#jelly-image',
maxDistance: 150,
mouseIncidence: 50,
maxIncidence: 50
});
// Параметры для текста
var optionsText = extend({}, baseOptions, {
color: 'rgba(0, 0, 0, 0.6)',
maxDistance: 15,
mouseIncidence: 20,
maxIncidence: 20
});
// Параметры для каждой стрелки
var optionsArrow = extend({}, baseOptions, {
color: 'rgba(255, 255, 255, 0.5)',
pointsNumber: 30,
maxDistance: 40,
mouseIncidence: 20,
maxIncidence: 20
});
Теперь заполним массив всеми опциями для каждой фигуры. Ниже мы описали весь процесс для лучшего понимания:
var items = 5; // Количество элементов в слайдере
var current = 2; // Индекс текущего пункта
var busy = false; // Чтобы проверить, есть ли в данный момент анимация
var options = []; // Массив для заполнения параметров
// Позиции для каждого круга, полученные с помощью векторного редактора
var circlePositions = [
{x: -530, y: 5},
{x: -330, y: -205},
{x: 0, y: -285},
{x: 330, y: -205},
{x: 530, y: 5}
];
// Функция для создания опций для определенного элемента
function buildOptions(i) {
var index = (i + 1);
var isCurrent = i === current;
// Параметры для каждого текста, стрелки и изображения, использующие базовые параметры и индекс
var text = extend({}, optionsText, {paths: '#jelly-text-' + index + ' path'});
var arrow = extend({}, optionsArrow, {paths: '#jelly-arrow-' + index});
var image = extend({}, isCurrent ? optionsImage : optionsCircle, {image: 'img/image-' + index + '.jpg'});
// Если это не текущий элемент, установим круг в заданной позиции, спрячем текст и стрелку
if (!isCurrent) {
extend(image, circlePositions[i]);
extend(text, {hidden: true});
extend(arrow, {hidden: true});
}
// Добавляем все это в массив options
options.push(text);
options.push(arrow);
options.push(image);
}
// Создаем параметры для каждого элемента
for (var i = 0; i < items; i++) {
buildOptions(i);
}
Теперь наши желе будут работать и в браузере :)
Обработка событий и добавление интерактивности
В предыдущем уроке мы видели, как мы можем справиться с событием hover для получения эффекта наведения. Мы больше не будем объяснять, как это сделать, просто имейте в виду, что мы сохраняем индекс наведенного элемента в переменной hoverItem.
Давайте посмотрим на код ниже, чтобы понять, как обращаться с событием click и соответственно выполнять анимацию.
canvas.addEventListener('click', function () {
// Проверка того, что на элемент не навели курсор мыши он не занят
if (hoverItem >= 0 && !busy) {
busy = true;
// Скройте текущий текст и стрелку, превратите большую фигуру в круг с правильным положением
if (current !== undefined) {
jelly.hide({i: current * 3, maxDelay: 400});
jelly.hide({i: current * 3 + 1, maxDelay: 400});
jelly.morph(extend({i: current * 3 + 2}, optionsCircle, circlePositions[current]));
}
// Для элемента, на которого кликнули мышкой, показать наведенный текст,
// стрелку и превратить круг в большую фигуру
jelly.show({i: hoverItem * 3, maxDelay: 400});
jelly.show({i: hoverItem * 3 + 1, maxDelay: 400});
jelly.morph(extend({i: hoverItem * 3 + 2}, optionsImage, {x: 0, y: 0}));
// Обновите текущий элемент и освободите через некоторое время, чтобы предотвратить ошибки
current = hoverItem;
setTimeout(function () { busy = false; }, 500);
}
});
Конечно, вы заметили, что мы используем функции show, hide и morph для выполнения анимации. Все эти функции получают набор параметров; и они надлежащим образом задокументированы в архиве, который вы можете скачать с сайта.
Делаем слайдер адаптивным
Пока что наш слайдер работает должным образом, вот только он не умеет продстраиваться под маленький экран. К счастью, мы можем решить эту проблему со следующим кодом на JavaScript:
/* Масштабируйте контейнер под размер окна/устройства */
var jellyContainer = document.querySelector('.jelly-container');
function resize() {
var scale = Math.min(
1,
window.innerWidth / jellyContainer.clientWidth,
window.innerHeight / jellyContainer.clientHeight
);
jellyContainer.style.transform = 'scale(' + scale + ')';
}
window.addEventListener('resize', resize);
resize();
Заключение
На этом мы заканчиваем работу над желеобразным адаптивным слайдером.
Обратите внимание, что применяемая технология экспериментальная, с большим потреблением ресурсов, поэтому используйте желеобразные формы умеренно, не злоупотрбляйте ими.