Question

向下滚动时会产生滚动效果。就像向下滚动一样，div和图像都会显示出效果。它叫什么，我该如何实现呢？

修改：视差滚动不是我想要的。向下滚动到它所说的＆＃34;特色属性＆＃34;然后查看水平显示的3个图像。如果您在该区域滚动，您将看到滑动影响到该位置的图像。如何使用div和图片完成此操作？

Answer 1

如果你的意思是褪色效果：可以通过将不透明度与图像的y值和文档的y pos连接来实现。

$(document).on( 'scroll', window, function(){
  var opacity = 0;
  var windowTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var windowCenter = windowTop+(windowHeight/2);
  var windowBottom = windowTop+windowHeight;
  var imageCenter = $('#img').offset().top+($('#img').height()/2);
  if(windowCenter < imageCenter){
    opacity = ((windowBottom - imageCenter) * 2) / windowHeight;
  }else{
    opacity = ((windowTop - imageCenter) * 2) / -windowHeight;
  }
  $('#img').css('opacity',opacity);
});

https://jsfiddle.net/c3fu0xnb/

div和图像的滚动效果

1 个答案: