在Vue中使用CSS3实现内容无缝滚动的示例代码

2024-10-28 14:34:19

一、效果预览

最近在做一个活动页面，遇到幸运用户中奖的滚动公告需求。下面是实现效果：

（gif录制略显卡顿，实际效果很流畅）

二、无缝滚动原理

1、容器宽高固定，超出内容隐藏；
2、内容准备2份，现参与滚动的内容有A、B两份，向左滚动；
3、滑动过程中，B份紧随A份之后，营造出无缝滚动回来的效果；
4、在A部分内容完全滚出容器的一瞬间，立刻将AB内容位置复原，由于A、B内容一模一样，这个复原过程很难看出来；
5、循环第3步；

三、代码

1、html部分

<template>
  <div class="lucky-user">  <!-- 容器 -->
    <ul class="user-list" :style="`animation-duration: ${luckyUsers.length * 4}s;`">  <!-- 内容区容器 -->
     <li v-for="(item, index) in luckyUsers" :key="index">{{ item }}</li>   <!-- 内容A -->
     <li v-for="(item, index) in luckyUsers" :key="index+'copy'">{{ item }}</li>  <!-- 内容B -->
    </ul>
  </div>
</template>

2、CSS部分

.lucky-user {
  width: 540px; //容器定宽高
  height: 30px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 30px;
  color: #E9B65F;
  overflow: hidden; //超出内容隐藏
  .user-list {
    width: fit-content; // Q1
    white-space: nowrap; // 内容不换行
    animation-name: seamless-scrolling; // Q3
    animation-timing-function: linear; // 动画速度曲线，匀速
    animation-iteration-count: infinite; // 动画循环无限次播放
    li {
      display: inline-block;
      margin-right: 30px;
    }
  }
}

@keyframes seamless-scrolling {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%); //Q2
  }
}

Q1：因为滚动内容一般都不是固定的，需要接口获取，所以内容区的宽度也就无法确定，这里使用CSS3的新特性width: fit-content，使宽度自适应内部内容，至于为什么这里需要设置宽度属性，见下文
Q2：设置动画。由于内容区实际有AB两份，B是A的副本，所以一段动画的终点就是内容区向左位移50%（内容区width的50%），这也就解释了Q1中为什么一定要设置宽度属性了：如果不设置，width的值不会随内容撑开，此时的50%是父容器width的50%，终点值就错了
Q3：为什么animation不采用简写形式，而是拆开？因为animation-duration 动画时长不能固定，如果接口获取到的数据很多，动画时长固定5s，那滚动地得有多快？所以animation-duration采用属性绑定形式，根据数据长度进行延长 :style="animation-duration: ${luckyUsers.length * 4}s;" 具体乘几看自己喜欢。
我也试过采用简写形式进行style属性绑定，结果发现动画不生效。

3、JS部分

export default {
 name: 'app',
  data() {
   return {
    luckyUsers: []
   }
  },
  created() {
   this.getLuckyUsersList()
  },
  methods: {
   getLuckyUsersList () {
     //调接口拿取数据
     this.luckyUsers = [
      '000000抽中了xxx奖品',
      '111111抽中了xxx奖品',
      '222222抽中了xxx奖品',
     ]
    }
  }
}

四、总结

无缝滚动的实现主要借助了css3中的animation、width:fit-content自适应属性、translate位移等特性;
从实现原理上看，其实就是一个欺骗眼睛的小伎俩而已～

到此这篇关于在Vue中使用CSS3实现内容无缝滚动的示例代码的文章就介绍到这了,更多相关Vue CSS3无缝滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

解决vue scoped scss 无效的问题

今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体
Vue如何使用CSS自定义变量

在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多.归其原因是因为 less.sass 等预处理器已经拥有定义变量的功能,以及Vue.react很方便设置 style 样式,大家可能觉得使用 css 定义变量不方便且没必要.实则不然举个最直观的栗子:"如何使用 vue 设置伪类伪元素的样式".这是个世纪难题,大部分人可能会通过修改类名的方式解决,可如果要修改的样式多,或者我想通过不同的数据渲染不同的样式,那该怎么办呢?今天我就来直接解决这个问题. 先来了解什么是 c
如何在vue-cli中使用css-loader实现css module

[前言] 无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上,vue中用scoped属性实现样式的私有化,利用深度作用选择器/deep来实现样式的去私有化. 例子: <div> <div class="demo"> <div class="child"></ div> </div> </div> <script> // some code <
在vue中动态修改css其中一个属性值操作

我就废话不多说了,大家还是直接看代码吧~ <template>  <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r
Vue3新特性之在Composition API中使用CSS Modules

在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu
Vue打包部署到Nginx时,css样式不生效的解决方式

今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的. 于是乎,在网上开始寻找资料,发现大部分前辈的解决方案都是在,config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

今天,我们使用Vue CLI3 做一个移动端适配 . 前言首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h =>
vue中配置scss全局变量的步骤

在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade
Vue + Scss 动态切换主题颜色实现换肤的示例代码

根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t
Vue+scss白天和夜间模式切换功能的实现方法

本文主要介绍了Vue+scss白天和夜间模式切换功能的实现方法,分享给大家,具体如下: 效果图图片被压缩了不够清晰. 安装Scss 注:若安装失败可以考虑使用cnpm,或者切换npm源等方式安装. npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader
vue css 引入asstes中的图片无法显示的四种解决方法

这里主要针对的是vuecli2中的一些问题. vue项目中,常常会有很多的图片资源,这样的资源存放位置,通常我们有两个选择:1. static,2. assets 关于这两者之间的区别,和如何选择这里就不多说了! 这里我们来说说assets目录下存放图片时,在vue组件的css样式中引入图片时将会遇到的一些问题! 正常情况,我们在本地开发调试的时候,无论什么样的方式引入图片都不会有问题.但是,一大包发布打线上,就会出现图片无法加载的情况! 这是因为,出于某些原因,有人修改了config目录下的i

在Vue中使用CSS3实现内容无缝滚动的示例代码

相关推荐

随机推荐