浏览器向下滚动时,页面的CSS3 transform、animation就被触发了。
想要达到这种效果,有很多 jQuery 插件可以用,这里将展示不使用插件做到这种效果。



* HTML <https://blog.csdn.net/qq_42865147/article/details/82663911#html>
* Javascript 和 CSS animation
<https://blog.csdn.net/qq_42865147/article/details/82663911#javascript-和-css-animation>
* 扩展阅读:Modernizr.js
<https://blog.csdn.net/qq_42865147/article/details/82663911#扩展阅读modernizrjs>





HTML
<head> <script src=
"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"" type="text/
javascript"></script> <script src=
"https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script> <link
rel="stylesheet" type="text/css" href="animate.min.css"> </head> <body> <div
data-animation="flipInX" data-timeout="400" class="revealOnScroll"> ...some
content here...
* .revealOnScroll 必须加在滚动时需要触发动效的元素上面。
* data-animation 声明了使用animation的名字, 仅限 animation.css 支持的动效
* timeout 定义了在滚动条件满足时,延时多少时间触发动画



Javascript 和 CSS animation
<script> $(function() { var $window = $(window), win_height_padded =
$window.height() *1.1, isTouch = Modernizr.touch; //如果是移动设备,直接加上动画预置类 if
(isTouch) { $('.revealOnScroll').addClass('animated'); } //监听滚动事件,触发函数
$window.on('scroll', revealOnScroll); //revealOnScroll
函数检查元素是否需要执行动画,是,animation类就会添加并触发 function revealOnScroll() { var scrolled =
$window.scrollTop(), win_height_padded = $window.height() *1.1; //Showed... $(
".revealOnScroll:not(.animated)").each(function () { var $this = $(this),
offsetTop = $this.offset().top; if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) { window.setTimeout(function(){ $this.addClass(
'animated ' + $this.data('animation')); }, parseInt($this.data('timeout'),10));
}else { $this.addClass('animated ' + $this.data('animation')); } } });
//Hidden... $(".revealOnScroll.animated").each(function (index) { var $this = $(
this), offsetTop = $this.offset().top; if (scrolled + win_height_padded <
offsetTop) { $(this).removeClass('animated fadeInUp flipInX lightSpeedIn') }
}); } revealOnScroll(); });
当元素不可见的时候,animation类被移掉,这样在一次请求里面多次animate动画。

原文地址:http://www.w3cplus.com/css3/trigger-css-animation-scroll.html
<http://www.w3cplus.com/css3/trigger-css-animation-scroll.html>




扩展阅读:Modernizr.js

modernizer.js 判断浏览器是否支持html5和css3的新特性
官方站点:http://modernizr.com <http://modernizr.com>
<script src="Scripts/Modernizr.js" type="text/javascript"></script>
添加完 Modernizr 引用以后,立即生效。
它会在html元素上添加一批CSS的class名称,这些class名称标记当前浏览器支持哪些特性和不支持哪些特性。

* 支持的特性,直接显示该特性的名称作为一个class(例如:canvas, websockets),
* 不支持的特性,显示的class是“no-特性名称”(例如:no-flexbox)。
下面这段代码是运行在Chrome下的效果:
<html class=" js flexbox canvas canvastext webgl no-touch geolocation
postmessage websqldatabase indexeddb hashchange history draganddrop websockets
        rgba hsla multiplebgs backgroundsize borderimage borderradius
        boxshadow textshadow opacity cssanimations csscolumns cssgradients
        cssreflections csstransforms csstransforms3d csstransitions fontface
        generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">
下面这段代码是运行在IE9下的效果:
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
        draganddrop no-websockets rgba hsla multiplebgs backgroundsize
        no-borderimage borderradius boxshadow no-textshadow opacity
        no-cssanimations no-csscolumns no-cssgradients no-cssreflections
        csstransforms no-csstransforms3d no-csstransitions fontface
        generatedcontent video audio localstorage sessionstorage
        no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
原文地址:https://segmentfault.com/a/1190000003820989
<https://segmentfault.com/a/1190000003820989>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信