冰之雪博�?/title> <meta name="keywords" content="网站制作,博客,个人博客,个人网站,网站建设,网站模板" /> <meta name="description" content="如何建立个人网站制作_企业网站建设方案_独立个人博客模板源码程序下载哪个比较好_SEO排名技术建站cms系统制作企业网站个人网站价格_个人博客网站制作视频教学快速建�? /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/skin/css/base.css" rel="stylesheet"> <link href="/skin/css/m.css" rel="stylesheet"> <script src="/skin/js/jquery-1.8.3.min.js" ></script> <script src="/skin/js/comm.js"></script>  <script type="text/javascript" src="/skin/js/ajax.js"></script> <link href="/skin/css/shCoreDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/skin/js/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.all(); </script>  <script language="javascript" type="text/javascript" src="/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript"> </script> </head> <body>   <header id="header"> <div class="navbox"> <h2 id="mnavh"><span class="navicon"></span></h2> <div class="logo"><a href="/">冰之�?| <font class="font16">排名技术建站，让你对手追赶</font></a></div> <nav> <ul id="starlist"> <li><a href="/" title="首页">网站首页</a></li> <li class="menu"><a href="/a/gerenbokemoban/" target="_blank">热点资讯</a> <ul class="sub"> <li><a href="/a/gerenbokemoban/gerenwangzhanmoban/" target="_blank">时尚盛典</a></li> <li><a href="/a/gerenbokemoban/diguocmsmoban/" target="_blank">娱乐生活</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/gerenwangzhanmoban/" target="_blank">博客网站制作</a> <ul class="sub"> <li><a href="/a/gerenwangzhanmoban/xindebiji/" target="_blank">心得笔记</a></li> <li><a href="/a/gerenwangzhanmoban/CSS3_Html5/" target="_blank">CSS3|Html5</a></li> <li><a href="/a/gerenwangzhanmoban/wangzhanjianshejiaocheng/" target="_blank">网站建设教程</a></li> <li><a href="/a/gerenwangzhanmoban/tuijiangongju/" target="_blank">推荐工具</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <ul class="sub"> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanmoban/" target="_blank">企业网站模板</a></li> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/wangyeshejixinde/" target="_blank">网页设计心得</a> <ul class="sub"> <li><a href="/a/wangyeshejixinde/bokeriji/" target="_blank">博客日记</a></li> <li><a href="/a/wangyeshejixinde/chengxurensheng/" target="_blank">程序人生</a></li> </ul> <span></span></li> <li><a href="/a/youxiugerenboke/" target="_blank">时装搭配</a></li> <li><a href="/a/guanyuwo/" target="_blank">关于�?/a></li> </ul> </nav> <div class="searchico"></div> </div> </header>    <article>  <div class="lbox"> <div class="content_box whitebg"> <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href='http://www.bingzhixue.top/'>主页</a> > <a href='/a/gerenwangzhanmoban/'>博客网站制作</a> > <a href='/a/gerenwangzhanmoban/CSS3_Html5/'>CSS3|Html5</a> > > </span></h2> <h1 class="con_tilte">三步实现滚动条触动css动画效果</h1> <p class="bloginfo"><i class="avatar"><img src="/skin/img/avatar.jpg"></i><span>admin </span><span>2019-04-03</span><span>【网站建设教程�?/span><span><script src=""></script>人已围观</span></p> <p class="con_info"><b>简�?/b>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果， ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，�?..</p> <div class="con_text"> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> 现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，</p> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。只需要给元素增加 data-scroll-reveal 属性，当元素进入可视区域的时候会自动被触发设置好的动画。这里有一个我做的示例网站�?a href="http://www.lmjhome.com/" style="margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(51, 51, 51); word-break: break-all;" target="_blank"><span style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">演示</span></a></p> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <strong style="margin: 0px; padding: 0px;">1、引入文�?/strong></p> <div class="shili" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <p style="margin: 15px 0px; padding: 0px;"> <script src="js/scrollReveal.js"></script></p> </div> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <strong style="margin: 0px; padding: 0px;">2、html页面</strong></p> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> 必须给元素加�?data-scroll-reveal 属性，加上之后会执行默认的动画效果，你也可以自定义改属性以显示不同的动画效果，如：</p> <div class="shili" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <p style="margin: 15px 0px; padding: 0px;"> <div data-scroll-reveal="enter left and move 50px over 1.33s">杨青个人博客</div></p> <p style="margin: 15px 0px; padding: 0px;"> <div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div></p> <p style="margin: 15px 0px; padding: 0px;"> <div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">ScrollReveal</div></p> </div> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <strong style="margin: 0px; padding: 0px;">3、JavaScript</strong></p> <div class="shili" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <p style="margin: 15px 0px; padding: 0px;"> <script></p> <p style="margin: 15px 0px; padding: 0px;"> if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){</p> <p style="margin: 15px 0px; padding: 0px;"> (function(){</p> <p style="margin: 15px 0px; padding: 0px;"> window.scrollReveal = new scrollReveal({reset: true});</p> <p style="margin: 15px 0px; padding: 0px;"> })();</p> <p style="margin: 15px 0px; padding: 0px;"> };</p> <p style="margin: 15px 0px; padding: 0px;"> </script> </p> </div> <div class="shili" style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <p style="margin: 15px 0px; padding: 0px;"> data-scroll-reveal属�?/p> <p style="margin: 15px 0px; padding: 0px;"> 上面说了可以自定�?data-scroll-reveal 属性，下面来看看该属性的关键词和值（可选）�?/p> <p style="margin: 15px 0px; padding: 0px;"> enter</p> <p style="margin: 15px 0px; padding: 0px;"> 说明: 动画起始方向</p> v <p style="margin: 15px 0px; padding: 0px;"> �? top | right | bottom | left</p> <p style="margin: 15px 0px; padding: 0px;"> move</p> <p style="margin: 15px 0px; padding: 0px;"> 说明: 动画执行距离</p> <p style="margin: 15px 0px; padding: 0px;"> �? 数字，以 px 为单�?/p> <p style="margin: 15px 0px; padding: 0px;"> over</p> <p style="margin: 15px 0px; padding: 0px;"> 说明: 动画持续时间</p> <p style="margin: 15px 0px; padding: 0px;"> �? 数字，以秒为单位</p> <p style="margin: 15px 0px; padding: 0px;"> after/wait</p> <p style="margin: 15px 0px; padding: 0px;"> 说明: 动画延迟时间<</p> <p style="margin: 15px 0px; padding: 0px;"> �? 数字，以秒为单位</p> <p style="margin: 15px 0px; padding: 0px;"> 填充（可选）</p> <p style="margin: 15px 0px; padding: 0px;"> 可以�?data-scroll-reveal 属性里填充（添加）一些类似编程的“语句”，使其更有可读性，scrollReveal.js 支持以下“语句”�?/p> <p style="margin: 15px 0px; padding: 0px;"> from</p> <p style="margin: 15px 0px; padding: 0px;"> the</p> <p style="margin: 15px 0px; padding: 0px;"> and</p> <p style="margin: 15px 0px; padding: 0px;"> then</p> <p style="margin: 15px 0px; padding: 0px;"> but</p> <p style="margin: 15px 0px; padding: 0px;"> with</p> </div> <br /> <div class="share"><img src="/skin/img/wxgzh.jpg"> <p>扫描关注冰之雪微信公众号，第一时间获取网站模板更新动�?/p> <p>本文地址�?a href="/" target="_blank">http://www.bingzhixue98.com</a></p> </div> <p><span class="diggit"> <a href="" onclick="javascript:postDigg('good',28)"> 很赞哦！ </a>(1 <script language="javascript" type="text/javascript">getDigg(28);</script> )</span></p> <div class="nextinfo"> <p>上一篇：上一篇：<a href='/a/gerenwangzhanmoban/CSS3_Html5/12.html'>6条网页设计配色原�?让你秒变配色高手</a> </p> <p>下一篇：下一篇：<a href='/a/gerenwangzhanmoban/CSS3_Html5/29.html'>学习用css3画博客网站logo图标</a> </p> </div> </div> </div> <div class="ad whitebg"><a href='/'> <img src='/skin/img/8793672fca8dae2ce093aa46546f8e22.jpg'> </a></div> <div class="whitebg"> <h2 class="htitle">相关文章</h2> <ul class="otherlink"> </ul> </div>  </div>   <div class="whitebg paihang"> <h2 class="htitle">点击排行</h2> <ul> </ul> </div> <div class="whitebg tuijian"> <h2 class="htitle">本栏推荐</h2> <ul> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b68673aa2d35ee182119945eb2ef498.png'></a> </ul> </div> <div class="whitebg cloud"> <h2 class="htitle">标签�?/h2> <ul> <a href="/a/TAGsxinxi/wangzhanjianshe/" target="_blank">网站建设</a> <a href="/a/TAGsxinxi/qiyemenhuwangzhan/" target="_blank">企业门户网站</a> <a href="/a/TAGsxinxi/baojia/" target="_blank">报价</a> <a href="/a/TAGsxinxi/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a> <a href="/a/TAGsxinxi/jiage/" target="_blank">价格</a> <a href="/a/TAGsxinxi/gerenwangzhanjianshe/" target="_blank">个人网站建设</a> <a href="/a/TAGsxinxi/qiyewangzhanjianshejiage/" target="_blank">企业网站建设价格</a> <a href="/a/TAGsxinxi/qiyewangzhanpaiming/" target="_blank">企业网站排名</a> <a href="/a/TAGsxinxi/wangzhanzhizuojiage/" target="_blank">网站制作价格</a> <a href="/a/TAGsxinxi/wangzhanjiansheduoshaoqian/" target="_blank">网站建设多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjiansheqiyewangzhanjianshe/" target="_blank">企业网站建设企业网站建设价格</a> <a href="/a/TAGsxinxi/dingwei/" target="_blank">定位</a> <a href="/a/TAGsxinxi/duoshaoqian/" target="_blank">多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <a href="/a/TAGsxinxi/mobanjianzhan/" target="_blank">模板建站</a> <a href="/a/TAGsxinxi/SEOyouhua/" target="_blank">SEO优化</a> <a href="/a/TAGsxinxi/hunqing/" target="_blank">婚庆</a> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/12.html">6条网页设计配色原�?让你秒变�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/10.html">十条设计原则教你学会如何设计�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/28.html">三步实现滚动条触动css动画效果</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/9.html">别让这些闹心的套路，毁了你的�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/29.html">学习用css3画博客网站logo图标</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/8.html">网页中图片属性固定宽度，如何�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/11.html">用js+css3来写一个手机栏目导�?/a></li> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b643a3237daadb5f5e6d08964afe571.jpg'></a> </ul> </div>  </div> </article>  <footer> <div class="box"> <div class="wxbox"> <ul> <li><img src="/skin/img/wx.png"><span>微信公众�?/span></li> <li><img src="/skin/img/wx.png"><span>我的微信</span></li> </ul> </div> <div class="endnav"> <p><b>站点声明�?/b></p> <p>1、本站个人博客模板，均为冰之雪本人设计，个人可以使用，但是未经许可不得用于任何商业目的�?/p> <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="/" target="_blank">396585662@qq.com</a></p> <a href=http://www.dedecms.com target='_blank'>Power by DedeCms</a> <p>Copyright © <a href="/" target="_blank">www.bingzhixue.top</a> All Rights Reserved. 备案号：<a href="http://beian.miit.gov.cn/" target="_blank">ICP备案号：湘ICP�?9011697号�?</a> <a href="/" target="_blank">网络营销推广</a></p> </div> </div> <a href="#"> <div class="top"></div> </a> </footer> <!--左浮�?-> <div class="kf"> <h2><span id="closed"></span>客服在线</h2> <ul> <li><a href="tencent://Message/?Uin=396585662&websiteName=q-zone.qq.com&Menu=yes" target="_blank" class="qqservice_list_link">QQ客服</a></li> </ul> <ul class="kfdh"> <p class="kftext">客服微信扫码</p> <p class="kfnum"><img src="/skin/img/wx.png"></p> </ul> <p class="kftext">服务时间</p> <p class="kftime">周一至周�?9:00-21:00</p> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f655f558c510211e38805f6b586e6b15"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </body> </html>