这个想法是有 5 个部分,分别命名为 section1、section2 等。
每个部分都有自己的图像。
当用户滚动时,图像应该通过改变不透明度“淡出”和“淡入”,并且使用 transform3D 会有轻微的放大/缩小效果。
我试图达到与此相同的结果:
我尝试开始的事情是这样的
jQuery(document).ready(function() {
jQuery(window).scroll(function(event) {
let scroll = jQuery(this).scrollTop();
let opacity = 1 - (scroll / 1000);
var x = (scroll / 100);
if (opacity >= 0) {
jQuery('#section1').css({'opacity': opacity , 'transform': "scale(" + x + "," + x + ")"});
}
});
});
现在,这确实会在您滚动时产生不透明度变化 - 问题是,它适用于滚动时的整个页面,但我希望只有当您的用户在 ID 为 section1 的 div 中/周围滚动时才会发生效果
我知道它应用于整个窗口,因为 .scroll 应用于 jQuery(window)。我试过使用 jQuery('#section1') 但如果我这样做什么也不会发生。
我已经尝试添加一个 transform3D 效果,如http://www.moxhe.com.au/所示,但我也在努力让它工作,只有当用户四处滚动时,向下滚动应该有小幅减少,向上滚动应该有小幅增加带有 bg 图像的特定 div。
长话短说,我需要制作与http://www.moxhe.com.au/相同的 css 动画,但我正在努力将 css 效果应用于页面的特定部分/div,其 ID 应为整个页面.
慕容708150
猛跑小猪
相关分类