垂直滚动。水平运动 [英] Vertically scrolling. Horizontal movement

问题描述

我正在尝试找到垂直移动页面的代码，然后在垂直滚动的同时水平移动。我很肯定它不是Canvas，但我可能错了。

I'm trying to find the code that is moving the page vertically and then moves horizontally while still scrolling vertically. I'm positive it's not Canvas, but I could be wrong.

这是一个例子。

http：// enso .readymag.com / architects-own-houses / 10 /

推荐答案

好的，你的方法看起来很糟糕，但我得到你想要达到的目标。

Okay your approach seems terrible, but I get what you want to achieve.

你需要在视口上修复一个容器，并在滚动时将其设置为动画。

You need to fix a container on the viewport, and animate it as scroll happens.

喜欢这样：

var $target  = $(".slider").first(),
    currentPosition = 0,
    moveBy = function(scrolledBy){
        currentPosition += scrolledBy;
        $target.css("transform", "translateX(" + (currentPosition) + "px)")
    },
    lastScrollTop = 0 ;

$(window).bind("scroll",function(e){
    var scrolledBy = $(window).scrollTop() - lastScrollTop;
    moveBy(-scrolledBy);
    lastScrollTop = $(window).scrollTop();
});

查找演示此处： http://codepen.io/nishants/pen/ qbqLjw

甚至不想用帆布做这件事

这篇关于垂直滚动。水平运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！