“拿来主义”学习无限滚动动画(附源码)

news2024/11/13 8:45:16

欢迎关注:xssy5431 小拾岁月
参考链接:https://mp.weixin.qq.com/s/xVTCwR1ZSn5goWmc2yimVA


动画效果

动画效果


需求分析

  需求中涉及无线滚动,说明需要使用 animation 动画。另外,为了方便用户点击操作,需要给滚动对象添加鼠标 移入移出 操作。

  其中,既然是 无限滚动,那么在所有元素滚动结束后,如何做动画衔接就变得尤为重要。

  无限滚动效果中的 动画延迟 ,需要根据实际情况做调整,以保证动画的连贯性。


页面布局

<section class="container">
		<div class="item-group" style="--delay:-1">
			<div class="item-box">
				<div class="img">
					<img src="./img/A1.jpeg" alt="">
				</div>
				<div class="desc">
					<span class="name">张良 (第1名)</span>
					<p class="lines">君子不立危墙之下</p>
				</div>
			</div>
			<div class="follow-btn" >关注</div>
		</div>
		<div class="item-group" style="--delay:0">此处省略部分代码</div>
		<div class="item-group" style="--delay:2">此处省略部分代码</div>
		<div class="item-group" style="--delay:2">此处省略部分代码</div>
	</section>

注意

  • 页面布局中,采用 数组 的格式布局多个元素,保持页面风格统一。
  • 其中 css样式 中声明了变量 –daplay ,但是其中的值不同,这个是关键。
  • 特别注意:元素的动画延迟时间成 等差数列,但是最后一个元素的延迟时间,与前一个元素相同,这是为了保持 动画的连贯

CSS样式(SCSS版)

* {
  margin: 0;
  padding: 0;
  font-size: 12px;
  list-style: none;
  text-decoration: none;
}

.container {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  padding: 0 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
  line-height: 24px;

  &.no-animation {
    .item-group {
      animation-play-state: paused;
    }
  }

  .item-group {
    background: #fff;
    max-width: 460px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px 20px 20px 100px;
    padding: 6px 20px 6px 6px;
    animation: animate 15s linear infinite;
    animation-delay: calc(3s * var(--delay));
    position: absolute;
    opacity: 0;

    &:last-child {
      animation-delay: calc(-3s * var(--delay));
    }

    .item-box {
      display: flex;
      align-items: center;

      .img {
        width: 90px;
        height: 90px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          box-shadow: 0 0 10px #888888;
        }
      }

      .desc {
        margin-left: 20px;

        .name {
          font-size: 18px;
          font-weight: bold;
        }
        .lines{
          font-size: 14px;
          color: #333;
        }
      }
    }

    .follow-btn {
      font-size: 14px;
      letter-spacing: 4px;
      margin-left: 15px;
      border-radius: 16px;
      font-weight: bold;
      padding: 5px 26px;
      color: #fff;
      background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%);
    }

    .del-follow-btn{
      font-size: 14px;
      letter-spacing: 4px;
      margin-left: 15px;
      border-radius: 16px;
      font-weight: bold;
      padding: 5px 26px;
      color: #fff;
      background: linear-gradient(to bottom, #1f1f1f 0%, #a8a8a8 100%);
    }

  }
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.5);
  }

  5%,
  20% {
    opacity: 0.4;
    transform: translateY(100%) scale(0.7);
  }

  25%,
  40% {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
    transform: translateY(0%) scale(1);
  }

  45%,
  60% {
    opacity: 0.4;
    transform: translateY(-100%) scale(0.7);
  }

  65%,
  100% {
    opacity: 0;
    transform: translateY(-100%) scale(0.5);
  }
}

注意事项

  • 此处 css 样式,为了清晰的对照页面结构,我采用了 scss 编写。
  • 开发时,可安装 Live Sass Compilerscss 实时编译为 css ,我们在引入时,依然采用 css 文件。

关键代码

  .item-group {
    background: #fff;
    max-width: 460px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px 20px 20px 100px;
    padding: 6px 20px 6px 6px;
    animation: animate 15s linear infinite;
    animation-delay: calc(3s * var(--delay));
    position: absolute;
    opacity: 0;

    &:last-child {
      animation-delay: calc(-3s * var(--delay));
    }
  }

  其中,animation: animate 15s linear infinite; 定义了无限循环动画, animation-delay: calc(3s * var(--delay)); 定义了动画的延迟时间,这个是动画中的重点,对最后一个滚动对象,做了 animation-delay: calc(3s * var(--delay)); 处理,使得页面动画连贯。

动画暂停

const containerBox = document.querySelector('.container');
const itemGroup = document.querySelectorAll(".item-group")
for (let i = 0; i < itemGroup.length; i++) {
  itemGroup[i].addEventListener("mouseover",()=>{
    containerBox.classList.add("no-animation" )
  })
  itemGroup[i].addEventListener("mouseout",()=>{
    containerBox.classList.remove("no-animation" )
  })
}

  其实,这段代码就做了一件事情:鼠标移入 停止动画


温馨提示

更多博文,请关注:xssy5431 小拾岁月,回复循环滚动,获取源码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1860071.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1.5自然语言的分布式表示-word2vec学习的实现

文章目录 0写在前面1优化器2训练类的构建2.1训练类的初始化2.2训练类的拟合模块2.2.1去重操作remove_duplicate2.2.2反向传播过程2.2.2.1 SoftmaxWithLoss层的反向传播2.2.2.2其它层的反向传播 2.3训练类的损失可视化模块 3训练结果输出 0写在前面 之前的笔记中&#xff0c;我…

USB2.0学习1--基本概念

目录 1.USB概念 2.USB协议发展 3.USB接口类型 3.1 TYPE类型 3.2 Mini类型 3.3 Micro类型 4. USB体系结构和关键概念 4.1 USB工作原理 4.2 USB物理拓扑结构 4.3 USB逻辑拓扑结构 4.4 USB软件架构 4.5 USB数据流模型 4.5.1 USB设备端点 4.5.2 USB管道 4.6 USB即插…

linux中的调试工具gdb

目录 1.背景知识补充 2.使用 知识补充 1.背景知识补充 1.gcc下编译默认是release方式发布的&#xff0c;无法直接进行调试 如果要以debug方式发布&#xff0c;需要携带-g 可以使用grep查询 因为携带debug信息&#xff0c;其文件体积要大一些 2.使用 1.gdb 可执行程序 …

【喜报】恭喜云贝两位学员通过Oracle 19c OCP考试

Oracle 19c OCP成绩展示 课程特色 课程训练周期为两个半月&#xff0c;一年内循环听课&#xff0c;直至掌握技能&#xff1b; 专业讲师亲授OCP技能知识点&#xff0c;工作经验分享 课下布置作业(涵盖考点)辅助学生从实践能力上提升水平 理论培训实验操作&#xff0c;以原理和…

Kotlin设计模式:代理模式详解

Kotlin设计模式&#xff1a;代理模式详解 在软件开发中&#xff0c;设计模式是解决常见问题的一种优雅方法。本文将介绍Kotlin中的代理模式&#xff08;Proxy Pattern&#xff09;&#xff0c;其应用场景&#xff0c;以及如何通过实例代码实现这一模式。 代理模式的目的 代理…

模拟面试之外卖点单系统(高频面试题目mark)

今天跟大家分享一个大家简历中常见的项目-《外卖点单系统》&#xff0c;这是一个很经典的项目&#xff0c;有很多可以考察的知识点和技能点&#xff0c;但大多数同学都是学期项目&#xff0c;没有实际落地&#xff0c;对面试问题准备不充分&#xff0c;回答时抓不到重点&#x…

学会整理电脑,基于小白用户(无关硬件升级)

如果你不想进行硬件升级&#xff0c;就要学会进行整理维护电脑 基于小白用户&#xff0c;每一个操作点我都会在后续整理出流程&#xff0c;软件推荐会选择占用小且实用的软件 主要从三个角度去讨论【如果有新的内容我会随时修改&#xff0c;也希望有补充告诉我&#xff0c;我…

疲劳驾驶智能识别摄像机

疲劳驾驶智能识别摄像机在道路安全管理中扮演着越来越重要的角色。这些先进的设备不仅仅是简单的监控工具&#xff0c;它们通过先进的技术和算法&#xff0c;有效地识别和预防司机疲劳驾驶&#xff0c;从而大大减少了交通事故的风险。 首先&#xff0c;这些智能识别摄像机采用高…

MySQL数据库初学者指南:从安装到常用命令的飞跃!

本文介绍 MySQL 的安装详细图文教程以及常用命令介绍。 1 MySQL 下载 1、官网下载 下载地址&#xff1a;https://dev.mysql.com/downloads/&#xff0c;选择社区版 目前 MySQL 最新版本为 8.0.23&#xff0c;如果想下载之前的版本可以点击 “Looking for previous GA versions?…

利用LabVIEW和数字孪生技术实现PCB电路板测试

利用LabVIEW和数字孪生技术对PCB电路板进行测试&#xff0c;可以通过动画展示实现测试过程的生动、形象和直观。本文详细说明了如何结合LabVIEW与数字孪生技术进行PCB电路板的测试&#xff0c;包括系统架构、实现方法以及具体展示效果&#xff0c;适合对外展示。 在现代电子制造…

C# 唯一性进程的方法封装(Winform/WPF通用)

C#唯一进程封装 C# 唯一性进程的方法封装 public class UniqueProcess{/// <summary>/// 焦点切换指定的窗口&#xff0c;并将其带到前台/// </summary>/// <param name"hWnd"></param>/// <param name"fAltTab"></para…

linux和Win——显卡驱动、Anaconda及pytorch安装(无需单独安装cuda、cudnn)

今天给新电脑的双系统&#xff08;windows11和ubuntu22.04&#xff09;安装了深度学习环境&#xff0c;在此记录一下。 一、Linux系统 &#xff08;一&#xff09;安装显卡驱动 &#xff08;1&#xff09;在安装Nvidia显卡驱动前&#xff0c;一定要点一下下面的“软件更新器…

达梦(DM8)数据库备份与还原(逻辑备份)二

一、达梦数据库的逻辑备份分四种级别的导出&#xff08;dexp&#xff09;与导入&#xff08;dimp&#xff09;的备份 第一种是&#xff1a;数据库级&#xff1a;导出或导入数据库中所有的对象。主要参数是&#xff1a;FULL 第二种是&#xff1a;用户级别&#xff1a;导出或导…

Kotlin 中的数据类型有隐式转换吗?

在 Kotlin 中&#xff0c;数据类型不可隐式转换。在 Java 中&#xff0c;如果数据是从小到大&#xff0c;是可以隐式转换的&#xff0c;数据类型将自动提升。 下面以 int 类型的数据为例&#xff0c;在 Java 中这样写是可以的&#xff1a; int a 2312; long b a;但是在 Kot…

智能电能表如何助力智慧农业

智能电能表作为智能电网数据采集的基本设备之一&#xff0c;不仅具备传统电能表基本用电量的计量功能&#xff0c;还具备双向多种费率计量功能、用户端控制功能、多种数据传输模式的双向数据通信功能以及防窃电功能等智能化的功能。这些功能使得智能电能表在农业领域的应用具有…

不要升级mmkv1.3.5

腾讯有点不负责任的感觉。1.3.5开始直接ban掉了v1.3.5 / 2024-04-24 Drop armv7 & x86 support.&#xff0c;x86和v7a的支持&#xff08;大概率是这个原因&#xff09;。 从打包后的包解压可以看到&#xff0c;只有arm64-v8a和x64目录里面有库。而1.3.4打包解压后&#x…

【话题】分数限制下,选好专业还是选好学校?

目录 引言&#xff1a;一、专业优先的考量二、学校优先的考量三、个人经历与决策四、综合考虑因素五、建议与策略结论文章推荐 引言&#xff1a; 随着24年高考的落幕&#xff0c;考生们迎来了人生中的重要抉择时刻&#xff1a;选择专业还是选择学校&#xff1f;两者皆重要&…

冷静!42.9分还不是SCI?别被影响因子迷了眼!最新JCR变化有哪些?

2024年发布的JCR变化有哪些&#xff1f; 2024年6月20日&#xff0c;科睿唯安正式发布2024年度《期刊引证报告》&#xff08;JCR™&#xff09;。 首先明确几个基本概念&#xff1a; &#xff08;1&#xff09;2024年发布2023JCR &#xff08;2&#xff09;JCR中有254个学科 …

基于FreeRTOS+STM32CubeMX+LCD1602+MCP4162(SPI接口)的数字电位器Proteus仿真

一、仿真原理图: 二、仿真效果: 三、STM32CubeMX配置: 1)、SPI配置: 2)、时钟配置: 四、软件部分: 1)、主函数: /* USER CODE BEGIN Header */ /** ****************************************************************************** * @file : mai…

3)JDK1.8核心Jar包详细详解

JDK1.8核心Jar包详细介绍 JDK1.8包含jar包核心Jar包rt.jar名称含义内容概览功能与作用注意事项 小结 JDK1.8包含jar包 JDK 1.8&#xff08;Java Development Kit 8&#xff09;包含了多个JAR文件&#xff0c;这些JAR文件是Java开发的核心组成部分&#xff0c;提供必要的类库和…