Ответы пользователя по тегу Parallax
  • Как анимировать фон состоящий из 2ух картинок?

    lamer350
    @lamer350
    กำลังสูงสุด
    Проще всего внедрить какой нибудь валидный параметр для div, например data-speed.
    Тоисть в HTML ваш DIV выглядел бы так:
    <div class="section-1" id="container" data-speed="1">

    Это некий коэффициент, который вы можете регулировать как вам угодно, к примеру 0.5 если поставить - будет скролится в 2 раза медленнее, а если поставить 3 - будет скроллится в 2 раза быстрее.
    Тогда js код будет выглядеть так:
    function update() {
      var pos = $(window).scrollTop();
      $('.container').each(function() {
        var $element = $(this);
        var height = $element.height() - 18;
        var speed - $element.attr('data-speed');
        $(this).css('backgroundPosition', '50% ' + Math.round((height - pos*speed) * velocity) + 'px');
      });
      $('#container').css('backgroundPosition', '50% ' + Math.round(($('#container').height() - pos*speed) * velocity) + 'px' + '50% ' + Math.round(($('#container').height() - (pos*speed) / 2) * velocity) + 'px');
    };

    если кратко, чтобы легче было найти в чем отличии, вводите новую переменную speed и все pos умножаете на speed
    И потом в HTML методом перебора коэффициентов добиваетесь нужного вам эффекта.
    Ответ написан
    6 комментариев