содержания скроллинга в DIV, когда он прошел

Question

Попытки сделать что-то подобное на этом сайте:

http://www.strangelove.nl/cases/kpmg-meijburg

часть, где продемонстрирован отзывчивый дизайн, изображение внутри устройств начинает прокручивать, когда посетитель свитку прошлый этот пункт. Я попытался воспроизвести его, и я вижу .js в нижнем колонтитуле, который, вероятно, способствует. На данный момент у меня есть css и html, работающие на моей тестовой странице.

Любая помощь с радостью оценивается.

Answer 1

Стрейнджлав используют свой собственный Кубрик-JS, которая доступна здесь: Kubrick-js

Если вы просто хотите иметь «изображение прокрутки внутри кадра во время прокрутки by'-эффекта, вы можете сделать это следующим образом:

$(window).scroll(function() { 
    var animStart = 0, // the point where the animation starts 
     animEnd = 500, // the point, where the animation ends 
     scrollStartPos = 0, // the position your inside scrolling element starts 
     scrollEndPos = -300, // the position your inside scrolling element should end 
     winPosY = window.pageYOffset, // the scroll distance from top of document 
     scrollElement = $('.picture'); // the element to scroll 

    if(winPosY > animStart && winPosY < animEnd) { 
     // how far through the animation are we? 
     var howFar = (winPosY - animStart)/(animEnd - animStart), 
      scrollPos = Math.round(scrollStartPos + howFar * (scrollEndPos - scrollStartPos)); 

     scrollElement.css('top', scrollPos + 'px'); 

     $('.show-stats').html('How far: ' + howFar + '<br>scroll Position: ' + scrollPos); 
    } 
}); 

Вот скрипка для него: Fiddle

надежда, что помогает.