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

第6个-滚动动画

news 2026/5/19 15:42:26

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

D2DX：终极解决方案！让经典《暗黑破坏神2》在现代PC上焕发新生

D2DX&#xff1a;终极解决方案&#xff01;让经典《暗黑破坏神2》在现代PC上焕发新生 【免费下载链接】d2dx D2DX is a complete solution to make Diablo II run well on modern PCs, with high fps and better resolutions. 项目地址: https://gitcode.com/gh_mirrors/d2/d…...

编程新知 2026/5/19 15:32:28

STM32CubeMX配置FreeRTOS时，那个不起眼的定时器TIM16到底在干嘛？新手避坑指南

STM32CubeMX配置FreeRTOS时&#xff0c;那个不起眼的定时器TIM16到底在干嘛&#xff1f;新手避坑指南 第一次在STM32CubeMX里勾选FreeRTOS组件时&#xff0c;很多开发者会对配置页面底部那个"Hardware Timer"选项感到困惑——为什么默认选中了TIM16&#xff1f;这个看…...

编程新知 2026/5/19 15:26:23

为你的Hermes Agent项目配置Taotoken作为自定义模型提供商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为你的Hermes Agent项目配置Taotoken作为自定义模型提供商 应用场景类&#xff0c;假设你正在使用Hermes Agent框架并希望接入更多…...

编程新知 2026/5/19 15:09:53

理解“变异”的奥秘——集中趋势与变异性度量详解

如果说统计学是在“用数据讲故事”&#xff0c;那么集中趋势回答的是&#xff1a;“这个故事大概讲到了哪里&#xff1f;”而变异性回答的是&#xff1a;“这个故事有多分散、多不稳定、多不一样&#xff1f;”很多初学者学统计时&#xff0c;最先记住的是“平均数”“中位数”…...

编程新知 2026/5/19 14:56:56

深度扒一扒GEO（生成式引擎优化）的底层技术架构

Gartner预测2026年传统搜索流量将下降25%&#xff0c;而国内生成式AI用户已破5亿。 当你的潜在客户都在问豆包、Kimi或DeepSeek“哪个牌子好”时&#xff0c;你的官网排名第一还有用吗&#xff1f;没用。因为AI直接给了答案&#xff0c;用户根本没点进来。 这就是GEO&#xff…...

编程新知 2026/5/19 13:53:21

基于HPM5E00的EtherCAT从站开发板全流程实战：从硬件设计到软件配置

1. 项目概述&#xff1a;为什么我们要自己动手做一块EtherCAT开发板&#xff1f;如果你是一名从事工业自动化、运动控制或者机器人开发的工程师&#xff0c;最近几年一定没少听到EtherCAT的大名。它号称“以太网控制自动化技术”&#xff0c;本质上是一种基于标准以太网的实时工…...

编程新知 2026/5/19 12:05:58

Adobe-GenP 3.0终极指南：5分钟快速免费激活Adobe全系列软件

Adobe-GenP 3.0终极指南&#xff1a;5分钟快速免费激活Adobe全系列软件 【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP是一款革命性的Adobe Creative Cl…...

编程新知 2026/5/19 12:01:53

全面掌握AMD Ryzen硬件调试：SMUDebugTool完整使用指南

全面掌握AMD Ryzen硬件调试&#xff1a;SMUDebugTool完整使用指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gi…...

编程新知 2026/5/19 10:18:13

为什么很多商城系统，只适合“创业期”，却撑不起“增长期”？——真正成熟的系统，核心从来不是“今天能跑”，而是“业务增长后依然可控”

很多企业第一次做商城系统时&#xff0c;通常都会特别关注&#xff1a; 能不能快速上线功能够不够用页面能不能快速交付能不能尽快开始运营 因为在业务初期。 企业最重要的&#xff1a; 通常都是&#xff1a; 先把业务跑起来 所以很多系统前期的发展逻辑都很类似&#xff…...

编程新知 2026/5/19 9:10:29

CA-IS3741：四通道高速数字隔离芯片的选型、实测与光耦替代实战

1. 为什么需要高速数字隔离芯片&#xff1f; 在工业自动化、医疗设备、新能源等领域的电子系统中&#xff0c;不同模块之间经常需要进行电气隔离。传统的光耦器件&#xff08;如PC817、TLP521等&#xff09;虽然成本低廉&#xff0c;但在高速信号传输场景下暴露出明显短板。我曾…...

编程新知 2026/5/19 9:03:45