Есть необходимость сделать вертикальный слайдер на всю ширину и высоту (пример http://charactersf.com). Т.е., человек прокручивает страницу, доходит до слайдера, далее прокрутка идет слайдами, при достижении последнего слайда идет снова обычная прокрутка страницы. Решения, которые я находил, предлагали сделать из страницы один сплошной слайд, а это мне немного не подходит. Может кто знает плагин или хотя бы подскажет как это было реализовано на том сайте.
1 ответ
Вы же привели сайт с примером? JS замечателен тем, что можно его взять прямо с примера (хотя в вашем случае, там кода очень много).
Смотрим в HTML код страницы, видим, что там три слайда с классом slide
в блоке с id featured-slides-wrapper
. Заметим, что все три слайда имеют z-index
по убыванию - 8, 7, 6.
Открываем исходные коды страницы через любые инструменты разработчика в браузере. Видим, что там всего один интересный js файл: main.min.js
. Копируем оттуда код, вставляем в любой форматтер кода или используем встроенный в браузер форматтер (в Chrome есть). Получаем пригодный к чтению js.
В $(document).ready()
видим кучу подписок на событие и отмену стандартного поведения e.preventDefault
.
Ставим брякпоинт на нужное нам событие, например, 'mousewheel'. Попадаем в функцию:
function b(b) {
var g = b || window.event,
h = i.call(arguments, 1),
j = 0,
k = 0,
l = 0,
m = 0;
if (b = a.event.fix(g), b.type = "mousewheel", "detail" in g && (l = -1 * g.detail), "wheelDelta" in g && (l = g.wheelDelta), "wheelDeltaY" in g && (l = g.wheelDeltaY), "wheelDeltaX" in g && (k = -1 * g.wheelDeltaX), "axis" in g && g.axis === g.HORIZONTAL_AXIS && (k = -1 * l, l = 0), j = 0 === l ? k : l, "deltaY" in g && (l = -1 * g.deltaY, j = l), "deltaX" in g && (k = g.deltaX, 0 === l && (j = -1 * k)), 0 !== l || 0 !== k) {
if (1 === g.deltaMode) {
var n = a.data(this, "mousewheel-line-height");
j *= n, l *= n, k *= n
} else if (2 === g.deltaMode) {
var o = a.data(this, "mousewheel-page-height");
j *= o, l *= o, k *= o
}
return m = Math.max(Math.abs(l), Math.abs(k)), (!f || f > m) && (f = m, d(g, m) && (f /= 40)), d(g, m) && (j /= 40, k /= 40, l /= 40), j = Math[j >= 1 ? "floor" : "ceil"](j / f), k = Math[k >= 1 ? "floor" : "ceil"](k / f), l = Math[l >= 1 ? "floor" : "ceil"](l / f), b.deltaX = k, b.deltaY = l, b.deltaFactor = f, b.deltaMode = 0, h.unshift(b, j, k, l), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h)
}
}
которая в свою очередь проваливается в
function e(a) {
l = i.scrollTop(),
delta_intent = a.deltaY,
delta_intent > 0 ? g() : f()
}
Всё просто, используя параметры события mousewheel
, определяется, крутили колесико вниз или вверх (немного математики) и затем вызывают одну из функций f
или g
. Посмотрим на одну из них:
function g(b) {
if (!p && o.prev().length) {
if (p = !0,
o.removeClass("active"),
o = o.prev().addClass("active").removeClass("old"),
a.find(".dot").eq(o.index()).addClass("active").siblings().removeClass("active"),
"force" === b)
return void (p = !1);
setTimeout(function() {
p = !1
}, 1e3)
}
}
прогнав, замечаем, что анимация срабатывает по removeClass("old")
. Основным свойством класса old
является свойство высоты: top: 0 !important
. Однако если просто проставить это свойство - слайд пропадет, но не будет анимации. Нужно понять откуда анимация.
Если поискать по слову animate
можно найти, что для анимации используется библиотека Tween. Её подключение и настройку можно найти в коде, но расписывать это долго. Суть библиотеки, что она позволяет менять css свойства плавно. Таким образом, когда мы убираем/добавляем класс "old" вышестоящий слайд плавно меняет позицию сверху с 0 до стандартной (выезжает/заезжает под header
). За счет z-index
если сейчас видно больше одной картинки - то видна только "правильная" верхняя.
Итого использовавшийся рецепт:
- Подключаем Tween для анимации.
- На загрузке документа прокрутку по событиям прокрутки колеса, стрелкам и свайпу для тач-устройств вешаем обработчики, которые предотвращают стандартное поведение.
- Делаем список слайдов с убывающим
z-index
в HTML. Проставляем всем одинаковый css-свойстваtop
иposition:absolute
. Верхний слайд помечаем какactive
. Делаем css-классold
сtop: 0 !important
. - На событие прокрутки вешаем свой обработчик (вообще, там еще висит на стрелку клавиатуры, свайп и нажатие кружочка справа, но сделано аналогично). Обработчик смотрит, куда было прокручено колесо и смотрит есть ли у нас выше/ниже активного слайда еще слайды. Если есть - ставим нужные классы
old
,active
слайдам и запускаем Tween. Если нет, и текущий слайд последний - то убираем наши предотвращающие стандартное поведение обработчики и страница начинает скроллиться. Если мы прокрутим и вернемся вtop: 0
(висит обработчик на scroll) - то предотвращающие обработчики опять навешиваются и начинает работать слайд.