如何在 2 个不均匀的列中创建视差效果，以便它们在最后结束？

Question

我刚刚在苹果网站上看到这个2列的技巧，我觉得它很酷。

基本上，它们有两列，其中一列比另一列长，当您滚动页面时，一列会减慢速度以赶上另一列，因此当您到达列的末尾时，它们会排成一行底.

https://www.apple.com/macos/high-sierra-preview/

这是我目前得到的 https://jsfiddle.net/yfembtfq/ 列按应有的方式工作并在与底部匹配时停止滚动

$(window).scroll(function() {
  var marginvariant = $(window).scrollTop() * (($('#left').height() / $('#right').height()) * 0.16);
  marginvariant = Math.round(marginvariant);
  var $left = $('#left'); //record the elem so you don't crawl the DOM everytime
  var leftbottom = $('#left').height() - $left.position().top - marginvariant;
  var $right = $('#right'); //record the elem so you don't crawl the DOM everytime
  var rightbottom = $('#right').height() - $right.position().top;
  var bottomdif = leftbottom - rightbottom;
  if (bottomdif >= 0) {
    $('#left').css('margin-top', -marginvariant);
  }
});

但是我需要它们仅在它们到达页面顶部时才开始滚动视差效果，而不是像您在 JSFiddle 上看到的那样在我开始滚动时就开始滚动视差效果

我试过使用一种方法来检测它们是否到达页面顶部但是对象的整个偏移量是错误的...我还需要找到一种方法来自动计算最终乘数 * 0.16 根据到页面的高度和列的高度，因为这决定了右列滚动的速度，所以当底部可见时它们在最后匹配。

Answer 1

您是否尝试过使用类似于此的东西 https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2 来检查元素何时在视图中。我也在尝试用 2 列创建这种效果，但我没有找到实现它的方法......也找不到任何教程。最后你成功了吗？

Answer 2

我一直在尝试使用您提供的代码进行一些操作，并且我正在使用锚点 ID 来检测当锚点（图片上的红线）位于顶部时触发视差的时刻window。它以某种方式起作用，但由于某种原因，它创建了到达锚点的左列的跳转（正如您在我附上的图片上看到的那样）。

代码如下：

var anchor_offset = $('#anchor').offset().top;

$(window).on('scroll', function() {
  var marginvariant = $(window).scrollTop() * (($('#left').height() / $('#right').height()) * 0.16);
  marginvariant = Math.round(marginvariant);
  var $left = $('#left');
  var leftbottom = $('#left').height() - $left.position().top - marginvariant;
  var $right = $('#right');
  var rightbottom = $('#right').height() - $right.position().top;
  var bottomdif = leftbottom - rightbottom;

  if ( $(window).scrollTop() > anchor_offset && bottomdif >= 0) {
    $('#left').css('margin-top', -marginvariant);
  }
});

Image of the anchor jump

Answer 3

我喜欢 MacOS High Sierra 网站的效果。所以这是我的 codepen 的 link，我在其中找到了一些解决方案。检查一下并给我一些反馈！

$(window).on("load resize scroll",function(e){
var col1 = $("#left").outerHeight();
var col2 = $("#right").outerHeight();
var travel = col1 - col2;

var topOfColumns = $('.parallax').offset().top;
var columns = $('.parallax').outerHeight() - $(window).innerHeight();
var scrollInterval = columns / travel;

    var e = Math.round( ($(window).scrollTop() - topOfColumns ) / scrollInterval);
    //find the bottom of the right column and give a Bool (true)
    var b = $(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight;

    //if the user scrolls to the top of the columns and the user has not scrolled to the bottom of the right column
    if ($(window).scrollTop() >= topOfColumns && b == false ) {
        $("#right").css({
            "-webkit-transform": "translate3d(0px, " + e + "px, 0px)",
               "-moz-transform": "translate3d(0px, " + e + "px, 0px)",
                "-ms-transform": "translate3d(0px, " + e + "px, 0px)",
                 "-o-transform": "translate3d(0px, " + e + "px, 0px)",
                      transform: "translate3d(0px, " + e + "px, 0px)"
        });
    }
});

如何在 2 个不均匀的列中创建视差效果，以便它们在最后结束？

How to create the parallax effect in 2 uneven columns so they end even at the end?

html

css

jquery

parallax

twitter-bootstrap