介绍
scrollme.js 是一个基于 jQuery 的 npm 包,用于控制网站滚动效果。它可以让你很方便地添加淡入淡出、平移、旋转、缩放等效果,同时又不需要编写繁琐的代码。它适用于所有现代浏览器,并且使用简介、易用。
安装
你可以在 npm 中直接安装 scrollme.js:
--- ------- --------
然后在 HTML 中引入相关的文件:
----- ---------------- ---------------------------- ------- ------------------------------------- ------- ---------------------------------------
使用方法
HTML
首先,你需要添加 data-scrollme
属性到你想使用效果的要素上,该属性的值包含各种效果,以及它们的速度和运动方式。例如:
---- -------------------- -- ---- ----- ---------- -- --------- ----- -------- ---- ----------- ----- ------- ---------------- ------ ----------- - ---- ------
上面的代码表示,当网页滚动到这个 DIV 时,它会以动画的形式向上(即 y
轴上)移动 100 个像素,同时执行 360 度的旋转、0.5 的缩小以及 1 秒的动画时间,并且使用一个缓动函数 easeOutCirc
。
CSS
为了实现更好的效果,我们还需要通过 CSS 让元素初始状态(不滚动时)的位置与滚动效果一致。例如,上面提到的 DIV 的 CSS 可以这样写:
------------------ - --------- --------- -- -- - -- ----- -- -- -- ---- -- ---- ------- -- -------- - -- -------- -- -- ------- ---- -- ---------- ------------- -- ------ --- -- ---------- --------- ----------- --------- -- --------- ------- -- --------- -
JavaScript
最后,在 JavaScript 中添加以下代码即可实现滚动效果:
---------------------- ---------- - ------------------------------------ - --- ----- - -------- --- -------- - ---------------------------------------- --- --- - -------------------- - ---------------------- --- ----- - -------------------- --- --- - ------------------- ------ - ----- -- --- - ---- - --- -- - ---- - ------ - ---- - ------ - ------------------- ------- --- -- --------- - --- ----- - -------------- ------------------------------------------------- ----- - ----- - -- - ---- --------------------------------------- ----- - ----- - -- - ------------------- ----------------------- ----- - ----- - -- - ------ - -- - ----------- - ------------------- ---- -------------- ------- - - --- ---------------------
这段代码在页面滚动时,对每个带有 data-scrollme
属性的元素进行计算,并根据对应的数值,使用 CSS3 的 transition
属性使效果平滑地出现。
例子
我们可以通过下面的例子实现:
--------- ----- ------ ------ ----- ---------------- -------------------------- ----- ---------------- -------------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------------------------------- ----- ---------------- -------------------------------------------------------- ------- ---- - ------------ ------- ----------- ----------------- -------- ---------- ----- - ------- - ------- ------ ----------------- ----------------------------------------------- ---------------- ------ -------------------- ------ ------- --------- --------- - ------------- - ---------- ---- ----------- ------- ----------- ---- ------ ----- ------------ --- --- - ----- - ---------------- - ---------- ---- ----------- ------- ----------- ----- ------ ----- - ------- - -------- ------------- -------- ---- ----- ---------- ----- ------------ ---- ------------ ---- ----------- ------- ------------ ------- --------------- ------- ------- -------- ----------------- -------- ----------------- ----- ------ ----- ------- --- ----- -------- -------------- ---- -------- -- ----------- ------- --- ----- - ------------- - ----------------- -------- ------------- -------- - --------------- ------------- - -------- ----- - -------- - -------- ----- -- --------- --------- --------- ------- - -------------- - ---------- ---- ------ ----- ----------- ------- -------------- ----- - -------- -------- - ------ ----- ---------- ------ ------- - ----- ----------- ------- - ----------- - -------------- ---- ---------- ----- ------- ---- ----- - ----- - ----------------- ----- ----------- ------- -------- ---- -- - ----- ------- - -------- ------------- ------ ------ ------- ----- - ----- ------- -- - -------------- -- - ----- ------- - - ----------- ----- ---------- ----- ------ ----- - -------- - ----------------- -------- ----------- ------- ------ ----- -------- ----- -- - ------------- - -------- ------------- -------- ----- ----------------- --------------------- -------------- ---- - ------------- ------------- - -------------- ----- ------- ----- -------------- ----- -------- ---- ----- - --------------------- - ------- ------ - ----------------- ------ - ------------- - ---------- ---- ----------- ---- - ---------------- - ---------- ------ - ----- - -------- ---- -- - ----- ------- - ------ ----- ------- ---- -- - -------- - -------- ---- -- - ------------- - -------- ----- - - -------- ------- ------ ------- -------------- ------------------------------------------------------ --- -------------------- ------------------------------------------------------------------- --- ----------------------- --------------------------------------------------------------------- -- -------- ------------- --------- ------------------------------------------------- -------- --------- -------- --------------- -------------------------------------------- --- --------------------- ------------------------------------------------------------------- ---- --------------- -------------------------------------------- ---- -------------------------------------------- ------------ ------ ------------------ ---------------------------------------------------------- -- -------------------------------------------- ----- ----- ----- --- ----- ----------- ---------- ----- ---- --- ---- ----- ----- --------- ----- ---- ------- -------- ----- -- --------- ------ -------- --------- ----- ----- -- -------- -- --- -- -------- ------ ----- ----- -------- ------ --------- --- -------- ---------- ----- ---- --------- -------- ---- ---- ------- ----- ---- ------ ---------- -------- ------------ -------------------------------------------- --- --------------------- --------------------------------------------- --------- ----------- ----- ---- --------------- -------------------------------------------- ---- -------------- ------------------------------------------ ---- -------------------------------------------- --------- ------ ------ ------------------- ---------- ------ -------- ----- ----- --- ----- ----------- ---------- --------- ------ ---- -------------- ------------------------------------------ ---- -------------------------------------------- --------- ------ ------ ------------------- ---------- ------ -------- ----- ----- --- ----- ----------- ---------- --------- ------ ---- -------------- ------------------------------------------ ---- -------------------------------------------- --------- ------ ------ ------------------- ---------- ------ -------- ----- ----- --- ----- ----------- ---------- --------- ------ ---- -------------- ------------------------------------------ ---- -------------------------------------------- --------- ------ ------ ------------------- ---------- ------ -------- ----- ----- --- ----- ----------- ---------- --------- ------ ------ ---------- -------- --------------- -------------------------------------------- --- --------------------- --------------------------------------------- ------------- --------- ----- ----- -------------------- ------------------------------------------ ------ ----------- -------------------- ------------------ --------- ------ ------------ -------------------- ------------------- --------- --------- -------------------- --------------------- -------------------- ------- ------------- --------- ------------------ ---------------- ------- ---------- ------- -------------------------------------------------------------------------------- ------- --------------------------------------------------------------- -------- ---------------------------- - --- -------- - --- ----------- --- --------- ------- -------
结论
scrollme.js 是一个非常方便易用的 npm 包,它可以让您轻松实现网站的滚动效果。通过在 HTML 属性中设置效果以及在 CSS 中设置初始位置和样式,再结合 JavaScript 在滚动时计算元素位置和应用效果,你可以快速构建出富有动态感和视觉冲击力的网站。只需要少量的学习和代码,就可以展示出称霸全网的效果。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562de81e8991b448e057e