Question

尝试在此网站上完成某些事情：

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

展示响应式设计的部分，当访问者滚过该点时，设备内的图像开始滚动。我试图复制它，我看到页脚中的.js可能有所贡献。现在，我的测试页面上有css和html。

任何帮助都很高兴。

Answer 1

Strangelove正在使用他们自己的Kubrick-js，可以在这里找到：Kubrick-js

如果你只是想让'图像在滚动时在框架内滚动'效果，你可以这样做：

$(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

希望有所帮助。

在div通过时滚动内容

1 个答案: