基于 Vue 和 CSS 实现的垂直滚动效果

本文档简要介绍了如何通过 Vue.jsCSS 动画 实现一个带有垂直滚动效果的组件,并通过在动画中插入停顿,模拟类似翻页的效果。

1. Vue 组件结构

1.1 模板部分 (<template>)
html 复制代码
<template>
  <div class="line1 flex">
    <div class="scroll-container">
      <div class="flex">
        <Icon name="8888" value="0000" />
        <Icon name="8888" value="0000" />
      </div>
      <div class="flex">
        <Icon name="8888" value="1111" />
        <Icon name="8888" value="1111" />
      </div>
    </div>
    <div class="scroll-container">
      <div class="flex">
        <Icon name="8888" value="0000" />
        <Icon name="8888" value="0000" />
      </div>
      <div class="flex">
        <Icon name="8888" value="1111" />
        <Icon name="8888" value="1111" />
      </div>
    </div>
  </div>
</template>

要点

  • 使用 <Icon /> 组件显示滚动内容。
  • <div class="scroll-container"> 用于包裹滚动内容,执行滚动动画。
1.2 动画设置 (<style scoped>)
css 复制代码
.line1 {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  overflow: hidden;
  height: 100px; /* 设置可视区域高度 */
}

.scroll-container {
  display: flex;
  flex-direction: column; 
  animation: translateY 5s infinite linear;
}

@keyframes translateY {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0); /* 停顿 */
  }
  50% {
    transform: translateY(-50%); /* 滚动至中间 */
  }
  90% {
    transform: translateY(-50%); /* 停顿 */
  }
  100% {
    transform: translateY(-100%); /* 滚动至顶部 */
  }
}

要点

  • @keyframes translateY:定义滚动动画,使用停顿阶段(如 40% 和 90%)来模拟翻页效果。
  • animation :通过 animation: translateY 5s infinite linear; 使得容器内的内容在 5 秒内实现平滑循环的垂直滚动。

2. 核心概念

2.1 垂直滚动效果

使用 @keyframes 实现垂直滚动,控制内容从当前位置平滑滚动到顶部并重复。

2.2 停顿效果

通过在关键帧中设置相同的 transform 值(如 40%90%)来插入停顿,让滚动过程更像翻页。

2.3 Flex 布局
  • flex-direction: column;:确保内容垂直排列。
  • overflow: hidden;:隐藏超出容器范围的部分,确保内容只在设定区域内显示。
相关推荐
Xiaouuuuua12 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser33 分钟前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI36 分钟前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三40 分钟前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三1 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘1 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13131 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python