Эффект параллакса на основе положения изображения

Я все еще работаю над веб-сайтом Parallax для клиента, основанного на трех уровнях. Я столкнулся с проблемой, из-за которой я не могу добавить третий верхний уровень.

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

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

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

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


html jquery css parallax
person Ollie Barker    schedule 25.06.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вам нужно написать свой собственный код, основанный на чистом jquery/javascript.

Плагины созданы для простых операций. Вам необходимо создать JS-приложение на основе текущего $(document).scrollTop()

И основной шаблон кода будет:

$(window).on('scroll resize',function(){
  var Top = $(document).scrollTop();
  if(Top < 200){ /*slide1 actions*/ }
  else if(Top >= 200 && Top < 400){ /*slide2 actions*/ }
  else if(Top >= 400 && Top < 600){ /*slide3 actions*/ }
  // etc
});

Также используйте эти советы https://stackoverflow.com/a/11709360/1136141 для повышения производительности.

person Rustam    schedule 29.07.2012

arrow_upward
0
arrow_downward

Проблема, с которой я сталкиваюсь, заключается в том, что с большинством плагинов параллакса, которые я пробовал, плавающие изображения третьего уровня не имеют ничего, что могло бы исчезнуть.

Проблема в том, что вы хотите, чтобы изображения третьего уровня исчезали в определенные моменты? У меня была похожая проблема с длинным фоном с одиночной прокруткой, затем я создал страницу из div поверх этого без фона, а затем поместил изображения в различные div вверх и вниз по странице с div overflow, установленным на hidden. Сделано для более удобного размещения изображений третьего уровня, а также означает, что вы можете скрыть их в определенных точках.

person Tim Wilkinson    schedule 29.08.2012

arrow_upward
0
arrow_downward

если вы можете заставить его работать с размером экрана, просто используйте jquery, чтобы получить и установить положение объекта в зависимости от размера экрана,

jQuery(document).ready(function($) {

    jQuery.event.add(window, "load", resizeFrame);
    jQuery.event.add(window, "resize", resizeFrame);

    function resizeFrame() 

    {
        var h = $(window).height();

        $('#foo1') .css({'top': (h-30)});
        $('#foo2') .css({'left': (h-67)});

    }
});

Например.

person Tim Wilkinson    schedule 10.01.2013