基于 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;:隐藏超出容器范围的部分,确保内容只在设定区域内显示。
相关推荐
yanlele6 分钟前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang45311 分钟前
React移动端开发项目优化
前端·react.js·前端框架
天若有情67312 分钟前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友15 分钟前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir16 分钟前
vue3.2 前端动态分页算法
前端·算法
烛阴1 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子1 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode1 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf