Question

我想尝试与此site相同的效果，但是在实现该动画方面迷失了方向。

当用户开始滚动时，标题中的图像会放大，滚动选项卡（垂直）不会移动，直到出现另一幅图像为止，然后滚动条才开始工作。

滚动时如何实现此动画？

此刻，我的想法是：在滚动时获取DOM的像素值以及要定位的div的高度。当DOM的值小于框的高度时，比例值应根据滚动值而变化。

JS看起来像这样：

<script>
    $(window).scroll(function() {
        var initial_scroll = $('html').scrollTop();
        var firstbox_height = $('#firstbox').height(); 
       // console.log(firstbox_height);

        while(initial_scroll < firstbox_height){
            var sum = firstbox_height + ((firstbox_height * 0.01) / 100);

            $('img').css({

               // "transform": "scale(" + sum + ")"

            });                
        }        

    });
</script>

我似乎陷入了无限循环。

我的笔是here

Answer 1

这是一个工作示例。它不是完美无缺的，当您在顶部顶部来回滚动一点时，它会出错，文本大小可能会朝错误的方向更改。当使用箭头键滚动时，它也不起作用。但是它的作用是应该为您提供有关如何进行操作的想法。
可能有一种更清洁，更好，更简洁的方法来执行此操作，但这是一种方法。
为了获得完美的效果，我认为您可能必须在变化的表面上放置一个透明的<div>，只是为了跟踪位置以及方向。

在这里拨弄：https://jsfiddle.net/codesam/nedj3ubx/53/

HTML：

<body>
  <div id="box">
    Text
  </div>
  <p id="direction">
  </p>
</body>

CSS：

body {
  height: 200vh;
}

#box {
  width: 100%;
  height: 50vh;
  background-color: black;
  color: white;
  font-size: 72px;
}

jQuery：

$(document).ready(function(){
    var initialScroll = -1;
    var size;
    $(window).on('scroll touchmove mousewheel', function(e){
        var currentScroll = $(window).scrollTop();
        if (currentScroll > initialScroll) {
            $("#direction").text("down");
            size = parseInt($("#box").css("font-size"));
            if (size > 10) {
                $("#box").css("font-size", "-=2");
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }
        else if (currentScroll < initialScroll) {
            $("#direction").text("up");
        }
        else if (currentScroll == 0 && initialScroll == 0) {
            size = parseInt($("#box").css("font-size"));
            if (size < 72) {
                $("#box").css("font-size", "+=2");
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }
        initialScroll = currentScroll;
    });
});

如何在使用视差效果滚动时禁用（不隐藏）滚动垂直条

1 个答案: