- 博客(14)
- 收藏
- 关注
RSS订阅原创 通过 ScrollTrigger 来控制路径和背景图动画的触发与回退
实现了使用 GSAP 和 ScrollTrigger ，通过滚动触发 SVG 路径的绘制动画，并且在过程中同步对背景图进行缩放操作，提供流畅的滚动动画效果。具体的动画是通过修改 strokeDasharray 和 strokeDashoffset 来实现 SVG 路径的逐步绘制，同时控制背景图的缩放效果
2025-04-14 17:30:35
121
原创 基于 ScrollTrigger 的滚动触发式内容切换组件
实现 滚动触发的图片 + 文本联动效果，并支持 点击 tab 触发滚动。核心是使用 ScrollTrigger 计算滚动进度，并通过 clip-path 实现上下遮罩切换图片，同时展开对应文本内容。
2025-03-25 14:33:57
217
原创 滚动触发的视频和文本动画效果
利用滚动触发器 ScrollTrigger 来控制页面元素的动画和状态变化，通过动态调整CSS属性来实现缩放、透明度变化和平移动画
2024-06-18 14:58:21
128
原创 数字滚动效果
在当前模块到达指定的可视区域，则会进行数字滚动效果。如只需初始化的时候执行一遍，只需添加observer.unobserve(entry.target);即可
2024-06-18 14:26:41
198
原创 理解CSS选择器的计算顺序：从右到左
在Web开发中，CSS（层叠样式表）是关键的技术之一，用于为网页添加样式和布局。要有效地使用CSS，了解CSS选择器的计算顺序至关重要。接下来将深入探讨CSS选择器的计算顺序，解释为什么CSS选择器从右到左计算。
2023-09-26 17:34:02
269
1
原创 gsap实现滚动切换图片
创建一个滚动动画，随着用户滚动页面，它会根据滚动位置动态更改显示的图像。动画在指定的具有ID 'yourElementId'的元素进入视口时触发。GSAP用于控制动画，使图像在用户滚动时平滑过渡。
2023-09-21 13:48:19
929
原创 css权重
这些位数的值会根据选择器的数量相应增加。如果有多个选择器，它们的权重值将通过相应位数的累加来计算。所以，如果有多个Id选择器，它们的权重值会增加到。权重值用于确定哪些样式规则应该应用到元素上，当多个规则具有相同的权重时，后面的规则会覆盖前面的规则，除非其中某个规则带有。具有最高的优先级，无法被其他权重值覆盖。这些权重值都是浏览器内核里面真实存在的。而权重值 是256进制，比如下面有四位。Class|属性|伪类 权重值：10。标签选择器|伪元素 权重值：1。行间样式 权重值：1000。Id 权重值：100。
2023-09-15 14:50:15
72
原创 浏览器的渲染流程
导致reflow的代码，把reflow的时间点延迟到结束后进行，但在此过程中，如果遇到了获取尺寸和位置的代码，浏览器会迫不得已立即reflow。将CSS写到页面开头，是为了让浏览器尽快读取并解析样式，避免给用户看到丑陋的页面，也是为了避免页面闪烁。浏览器一边reflow，一边进行生成对应的图形绘制到页面，绘制的过程称之为repaint。完成后，页面中的所有元素的位置和尺寸就确定下来了，即将被渲染到页面。绘制的过程是靠GPU完成的，速度非常快，因此，这个步骤会在页面之后的运行过程中不断的重复，
2023-09-10 11:56:20
81
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人