- 博客(19)
- 收藏
- 关注
原创 Shopify 主题开发:用 AJAX 实现博客分页无刷新加载效果
在Shopify博客模板中实现无刷新分页的方法。通过fetch请求获取新页面内容,使用DOMParser解析并局部更新文章列表和分页导航,同时利用history API支持浏览器前进/后退功能。关键步骤包括:阻止默认分页跳转、异步获取新内容、更新URL记录以及平滑滚动定位。这一原生JS方案无需复杂框架,适用于各类Shopify主题,能显著提升用户体验。
2025-08-04 16:38:52
126
原创 实现 GLB 模型多组贴图一键切换
本文介绍了使用Three.js实现GLB模型多组贴图切换的技术方案。通过构建3D场景、加载模型和贴图资源,开发者可以创建支持一键切换不同材质风格的Web3D应用。关键步骤包括:初始化Three.js场景、加载GLB模型、定义多组贴图路径、实现贴图切换逻辑和自动生成控制按钮。该方案采用模块化设计,包含模型居中处理、材质更新和响应式布局等功能,适用于产品展示、设计预览等需要动态更换材质效果的场景。
2025-07-16 15:43:10
347
原创 前端开发必备工具网站推荐(动画、渐变、阴影、边框等)
在日常前端开发中,设计与样式往往占据了大量时间。本文为大家整理了一些超实用的,涵盖动画、阴影、渐变、clip-path、网格布局等,能够极大提升开发效率与页面美感。
2025-07-10 09:16:02
796
原创 Three.js 玻璃展示墙与可调底板交互
本文详细解析了一个基于Three.js的3D玻璃展示墙交互实现。系统核心功能包括:可自定义尺寸的玻璃展示柜(宽度/深度/高度)、可选颜色或纹理的底板、直观的尺寸调整预览界面。关键技术实现包含物理正确的玻璃材质渲染(MeshPhysicalMaterial)、HDR环境贴图应用、实时尺寸调整交互设计。系统通过HTML/CSS构建UI界面,Three.js处理3D渲染,实现以下特性:1)真实玻璃光学效果(透射率1.5、环境反射);2)两种底板材质模式(纯色/纹理);3)响应式布局适配不同设备。代码结构清晰,
2025-06-17 14:54:27
288
原创 Three.js 中使用单张贴图替换模型材质
在Three.js中为3D模型应用纹理贴图的技术实现。通过使用MeshStandardMaterial实现PBR渲染,重点演示了如何正确处理带透明通道的贴图:设置RGBAFormat格式、开启transparent属性、保持depthWrite确保渲染顺序。同时说明了贴图UV映射的参数配置,包括重复模式(RepeatWrapping)和方向调整(repeat.set(1,-1)),特别针对glb模型可能需要翻转Y轴的情况。这些设置有效地解决了3D模型贴图的透明显示、材质属性和方向校正等问题。
2025-06-13 16:14:41
368
原创 通过 ScrollTrigger 来控制路径和背景图动画的触发与回退
实现了使用 GSAP 和 ScrollTrigger ,通过滚动触发 SVG 路径的绘制动画,并且在过程中同步对背景图进行缩放操作,提供流畅的滚动动画效果。具体的动画是通过修改 strokeDasharray 和 strokeDashoffset 来实现 SVG 路径的逐步绘制,同时控制背景图的缩放效果
2025-04-14 17:30:35
138
原创 基于 ScrollTrigger 的滚动触发式内容切换组件
实现 滚动触发的图片 + 文本联动效果,并支持 点击 tab 触发滚动。核心是使用 ScrollTrigger 计算滚动进度,并通过 clip-path 实现上下遮罩切换图片,同时展开对应文本内容。
2025-03-25 14:33:57
250
原创 滚动触发的视频和文本动画效果
利用滚动触发器 ScrollTrigger 来控制页面元素的动画和状态变化,通过动态调整CSS属性来实现缩放、透明度变化和平移动画
2024-06-18 14:58:21
137
原创 数字滚动效果
在当前模块到达指定的可视区域,则会进行数字滚动效果。如只需初始化的时候执行一遍,只需添加observer.unobserve(entry.target);即可
2024-06-18 14:26:41
211
原创 理解CSS选择器的计算顺序:从右到左
在Web开发中,CSS(层叠样式表)是关键的技术之一,用于为网页添加样式和布局。要有效地使用CSS,了解CSS选择器的计算顺序至关重要。接下来将深入探讨CSS选择器的计算顺序,解释为什么CSS选择器从右到左计算。
2023-09-26 17:34:02
276
1
原创 gsap实现滚动切换图片
创建一个滚动动画,随着用户滚动页面,它会根据滚动位置动态更改显示的图像。动画在指定的具有ID 'yourElementId'的元素进入视口时触发。GSAP用于控制动画,使图像在用户滚动时平滑过渡。
2023-09-21 13:48:19
1018
原创 css权重
这些位数的值会根据选择器的数量相应增加。如果有多个选择器,它们的权重值将通过相应位数的累加来计算。所以,如果有多个Id选择器,它们的权重值会增加到。权重值用于确定哪些样式规则应该应用到元素上,当多个规则具有相同的权重时,后面的规则会覆盖前面的规则,除非其中某个规则带有。具有最高的优先级,无法被其他权重值覆盖。这些权重值都是浏览器内核里面真实存在的。而权重值 是256进制,比如下面有四位。Class|属性|伪类 权重值:10。标签选择器|伪元素 权重值:1。行间样式 权重值:1000。Id 权重值:100。
2023-09-15 14:50:15
79
原创 浏览器的渲染流程
导致reflow的代码,把reflow的时间点延迟到结束后进行,但在此过程中,如果遇到了获取尺寸和位置的代码,浏览器会迫不得已立即reflow。将CSS写到页面开头,是为了让浏览器尽快读取并解析样式,避免给用户看到丑陋的页面,也是为了避免页面闪烁。浏览器一边reflow,一边进行生成对应的图形绘制到页面,绘制的过程称之为repaint。完成后,页面中的所有元素的位置和尺寸就确定下来了,即将被渲染到页面。绘制的过程是靠GPU完成的,速度非常快,因此,这个步骤会在页面之后的运行过程中不断的重复,
2023-09-10 11:56:20
84
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人