Подтвердить что ты не робот

Как получить основную часть - что делает трюк - параллакса?

Я попытался поэкспериментировать с параллаксом и начал с нуля, чтобы понять основные части этой магии. Чтобы дать вам пример, который мне нравится использовать в качестве вдохновения, вы можете увидеть его по этой ссылке здесь в разделе "Фото".

Последний код находится на странице со связанной информацией. Чтобы получить общий вид вопроса, просмотрите остальные детали.

Основные части, которые я уже знаю, это scrollTop() $window и offsetTop этого элемента, важно применять эффект параллакса для элемента DOM, а также factor для того, насколько чувствителен эффект реагировать на скорость прокрутки. Конечным результатом может быть некоторая форма, которая будет вычислять координаты translateY или translate3d в пикселях или процентах.

Я прочитал в Интернете, что свойство CSS translate работает быстрее, чем, например, top от position: absolute, и я предпочитаю также использовать перевод в сочетании с TweenMax GSAP. Таким образом, движение параллакса будет очень плавным. Но если достаточно только свойства css translate, это тоже хорошо. Я видел несколько примеров, где использование TweenMax, поэтому я использую его сейчас.

JS

У меня есть код основных вещей:

var win = $(window);
var el = $('#daily .entry').find('figure');

win.scroll(function() {
  var scrollTop = win.scrollTop();
  var parallaxFactor = 5;

  el.each(function() {
    var image = $(this).find('img');
    var offsetTop = $(this).offset().top;

    // This is the part where I am talking about. 
    // Here should be the magic happen...

  });
});

Итак, у меня код выше кода, но он ничего не делает, конечно. Вот код CodePen выше здесь. Он будет только консольным журналом scrollTop и offsetTop. Как упоминалось ранее, я знаю только основные части, такие как scrollTop и offsetTop, чтобы применить эффект параллакса. Тогда должна быть какая-то область, созданная там, где эффект параллакса будет срабатывать и произойдет, поэтому вычисления будут выполняться только для элементов в окне просмотра, чтобы поддерживать хорошую производительность. После этого должна быть выполнена какая-то математика, но точно не знает, что и как достичь этого. Только после того, как у меня есть окончательный номер, я мог бы использовать его, например, в TweenMax из Greensock:

TweenMax

TweenMax.to(image, 0.1, {
    yPercent: offsetPercent + '%',
    ease: Linear.easeNone
});

Формула параллакса

Если я посмотрю вокруг, чтобы получить формулу, я пришел к чему-то подобному (основанному в Интернете):

var viewportOffset = scrollTop - offsetTop + win.height();
var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;

if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {
    TweenMax.to(image, 0.1, {
        yPercent: offsetPercent + '%',
        ease: Linear.easeNone
    });
}

Но если я честен, я не знаю, что это делает, или почему это должно/могло быть таким образом. Я хотел бы знать это, поэтому я могу понять весь процесс создания параллакса. Функции scrollTop(), offsetTop и $(window).height() понятны для меня, но то, что трюк позади формулы, является той частью, которую я не понимаю.

Обновление

Обновление 1

@Scott уведомил, что сайт-вдохновитель использует плагин под названием scrollmagic.io, но мне очень любопытно, как я могу создать параллакс самостоятельно без использования плагина. Как это работает и как его достичь. С акцентом на формулу, почему я должен это делать так или иначе и что именно будет рассчитано, потому что я не понимаю этого и действительно хочу знать это, чтобы я мог использовать это знание в будущем при применении эффекта параллакса,

Обновление 2

В прошлый день я попытался выяснить, что именно делает этот фрагмент кода. Я говорю об этом:

var viewportOffset = scrollTop - offsetTop + win.height();

После некоторых хороших отладочных сессий я думаю, что у меня есть ключ. Таким образом, scrollTop - количество пикселей, которые вы прокрутили вниз по странице и которые скрыты от представления. offsetTop - начальная позиция элемента внутри DOM, а $(window).height - высота окна просмотра - часть, которая видна в браузере.

Вот что я думаю, что эта формула делает:

Установите нулевую точку в точку начала элемента. Например, когда scrollTop равно 0, и элемент начинается с 240px сверху, тогда формула: 0 минус 240 равна -240. Таким образом, текущая позиция прокрутки ниже нулевой точки. После прокрутки 240px вниз формула выведет 0, так как, конечно, 240 минус 240 составляет 0 (ноль). Я прав?

Но часть, которую я еще не понимаю, - это почему + win.height. Если вернуться к приведенной выше формуле (при обновлении 2), а scrollTop равен нулю, то $(window).height - это пространство от 240 пикселей до нижней части окна просмотра. При прокрутке вниз количество пикселей будет увеличиваться на прокрутке, что не имеет для меня никакого смысла. Если кто-то может объяснить, что могло быть целью этого, было бы хорошо. Мне очень любопытно. Вторая часть формулы для вычисления параллакса offsetPercent я до сих пор не понимаю. В общем случае расчет силы параллакса на свитке.

Обновление 3/4

Консультируемая @Edisoni, я ходил в последние несколько дней по видео Трэвиса Нейлсона, и я стал намного более мудрым по основным функциям параллакса. Обязательно для всех, кто хочет копать в параллаксе. Я использовал новые знания о параллаксе, чтобы получить работу выше script:

var root = this;
var win = $(window);
var offset = 0;

var elements = $('#daily .entry figure');

if (win.width() >= 768) {
    win.scroll(function() {

        // Get current scroll position
        var scrollPos = win.scrollTop();
        console.log(scrollPos);

        elements.each(function(i) {
            var elem = $(this);
            var triggerElement = elem.offset().top;
            var elemHeight = elem.height();
            var animElem = elem.find('img');

            if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {
                // Do the magic
                TweenMax.to(animElem, 0.1, {
                    yPercent: -(scrollPos - elemHeight / 2) / 100, 
                    ease: Linear.easeNone
                });

            } else {
                return false;
            }

        });

    });

}

Однако script работает только для определенной части элементов и надеется, что кто-то может мне помочь. Проблема в том, что он работает только для первых двух элементов. У меня есть подозрение, что "ошибка" находится, в частности, после знака AND && в выражении if, но не может решить проблему. http://codepen.io/anon/pen/XKwBAB

Когда элементы, которые работают на триггере, анимируются, они будут прыгать на несколько пикселей снизу, не знаю, как это исправить. Спрыгните на: 1.135% после запуска триггера. Таким образом, он не начинается с 0%. Я уже проверил, должен ли я добавить свойство CSS translate в CSS и установить тип числа %, но это не работает для меня.

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);

Должен ли я использовать функцию TweenMax .fromTo() вместо использования функции .to(), чтобы я мог также установить начальную позицию или моя мысль об этом неправильна и имеет другую причину?

Что-то вроде этого:

TweenMax.fromTo(animElem, 0.1, {
    yPercent: triggerElement,
    z: 1
}, {
    yPercent: -(scrollPos - elemHeight / 2) / 100,
    ease: Linear.easeNone
});

Кроме того, я пытаюсь воссоздать эффект сайта, который я бы хотел использовать в качестве источника вдохновения, без использования плагина scrollMagic, но я действительно не знаю, как это работает, с использованием двух разных объектов, которые анимированы.

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

Мои актуальные вопросы касаются обновлений 2 и 3/4:

  • Как вычислить координаты параллакса y для получения "волшебства"?
  • Правильно ли я говорю об обновлении 2, что нулевая точка будет reset для offsetTop каждого элемента?
  • Почему мой код работает только для первых двух элементов и почему они прыгают на несколько пикселей вниз, если встроенный стиль translate будет добавлен в анимированный элемент? См. Обновление 3/4 для всей информации.
4b9b3361

ОТВЕТЫ

Ответ 1

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

var parallaxFactor = 3;
window.addEventListener("scroll", function(e){
    el.style.top = (document.body.scrollTop / parallaxFactor) + "px"; 
    // This is the magic. This positions the element y-cord based off of the page scroll
}, false);

CODEPEN

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

Жить долго и процветать.

Update:

Этот пример работает только для элементов в верхней части экрана. Если бы это было для более общей цели, вы хотели бы сохранить по умолчанию y-позицию элемента, затем что-то вдоль строк defaultYCord + (document.body.scrollTop / parallaxFactor).

Обновление 2:

Очень хорошая визуализация параллакса происходит от Кейта Кларка, который сделал чистый скроллер css parallax: http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/. Если вы нажмете debug в левом верхнем углу, это даст вам приятный 3D-вид волшебства.

Ответ 2

Это не ответ, как построить параллакс в JS. Но это показывает некоторые основы, которые часто забываются, если вы слишком сильно входите в код.

Основы:

  • Закажите графические объекты в z-слоях. Чем выше z, тем ближе он должен наблюдаться перед экраном.
  • Чем выше ваш объект на оси z, тем быстрее он должен двигаться над чем-то, что появляется, т.е. ваша прокрутка
  • Теперь вы получаете 3-D-эффект, где объекты, ближе к вам, быстрее перемещаются к вашим действиям как объекты, находящиеся далеко.

Ваш вопрос

Как вычислить координаты параллакса y для получения "волшебства"?

Позиция y зависит от вашего z-индекса. Если он далеко, то z-индекс низкий, delta-y мал. Если он находится рядом с вами, delta-y большой. Пожалуйста, обратите внимание, что z-index не обязательно используется как свойство стиля, он больше похож на него. Я бы добавил атрибут, например data-z, к каждому слою параллаксинга.

function parallaxingY(el){
   //el is a parallaxing element with attribute data-z
   return $(el).data('z')*window.scrollTop;
}

предлагаемое решение CSS является хорошим и должно быть предпочтительным. Там "магия" - "z-index" - производится по шкале css-стиля.