Как переместить / анимировать элементы со стороны с помощью Stellar.js на вертикальной прокрутке?

Я использую плагин Stellar.js jQuery для создания эффекта прокрутки параллакса, но я не уверен, что Stellar поддерживает то, что я пытаюсь выполнить. У меня есть базовый эффект прокрутки параллакса, работающий должным образом (в значительной степени основанный на этом уроке от TutsPlus).

Я пытаюсь сделать так, чтобы пользователь прокручивал страницу вниз, а некоторые элементы перемещались / анимировались в ракурс под разными углами - привязываясь к позиции прокрутки. Например, когда пользователь прокручивает страницу вниз, яблоко входит в представление из верхней правой позиции экрана, а когда пользователь продолжает прокручивать страницу вниз, яблоко перемещается по диагонали в направлении нижней левой позиции экран. Если пользователь прокрутит назад вверх, яблоко продолжит двигаться по этому же пути в обратном направлении. Это возможно со Stellar? Должен ли я использовать другой плагин? Могу ли я использовать другой плагин WITH Stellar для достижения этого эффекта?

Любая помощь по этому вопросу будет принята с благодарностью. Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Спасибо!

Источник

2 ответа

Решение

Stellar.js поддерживает создание плагинов свойств позиции, которые позволяют вам написать собственную логику позиционирования.

Я написал пример плагина под названием "яблоко", который делает что-то похожее на то, что вы хотите:

$.stellar.positionProperty.apple = {
    setTop: function($el, newTop, originalTop) {
        $el.css({
            'top': newTop,
            'left': $el.hasClass('apple') ? originalTop - newTop : 0
        });
    },
    setLeft: function($el, newLeft, originalLeft) {
        $el.css('left', newLeft);
    }
};

Вы заметите, что он включает троицу, которая применяет значение 'left', только если элемент имеет класс 'apple':

'left': $el.hasClass('apple') ? originalTop - newTop : 0

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

Теперь вы можете использовать плагин так:

$.stellar({
    horizontalScrolling: false,
    positionProperty: 'apple'
});

Очевидно, вам нужно настроить это в соответствии с вашими целями, но этого должно быть достаточно, чтобы вы начали.

Вы можете увидеть демонстрацию этого в действии на JSFiddle.

Источник

Jaypee, я использовал этот код, чтобы сделать это:

$.stellar.positionProperty.custom = {
  setTop: function($el, newTop, originalTop) {

    if( $el.data('stellar-moveleft') !== undefined ) {
      $el.css({ 'left': originalTop - newTop });
    } else if( $el.data('stellar-moveright') !== undefined ) {
      $el.css({ 'right': originalTop - newTop });
    }

    $el.css({ 'top': newTop });

  },

  setLeft: function($el, newLeft, originalLeft) {
    $el.css('left', newLeft);
  }

};

Исходя из оригинального ответа markdalgleish, он принимает тег данных: data-stellar-moveleft или же data-stellar-moveright чтобы достичь того, что вы хотели, остальное

Источник
Другие вопросы по тегам