如何利用css实现视差滚动和抖动效果-kb88凯时官网登录

时间:2024-10-14
阅读:
免费资源网,https://freexyz.cn/

背景: 前端的设计效果,越来越炫酷,而这些炫酷的效果,利用css3的动画效果和js就可以实现,简单的代码就能实现非常炫酷的效果。
原理: 利用 js监控scrolltop的位置,通过 top定位图片的位置,实现视差的滚动;当滚动到目标位置时,通过css3的animation属性,实现抖动效果。

一、预览效果

如何利用css实现视差滚动和抖动效果

相关素材照片:

如何利用css实现视差滚动和抖动效果

如何利用css实现视差滚动和抖动效果

二、相关代码

style部分:

html部分:

js部分:

免费资源网,https://freexyz.cn/
返回顶部
顶部
网站地图