黑客内参小讲堂三步实现滚动条触动css动画效果

现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，

ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scroll-reveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。这里有一个我做的示例网站。演示

1、引入文件

2、html页面

必须给元素加上 data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：

<div data-scroll-reveal="enter left and move 50px over 1.33s">黑客内参的博客园</div>

<div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div>

<div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">ScrollReveal</div>

3、JavaScript

if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){

(function(){

window.scrollReveal = new scrollReveal({reset: true});

})();

};

</script>

data-scroll-reveal属性

上面说了可以自定义 data-scroll-reveal 属性，下面来看看该属性的关键词和值（可选）。

enter

说明: 动画起始方向

值: top | right | bottom | left

move

说明: 动画执行距离

值: 数字，以 px 为单位

over

说明: 动画持续时间

值: 数字，以秒为单位

after/wait

说明: 动画延迟时间<

值: 数字，以秒为单位

填充（可选）

可以在 data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”：

from

the

and

then

but

with

转载于:https://www.cnblogs.com/heikneican/p/7909267.html

黑客内参小讲堂三步实现滚动条触动css动画效果相关推荐

QQ浏览器推小程序微信小程序三步完成接入
2019独角兽企业重金招聘Python工程师标准>>> 腾讯科技2018-12-05 11:29:14 摘要用户可以收藏关注常用小程序以便随时访问且避免了跳转繁琐,让QQ浏览器小程 ...
黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
微信小程序-实现元素渐入渐出动画效果-封装方法
开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只 ...
Win11玩安卓很麻烦？360手助这个小工具三步就能轻松上手
微软Windows11面世以来虽然争议颇多,但亮点也多多,例如UI更加友好易用,对硬件性能优化更好,还通过Windows Subsystem for Android(简称WSA)子系统提供了对安卓应用 ...
自带flash的浏览器_小技巧:三步还你一个干净清爽无广告的360浏览器
作为六年的老司机,说实话360旗下的浏览器(PC版)还是比较好用的.但是随着360浏览器装机量的膨胀,各种广告植入.推广.弹窗,这对于喜欢干净清爽简洁风格的用户来说很是不爽~ 是时候找个时间来给自己的 ...
php三步运算法,小技巧----“三步翻转法”
例:实现字符串左移函数,比如"abcdefghi"循环左移3位就是"defghiabc". #include #include #include #includ ...
小程序弹窗并移动放大图片的动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图触发条件 <block wx:if='{{bg_hui_show}}'> <view ...
HTML5+CSS3小实例：流星划过天际的动画效果
实例:流星划过天际的动画效果技术栈:HTML.CSS 图片素材: 效果: 源码: <!DOCTYPE html> <html><head><meta htt ...
做好这三步，你的小程序离“爆款”就不远了
随着"猜画小歌""腾讯小经费"等爆款小程序在朋友圈掀起又一波高潮,我尝试根据已研究过的数百个小程序,总结一份小程序三步自检清单,通过这份自检清单,希望你重新审视 ...

黑客内参小讲堂三步实现滚动条触动css动画效果

黑客内参小讲堂三步实现滚动条触动css动画效果相关推荐

最新文章

热门文章