独特的视觉滚屏库:skrollr.js 无jQuery纯js

JavaScript/前端
467
0
0
2022-07-06

继之前我的一篇全屏滚动库fullPage.js,今天我们再来一发有点相似,却很特别的视觉效果滚屏库:skrollr.js。

那么什么是skrollr呢?

它是一个支持移动端(Android,IOS)和PC端,通过视觉角度差(纯CSS和HTML)来达到炫酷滚屏效果的js库,他不依赖jQuery,是原生js书写的库哟。

那么skrollr的兼容情况如何?

首先是支持IE9以上浏览器的(IE9以下的有兼容包skrollr-ie),其他现代浏览器都是支持的(Chrome,Firefox、Safari、UC)。 移动端webkit内核的都是支持的。

那么如何使用它呢?

独特的视觉滚屏库:skrollr.js 无jQuery纯js

通过上图,我们从引入skrollr.min.js到创建HTML动画配置,就可以完成一个简单的滚屏视觉效果了。

那么一个完整的skrollr效果是什么样子?

独特的视觉滚屏库:skrollr.js 无jQuery纯js

通过LICEcap来录屏为GIF图

上图有点大(1M),建议WiFi下预览哟。通过上图,看着是不是挺有感觉的,对了,除了可以使用CSS3动画的,还可以SVG等,尽可能的让你发挥自己的创造力。

那么我们如何获取它呢?

同样的,你可以到github上搜索skrollr,详细的配置说明都有的。

亲们可以收藏一下,以便今后工作中可以用到。

独特的视觉滚屏库:skrollr.js 无jQuery纯js

图片来自网络,版权归原作者所有