Question

当我到达特定的scrollTop（）值时，我想制作一个div幻灯片（in，out，left，up，right或down）。但是，我不希望它触发一些动画......我希望div与滚动一起移动，就像在这里实现的效果一样：http://www.tioluchin.com/

到目前为止，＆＃34;最接近＆＃34;我得到了这个：

var vistaEstandar = document.getElementById('vista');
vistaEstandar.onscroll = function() {animacionesEstandarVista()};
    function animacionesEstandarVista() 
    {
        var ypos  = vistaEstandar.scrollTop;

        if (($(window).width() >= 1800 && vistaEstandar.scrollTop > 6053) || ($(window).width() > 1800 && document.documentElement.scrollTop > 6053)) {
            var image= document.getElementById("seccion9textoSegundo");
            var toppin = ypos/6053;
            image.style.top = toppin*150 + 'px';
        }
        else
        {};

但是，这不起作用，因为我设置的值太低了。

我试图整理的网络很长，所以当我将该值乘以太高或太低时。

在网站http://www.tioluchin.com/中，我想要刀具和食物的效果

Answer 1

我进入了源代码，因为它让我很好奇。我发现他们是如何做到的。

第一部分是捕捉滚动

上发生的事情

$(document).scroll(function(){
    windowScroll()
});

他们有条件在较小的屏幕上禁用它，但这在这里并不重要。

第二部分是：

 function windowScroll(){
  var st = $(document).scrollTop();

  $("#aff").css({"top": 32 - st * 0.15 + "px"});
  $("#aff").css({"left": 48 - st * 0.15 + "px"});
 }

对于更多元素，它们更大。这是我的游乐场。原则上，您从当前位置开始作为偏移量。 “st”表示你有多深。 st * 0.15告诉你元素从屏幕上运行的速度。

我的HTML：

<div class="wrapper">
<div id="aff" class="moving-div">

</div>

和CSS：

 .moving-div {
    width: 3rem;
    height: 3rem;
    position: relative;
    top: 2rem;
    left: 3rem;
    background: red;
  }

  .wrapper {
    height: 1000px;
  }

如何通过滚动制作div幻灯片？

1 个答案: