Вертикальный параллакс в jQuery - PullRequest
7 голосов
/ 25 мая 2011

Я сейчас создаю свой сайт-портфолио, и у меня возникли небольшие трудности, в основном у меня две небольшие проблемы ...

  1. Я не могу получить фоновую позицию для анимации по оси Y, когда эта позиция содержит атрибут "center" на оси x

  2. Я не могу получить эффект при прокрутке, пауза, когда я прекращаю прокрутку, и продолжаю, когда я продолжаю прокручивать

Вот код, который я использую:

//Top section parallax
$(function parallaxInnerAnimation(){

    //Reset the background position
    $('#first-canvas .inner').css({backgroundPosition: 'center 0px'});

    //Set the animations
    $(window).scroll(function() {
        $('#first-canvas .inner').animate({
        backgroundPosition:"(center -200px)"
        }, 5000, 'linear');
    });

});

Я использую плагин jquery.backgroundPosition v1.22 от Александра Фаркаша и jQuery 1.6.1.

Это сайт css3 и html5, и он в основном предназначен для поддержки IE9, Firefox 4, Chrome 11 и т. Д. ... Я делаю другой сайт для старых браузеров, чтобы обеспечить обратную совместимость в жертву

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

UPDATE:

Чтобы поместить это в контекст, я теперь разместил его на своем живом сервере http://charlieryan.co.uk/stack-overflow/

Ответы [ 2 ]

1 голос
/ 22 марта 2016
$(window).scroll(function ()
{
 var yPos=-($(window).scrollTop() / 6);
 if($(window).scrollTop()>100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
 }
 if($(window).scrollTop()<100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
 }
});

официальный учебник здесь

1 голос
/ 31 мая 2011

Я посмотрел на плагин backgroundPosition.charlieryan.js, он не поддерживает центральное положение фона.Возможно, вам придется изменить плагин и использовать его.Существует метод toArray, который должен быть изменен.Ошибка js связана с этой проблемой.Дайте мне знать, если вам нужна дополнительная помощь.

...