一、效果简介

首先将背景图片和内容区域分隔开来,为其分别设置不同的运动速度.当页面向下滚动时,由于背景图片的移动速度比内容区域的移动慢,本来会很快消失的图片,在我们眼中会慢慢的上移,而第二张图片又会随着内容区的上移而缓缓展开.如同展开的画卷一般.这就是长沙网站建设介绍的视差滚动效果.

视差滚动效果截图

二、代码展示

前端代码非常简单,上下两个div存放背景图片,中间的内容区域用来显示文字.关键的地方还是在长沙网站开发的JavaScript代码中:

const parallaxBgs = document.querySelectorAll('.backg');
   window.addEventListener('scroll', function () {
   const scrollY = window.scrollY;
   parallaxBgs.forEach(bg => {
      const container = bg.parentElement;
      const containerTop = container.offsetTop;
      const speed = 0.5;
      const offset = (scrollY - containerTop) * speed;
      bg.style.transform = `translateY(${offset}px)`;
   });
});

通过JavaScript的方法,获取页面中所有带有backg类的元素,因为背景图存放在这些元素下.在监听到页面产生滚动时,将滚动的距离记录下来并实时进行计算,通过CSS中transform属性,使背景图的移动速度区别于内容区域,这样就实现了长沙网站设计所说的视差滚动效果.

三、效果视频

四、效果扩展

在一般的企业官网或者产品网站,使用这个效果已经可以达到让用户眼前一亮的感觉了.但我们也可以通过增加JS代码,来让这个效果更加丰富.

比如为其绑定鼠标移动事件,让用户能直接通过鼠标来进行控制效果变化,增强互动性.

又或者与更加专业的GSAP等动画库进行结合,创造出更亮眼的视觉效果.

这就是长沙网站制作出的页面视差滚动效果的制作方法,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.