自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(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

原创 GSAP ScrollTrigger 动画效果:Banner 滚动交互

标题在滚动时放大并淡出,紧接着图片逐渐显现,正文部分上移显示,背景色变化

2025-04-03 15:37:44 264

原创 基于 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实现九宫格

【代码】使用css实现九宫格。

2023-11-01 16:09:07 248 1

原创 GSAP实现滚动切换视频帧

通过滚动页面来控制视频的播放进度

2023-10-11 13:55:47 731 1

原创 理解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

原创 gsap实现滑动文字放大缩小效果

滑动滚动条时 当前元素的上一个元素底部到视口的中间位置的时候 当前元素根据滚动条滑动放大 相反方向则缩小

2023-09-01 17:17:10 628 1

原创 swiper的垂直轮播高度问题

【代码】swiper的垂直轮播高度问题。

2023-08-27 12:14:46 836 2

原创 使用swiper实现的类似环绕式的轮播/给图片添加倒影

【代码】使用swiper实现的类似环绕式的轮播/给图片添加倒影。

2023-08-18 18:01:34 638 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除