2

Есть необходимость сделать вертикальный слайдер на всю ширину и высоту (пример http://charactersf.com). Т.е., человек прокручивает страницу, доходит до слайдера, далее прокрутка идет слайдами, при достижении последнего слайда идет снова обычная прокрутка страницы. Решения, которые я находил, предлагали сделать из страницы один сплошной слайд, а это мне немного не подходит. Может кто знает плагин или хотя бы подскажет как это было реализовано на том сайте.

1 ответ 1

5

Вы же привели сайт с примером? 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 если сейчас видно больше одной картинки - то видна только "правильная" верхняя.

Итого использовавшийся рецепт:

  1. Подключаем Tween для анимации.
  2. На загрузке документа прокрутку по событиям прокрутки колеса, стрелкам и свайпу для тач-устройств вешаем обработчики, которые предотвращают стандартное поведение.
  3. Делаем список слайдов с убывающим z-index в HTML. Проставляем всем одинаковый css-свойства top и position:absolute. Верхний слайд помечаем как active. Делаем css-класс old с top: 0 !important.
  4. На событие прокрутки вешаем свой обработчик (вообще, там еще висит на стрелку клавиатуры, свайп и нажатие кружочка справа, но сделано аналогично). Обработчик смотрит, куда было прокручено колесо и смотрит есть ли у нас выше/ниже активного слайда еще слайды. Если есть - ставим нужные классы old, active слайдам и запускаем Tween. Если нет, и текущий слайд последний - то убираем наши предотвращающие стандартное поведение обработчики и страница начинает скроллиться. Если мы прокрутим и вернемся в top: 0 (висит обработчик на scroll) - то предотвращающие обработчики опять навешиваются и начинает работать слайд.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.