当前位置： 首页 > news >正文

第6个-滚动动画

news 2025/12/21 8:23:08

Day 6 - Scroll Animation

1. 演示效果

QQ录屏20240213173506 -original-original

2. 分析思路

  • 布局

    所有的内容进行水平垂直居中，可以使用**margin:0 auto;，也可以使用flex**布局：

body {background-color: #efedd6;display: flex;flex-direction: column;justify-content: center;align-items: center;
}

  • 绑定滚动事件

    1. 滚动事件可以用事件监听addEventListener()绑定到 window 对象上(也可以绑定到document上)
    2. 触发滚动事件后，执行对应的代码函数，判断是否显示卡片

  • 判断是否显示卡片

    1. 用querySelectorAll()获取卡片元素，得到一个伪元素数组。
    2. 用forEach()方法，对每一个卡片元素判断是否显示。
    3. 显示原则：当卡片的顶部到达视图窗口的顶部的距离小于视图窗口的高度时，说明卡片到达视图窗口了，便可以显示出来。
    4. 此处用到了getBoundingClientRect()方法和Window.innerHeight属性，**MDN Web Docs**是这样解释的：

    Element.getBoundingClientRect()方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
    语法 > getBoundingClientRect() > 参数
    无。
    返回值
    返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

img

该笔记参考自https://www.cnblogs.com/feixianxing/p/mini-web-project-scroll-animation-50-projects-50-days-GitHub-html-css-javascript-js.html

3. 代码实现

3.1. HTML

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>第6个-滚动页面</title><link rel="stylesheet" href="./style.css" /></head><body><h1>Scroll to see the animation</h1><!-- 盒子的数量不限 --><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><div class="box"><h2>Content</h2></div><script src="./script.js"></script></body>
</html>

3.2. CSS

* {box-sizing: border-box;
}
/* 设置垂直水平居中 */
body {background-color: #efedd6;display: flex;/* 设置主轴方向从上到下 */flex-direction: column;justify-content: center;align-items: center;
}/* 内容 */
.box {background-color: #4682b4;width: 400px;height: 200px;margin: 10px;display: flex;justify-content: center;align-items: center;color: #ffffff;font-size: 30px;border-radius: 10px;box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);transform: translateX(400%);transition: transform 0.4s ease;
}
/* 内容为偶的左边出，奇数从右边出 */
.box:nth-of-type(even) {transform: translateX(-400%);/* 测试 *//* background-color: red; */
}
/* 添加show按钮后 content内容回来 */
.box.show {transform: translateX(0);
}

3.3. Javascript

// 获取卡片元素
const boxes = document.querySelectorAll(".box");// 设置事件监听
window.addEventListener("scroll", checkBoxes);// 调用函数
checkBoxes();// 定义函数checkBoxes
function checkBoxes() {const triggerBottom = (window.innerHeight / 5) * 4;// 遍历 判断每一个卡片元素是否显示boxes.forEach((box) => {const boxTop = box.getBoundingClientRect().top;// 判断是否显示卡片// 当卡片的顶部到达视图窗口的顶部的距离小于视图窗口的高度时，// 说明卡片到达视图窗口了，便可以显示出来。if (boxTop < triggerBottom) {// 添加showbox.classList.add("show");} else {// 删除粗showbox.classList.remove("show");}});
}

相关文章：

第6个-滚动动画

Day 6 - Scroll Animation 1. 演示效果 2. 分析思路 布局 所有的内容进行水平垂直居中&#xff0c;可以使用**margin:0 auto;&#xff0c;也可以使用flex**布局&#xff1a; body {background-color: #efedd6;display: flex;flex-direction: column;justify-content: center…...

编程日记 2024/2/18 12:05:07

配置oracle连接管理器（cman）

Oracle Connection Manager是一个软件组件&#xff0c;可以在oracle客户端上指定安装这个组件&#xff0c;Oracle连接管理器代理发送给数据库服务器的请求&#xff0c;在连接管理器中&#xff0c;我们可以通过配置各种规则来控制会话访问。 简而言之&#xff0c;不同于专用连接…...

编程日记 2024/2/18 12:03:05

[N-142]基于springboot,vue停车场管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatis-plus 本项目分为普通用户和管理员…...

编程日记 2024/2/18 12:01:02

DAY53：动态规划（买股票的最佳时机）

Leetcode: 121 买卖股票的最佳时机 代码随想录 1、确定下标和含义 dp[i][0]表示当天持有股票所得的最多现金 do[i][1]表示当天不持有股票的最多现金 2、递推公式 &#xff08;1&#xff09;如果第i天持有股票即dp[i][0]&#xff0c; 那么可以由两个状态推出来 第i-1天就…...

编程日记 2024/2/18 11:59:01

快速实现用户认证：使用Python和Flask配合PyJWT生成与解密Token的教程及示例代码

生成token 与解密 token 和 拦截器 #学习交流 访问 # https://v.iiar.cnimport jwt import datetime from models import XUser from flask import request, jsonify from functools import wrapsSECRET_KEY XPay# 创建token def generate_token(user_id):try:payload {exp:…...

编程日记 2024/2/18 11:56:59

外汇110：外汇做空是什么意思？如何运作？一文读懂

外汇市场允许卖空&#xff0c;就像众多金融市场一样。但什么是卖空呢&#xff1f;如何外汇做空&#xff1f;在本文中&#xff0c;我们将讨论如何做空货币。什么是外汇做空&#xff1f; 外汇做空&#xff08;Short Selling&#xff09;是外汇市场上的一种投资方式。它指的是投资…...

编程日记 2024/2/18 11:53:56

【记录】个人博客或笔记中的数学符号设定

note 这里记录个人博客中常用的数学符号数学格式和对应含义 文章目录 note数与数组索引集合线性代数微积分概率和信息论数据与概率分布函数深度学习中的常用数学表达方式 数与数组 α 标量 α 向量 A 矩阵 A 张量 I n n 行 n 列单位矩阵 v w 单词 w 的分布式向量表示 …...

编程日记 2024/2/18 11:48:50

Redis Sentinel工作原理

Redis Sentinel是Redis的高可用性解决方案。它主要用来监控Redis master和slave服务器的运行状态&#xff0c;并在master宕机时自动进行故障转移&#xff0c;即从slave节点中选举出新的master节点&#xff0c;并让其余的slave节点指向新的master节点。 Redis Sentinel工作原理…...

编程日记 2024/2/18 11:45:47

GEE入门篇|遥感专业术语：理论介绍

本章的目的是介绍遥感图像的一些主要特征&#xff0c;以及如何在Earth Engine中检查它们。我们将讨论空间分辨率、时间分辨率和光谱分辨率&#xff0c;以及如何访问重要的图像元数据。将了解到来自不同卫星平台上的几个传感器的图像数据。在本章的学习完成后&#xff0c;您将能…...

编程日记 2024/2/18 11:42:45

react中如何做到中断diff过程和恢复

workLoop是 实现时间切片 和 可中断渲染的核心&#xff0c;简要说明如下&#xff1a; // 并发任务的入口function workLoopConcurrent() {// Perform work until Scheduler asks us to yield// 有任务 & 是否需要中断while (workInProgress ! null && !shouldYiel…...

编程日记 2024/2/18 11:40:43

python：PyPDF2 从PDF文件中提取目录

我发现 pypdf 和 pypdf2 的作者是同一人&#xff1a;Mathieu Fenniak pip install pypdf2 ; pypdf2-3.0.1-py3-none-any.whl (232 kB) 编写 pdf_read_dir.py 如下 # -*- coding: utf-8 -*- """ pypdf23.0.1 从PDF中提取目录 """ import os…...

编程日记 2024/2/18 11:36:39

Java 2：运算符、表达式和语句

2.1 运算符与表达式 Java提供了丰富的运算符&#xff0c;如算术运算符、关系运算符、逻辑运算符、位运算符等。Java语言中的绝大多数运算符和C语言相同&#xff0c;基本语句如条件分支语句&#xff0c;循环语句等&#xff0c;也和C语言类似。 2.1.1算术运算符与算术表达式 1…...

编程日记 2024/2/18 11:34:36

批量提取word文件中文本框内容的三种方法

一、问题的提出 在日常的办公中&#xff0c;有时需要提取多个word文件中的文字框的内容。有时&#xff0c;文字框的数量比较多&#xff0c;而且处于文档的不同位置&#xff0c;手工提取比较耗时耗力&#xff0c;同时也可能会产生遗漏。 我们也可以通过VBA和Python来解决这个问…...

编程日记 2024/2/18 11:32:34

Leecode之合并两个有序链表

一.题目及剖析 https://leetcode.cn/problems/merge-two-sorted-lists/description/ 二.思路引入 用指针遍历两个链表并实时比较,较小的元素进行尾插,然后较小元素的指针接着向后遍历 三.代码引入 /*** Definition for singly-linked list.* struct ListNode {* int va…...

编程日记 2024/2/18 11:30:32

陶建国教授谈中西方文化的差异与交融

龙年到来&#xff0c;这个春节里&#xff0c;“龙”字的英文翻译引发关注&#xff0c;冲上了热搜&#xff0c;网友发现&#xff0c;“龙”不再翻译为“dragon”&#xff0c;而是龙字的谐音“loong”。原来&#xff0c;在西方人的眼里&#xff0c;龙是凶猛的怪兽&#xff0c;具有…...

编程日记 2024/2/18 11:29:31

Ps：画笔选项

画笔选项 Brush Options提供了对画笔&#xff08;圆形笔刷&#xff09;基本属性的控制&#xff0c;比如大小、硬度、间距、角度和圆度等。 Photoshop 中的快速选择工具、污点修复画笔工具、修复画笔工具、颜色替换工具、背景橡皮擦工具等的工具选项栏上提供了这种圆形笔刷选项。…...

编程日记 2024/2/18 11:25:28

嵌入式——Flash（W25Q64）

目录 一、初识W25Q64 1. 基本认识 2. 引脚介绍 ​编辑 二、W25Q64特性 1. SPI模式 2. 双输出SPI方式 三、状态寄存器 1. BUSY位 2. WEL位 3. BP2、BP1、 BP0位 4. TB位 5. 保留位 6. SRP位 四、常用操作指令 1. 写使能指令&#xff08;06h&#xff09; 2. 写禁…...

编程日记 2024/2/18 11:24:26

stm32：pwm output模块，记录一下我是用smt32，输出pwm波的记录--（实现--重要）

我是实现了输出pwm波，频率固定，占空比可以不断调整的方法，将PA0接到示波器上，可以看到是一个标准的PWM波，如图下面示波器图。 1，首先是ioc的配置 我刚开始设置的分频的倍数是7199，使得分频的太大了，示波器显示不了，最后修改为71就可以，我之前设置读取pwm也是一样的…...

编程日记 2024/2/18 11:21:23

phpstrom创建thinkphp项目

安装php和composer 参考 安装phpstrom 创建项目 查看thinkphp版本 https://packagist.org/packages/topthink/think 打开所在项目编辑配置 即可调试运行...

编程日记 2024/2/18 11:20:21

【Linux】线程同步

线程同步 一、条件变量1. 同步概念2. 条件变量概念3. 条件变量接口&#xff08;1&#xff09;pthread_cond_init()&#xff08;2&#xff09;pthread_cond_destroy()&#xff08;3&#xff09;pthread_cond_wait()&#xff08;4&#xff09;pthread_cond_signal()&#xff08;5…...

编程日记 2024/2/18 11:10:12

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/12/18 2:41:24

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/18 7:09:12

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/12/17 14:12:41

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/12/19 21:20:31

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/12/15 14:15:30

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/12/17 21:09:21

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/12/14 4:22:48