使用 Vue + Vite + TypeScript 实现无限视差滚动效果

最新推荐文章于 2024-05-11 17:40:25 发布
最新推荐文章于 2024-05-11 17:40:25 发布
阅读量579 收藏 9
点赞数 7
文章标签： typescript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37622071/article/details/136370375
版权

目录

1. 结果展示

先来看一下最终效果：在向下滚动时，图片逐渐向上偏移并显现，而在向上滚动时，图片逐渐向下偏移并显现

无限视差滚动

2. 介绍

无限视差滚动效果是一种在网页设计中常用的技术，通过以不同速度移动页面上的不同层次元素，创造出动态的视觉效果。它可以应用于各种网站和页面，包括故事性网站、产品展示页面、创意型网站以及导航和交互设计中。这种效果能够增强用户体验、提升页面吸引力，并为网站注入更多创意和个性。

3. 实现原理与步骤

3.1 布局结构搭建

准备一些图片，并编写一个滚动区域，其中包含三个<div>元素，每个<div>内包含一个<img>元素。

  • 效果示意图：
    可以看到，不管怎么滚动，页面上自始至终都只有3张图片
    在这里插入图片描述
  • 基本代码结构：初始化图片路径，通过css将三张图片重合在一起。
<template>
  <div class="scroll-container">
    <div class="prev">
      <img :src="prev" class="item">
    </div>
    <div class="cur">
      <img :src="cur" class="item">
    </div>
    <div class="next">
      <img :src="next" class="item">
    </div>
  </div>
</template>

<script setup lang='ts'>
// 获取 assets/img/rose路径下的所有图片
const imgList = Object.keys(
  import.meta.glob("/src/assets/img/rose/*.{png,jpg,gif,svg,avif}")
);

const prev = ref(imgList[0]);
const cur = ref(imgList[1]);
const next = ref(imgList[2]);

</script>
<style scoped lang="scss">
.scroll-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.prev,
.cur,
.next {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>

3.2 监听滚轮事件

为了实现滚动区域的响应式滚动效果，我们需要在滚动区域的容器上添加 @wheel 滚轮事件监听器，并在事件触发时进行相应的处理。具体步骤如下：

  • 在滚动区域的容器上添加@wheel滚轮事件监听器，并绑定相应的处理函数。

  • 在滚轮事件处理函数中，判断滚轮滚动的方向。可以通过事件对象中的deltaY 属性来判断滚动的方向，deltaY > 0表示向下滚动，deltaY < 0 表示向上滚动。

  • 根据滚动方向，动态地为滚动区域的容器添加或移除相应的 class。这些 class 可以用来控制页面元素的过渡效果，如淡入淡出、滑动等。

  • 为了确保滚动事件在过渡完成前只触发一次，需要设置一个变量用于标记是否正在进行过渡动画，在过渡完成前只允许触发一次滚动事件。

滚动区域添加@wheel滚轮事件监听，绑定滚动方向的动态:class属性

<div class="scroll-container" @wheel="onWheel($event)" :class="direction">

滚动事件只能在动画完成后执行，设置滚动方向的动态:class属性

// 是否正在过渡动画中
let isAnimate = false;
// 滚动方向（默认为init）
type Direction = 'up' | 'down' | 'init';
let direction = ref<Direction>('init');

/**
 * 滚轮事件
 * @param event 
 */
const onWheel = (event: unknown) => {
  if (isAnimate) return;
  const deltaY = (event as WheelEvent).deltaY;

  if (Math.abs(deltaY) === 0 || isAnimate) return; // deltaY为0或是已经在动画中时，直接返回

  isAnimate = true;

  if (deltaY > 0) {
    direction.value = 'down';
  } else if (deltaY < 0) {
    direction.value = 'up';
  }
}

3.3 图片切换工具函数

先来实现图片路径的切换，在滑动后，要根据当前显示的图片下标来更新3张图片

const currentIndex = ref(1);
/**
 * 滑动后，刷新图片路径
 * @param {number} index 当前显示图片的下标
 */
const refresh = (index: number) => {
  currentIndex.value = index;
  const prevIndex = index === 0 ? imgList.length - 1 : index - 1;
  const nextIndex = index === imgList.length - 1 ? 0 : index + 1;
  prev.value = imgList[prevIndex];
  cur.value = imgList[index];
  next.value = imgList[nextIndex];
}

3.4 监听过渡结束事件

为了实现无限滚动的效果，我们需要在过渡完成后更新图片

  • 绑定过渡完成事件监听器@transitionend
 <div class="scroll-container" @wheel="onWheel($event)" :class="direction" @transitionend="onTransitionend">
  • 根据滚动方向更新图片，并标记过渡动画已完成。
/**
 * 过渡完成事件
 */
const onTransitionend = () => {
  if (direction.value == 'down') {
    // 下滑时，下标为末尾，设置为0
    const index = currentIndex.value === imgList.length - 1 ? 0 : currentIndex.value + 1
    refresh(index);
  } else if (direction.value == 'up') {
    // 上滑时，下标为0，设置为末尾下标
    const index = currentIndex.value === 0 ? imgList.length - 1 : currentIndex.value - 1
    refresh(index);
  }
  // 过渡完成
  isAnimate = false;
  // 重置滚动区域方向
  direction.value = 'init';
}

3.5 视差效果实现

  • 向下滚动前，父元素底部通过绝对定位固定在视口底部，设置z-index: 1，保证覆盖。图片底部通过绝对定位设置在父元素底部，设置translateY(10%)
    过渡时，父元素的高度从0逐渐增加至整个视口高度。图片设置translateY(0)，这样图片有一个上移的效果
    在这里插入图片描述
  • 向上滚动前，父元素通过绝对定位固定在视口顶部，设置z-index: 1，保证覆盖。图片顶部通过绝对定位设置在父元素顶部，设置translateY(-10%)
    过渡时，父元素的高度从0逐渐向下增加至整个视口高度。图片设置translateY(0)，这样图片有一个下移的效果。
    在这里插入图片描述
  • css样式
.prev,
.cur,
.next {
  position: absolute;
  left: 0;
  right: 0;
}


.prev {
  top: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  img {
    top: 0;
    transform: translateY(-10%);
  }
}

.cur {
  top: 0;
  height: 100vh;

  .item {
    top: 0;
  }
}

.next {
  bottom: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  .item {
    bottom: 0;
    transform: translateY(10%);
  }
}

.down .next,
.up .prev {
  height: 100vh;
  transition: 1s ease-in-out;

  .item {
    transform: translateY(0);
    transition: 1s ease-in-out;
  }
}

4. 完整代码参考

test.vue

<template>
  <div class="scroll-container" @wheel="onWheel($event)" :class="direction" @transitionend="onTransitionend">
    <div class="prev">
      <img :src="prev" class="item">
    </div>
    <div class="cur">
      <img :src="cur" class="item">
    </div>
    <div class="next">
      <img :src="next" class="item">
    </div>
  </div>
</template>

<script setup lang='ts'>
// 获取 assets/img/rose路径下的所有图片
const imgList = Object.keys(
  import.meta.glob("/src/assets/img/rose/*.{png,jpg,gif,svg,avif}")
);

const prev = ref(imgList[0]);
const cur = ref(imgList[1]);
const next = ref(imgList[2]);

const currentIndex = ref(1);
/**
 * 滑动后，刷新图片路径
 * @param {number} index 
 */
const refresh = (index: number) => {
  currentIndex.value = index;
  const prevIndex = index === 0 ? imgList.length - 1 : index - 1;
  const nextIndex = index === imgList.length - 1 ? 0 : index + 1;
  prev.value = imgList[prevIndex];
  cur.value = imgList[index];
  next.value = imgList[nextIndex];
}

// 是否正在过渡动画中
let isAnimate = false;
// 滚动方向
type Direction = 'up' | 'down' | 'init';
let direction = ref<Direction>('init');

/**
 * 滚轮事件
 * @param event 
 */
const onWheel = (event: unknown) => {
  if (isAnimate) return;
  const deltaY = (event as WheelEvent).deltaY;

  if (deltaY === 0 || isAnimate) return;

  isAnimate = true;

  if (deltaY > 0) {
    direction.value = 'down';
  } else if (deltaY < 0) {
    direction.value = 'up';
  }
}

/**
 * 过渡完成事件
 */
const onTransitionend = () => {
  if (direction.value == 'down') {
    // 下滑时，下标为末尾，设置为0
    const index = currentIndex.value === imgList.length - 1 ? 0 : currentIndex.value + 1
    refresh(index);
  } else if (direction.value == 'up') {
    // 上滑时，下标为0，设置为末尾下标
    const index = currentIndex.value === 0 ? imgList.length - 1 : currentIndex.value - 1
    refresh(index);
  }
  // 过渡完成
  isAnimate = false;
  // 重置滚动区域方向
  direction.value = 'init';
}
</script>
<style scoped lang="scss">
.scroll-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.prev,
.cur,
.next {
  position: absolute;
  left: 0;
  right: 0;
}

.prev {
  top: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  img {
    top: 0;
    transform: translateY(-10%);
  }
}

.cur {
  top: 0;
  height: 100vh;

  .item {
    top: 0;
  }
}

.next {
  bottom: 0;
  height: 0;
  overflow: hidden;
  z-index: 1;

  .item {
    bottom: 0;
    transform: translateY(10%);
  }
}

.down .next,
.up .prev {
  height: 100vh;
  transition: 1s ease-in-out;

  .item {
    transform: translateY(0);
    transition: 1s ease-in-out;
  }
}
</style>

5. 总结

希望这篇文章能够帮助您更好地理解和实践无限视差滚动，并在您的项目中充分发挥其潜力。如果您有任何疑问或想法，欢迎随时留言分享。感谢您的阅读！

zhouxk19941204
关注
vueparallax快速60fps视差滚动效果组件
08-08
vue-parallax 快速60fps视差滚动效果组件
图片视差滚动（html+css+js）
Linxi_001的博客
05-24 967
由于我们需要考虑的三个图片元素是不停变化的，所以这里的图片元素，我们选择使用JS来动态生成，每张图片初始时的宽度需要撑满视口，初始时只显示当前图片，其他图片隐藏。这里使用CSS定位来完成，初始时cur高度为100vh,pre和next高度为0.pre定位在顶部，next定位在底部。根据鼠标滚轮的方向来重新生成这三个图片，同时将pre或next的高度变为100%1.要实现无限滚动，我们只需要考虑当前图片（cur）、上一张图片(pre)、下一张图片(next)，后面均使用括号内容代替。
（前端）html+css+js实现滑动视差效果
weixin_64388392的博客
11-10 673
html+css+js实现滑动视差效果
视差滚动
m0_73745404的博客
11-23 913
视差滚动
无限视差滚动（轮播）
2302_76607708的博客
05-11 337
这种效果在国外用得很多，不过最近几年国内也慢慢开始使用了，这只是演示效果，具体还得看实际要求。无限视差滚动(轮播）可以给用户一种无限滚动的感觉，视觉效果非常的好。话不多说，先来看效果。核心代码咱都写好了，现在就是css样式部分来完善咱们得无限视差滚动（轮播）这样下来，无限视差滚动（轮播）就已经完成了，是不是挺简单的。这边因为得控制GIF图片大小在5MB以内，导致看着不太丝滑。最后编辑时间 2024，05，11；HTML结构的话 就是一个div即可。ok，接下来我们来看js代码部分。接下来咱们来看代码部分。
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
Vue3 是 Vue.js 框架的最新主要版本，它带来了许多性能优化和开发体验...通过学习和使用这个模板，开发者可以深入理解 Vue3 的新特性，掌握 Vite5 的构建优势，以及如何在实际项目中应用 TypeScript 和 Element-Plus。
Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程
11-30
Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程，Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程，Vue3集成ThreeJS实现3D效果，threejs+Vite+Vue3+TypeScript 实战课程，...
基于vue3+vite+typescript+pinia后台管理系统模版源码+详细说明.zip
05-05
使用 Vue3.2.45 + TypeScript 开发 采用 Vite4.0 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理……） 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范 使用 husky、lint-staged...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
electron+vite+vue+express+typescript项目
最新发布
09-19
electron+vite+vue+express+typescript项目 npm install npm run dev npm run build
vue+Parallax.js | 视觉差特效
01-07
vue+Parallax.js | 视觉差特效，图片与鼠标相反移动。
OLED屏显示 STM32 菜单 滚屏 SPI驱动
06-01
OLED屏显示 STM32 菜单程序 滚屏 斜屏 SPI驱动 （模拟和硬件都行）
vue-prlx:you您正在寻找的Vue.js视差指令（可以设置动画和背景位置动画）
05-14
Vue代理 :hammer_and_wrench: 安装 npm i vue-prlx yarn add vue-prlx :electric_plug: 初始化 ES2015（Webpack / Rollup / Browserify / etc） import Vue from 'vue' // As a plugin import VuePrlx from 'vue-prlx' Vue . use ( VuePrlx ) ; // Or as a directive import { VuePrlxDirective } from 'vue-prlx' Vue . directive ( 'prlx' , VuePrlxDirective ) ; UMD（浏览器） < script src =" https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js " > </ script > < scrip
vue 鼠标视觉差效果实现parallax-js
qq_38057434的博客
04-21 1719
今天来点酷一点的，鼠标放图片上实现视觉差效果parallax-js 安装依赖 npm i -s parallax-js 页面引入 import Parallax from 'parallax-js' or const Parallax = require('parallax-js') html <div id="scene"> <div data-depth="0.2"> <img src="../img/main.jpg.
Unity：无限背景和视差滚动
m0_53438035的博客
03-26 2969
视差滚动： 通常相机和人物绑定以一定的速度向前，而背后的景物设置不同的速度这样就实现了视差效果 获取主相机的transform，记录相机的初始位置 记录相机的移动的位置，刷新背景的位置(因为保证不同速度所以要乘以一个系数),刷新相机初始位置(通过计算每帧的路程实现速度不一样) 无限背景： 获取sprite，再获取texture 计算材质再unity中占几个单位(unity中的默认单位是:1单位100px) 当摄像机位置减去背景的位置的绝对值（左右）大于材质宽度（unity单位）时刷新背景位置 代码：
VUE实现背景视差滚动效果
生擒嫦娥炖玉兔的博客
04-30 4214
前段时间公司领导安排我把公司的官网重做一下（至于为什么重做我这里就不细说了），但咱也没写过网页的项目呀！不过呢咱还是有点微信小程序和基本的html基础的，也就接下了这个任务。想想最近VUE貌似挺火的，也就顺便学习一下。那接下来要说的内容就是基于VUE编写的了。好，废话说完了，开始~ 1.视差滚动 视差滚动（Parallax Scrolling）指网页滚动过程中，多层次...
滚动视差让你不相信“眼见为实”
带你探秘前端森林
08-17 2494
引言 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。其实，这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色的视觉体验，现在已经有数不胜数的网站应用了这项技术。我是在最近的项目中用到了这块，觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。 什么是视差滚动？ 视差效果， 最初是一个天文术语。当我们看着繁星点点的天空时，较远的恒星运动.
【Unity】视差无限滚动背景
weixin_43453797的博客
02-12 3571
unity视差无限滚动背景
vue中视差引擎Parallax.js的使用
weixin_46291454的博客
08-25 3116
视差引擎Parallax.js使用文档 Parallax.js 是一个简单的，轻量级的的视差引擎，能够对智能设备的方向作出反应。在没有没有陀螺仪或运动检测硬件可用的时候，使用光标的位置来代替。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值