关于技术您现在的位置是:首页 > 关于技术
模拟360导航首页,文字与背景颜色互换滚动效果
2019-01-21 18:38:53 【jQuery】 290 人已围观 0 条评论
简介
360导航的首页,经常会有一个方形的文字滚动动画,大致就是红色方框移动到红色的文字上方时,文字颜色变为白色。 […]
360导航的首页,经常会有一个方形的文字滚动动画,大致就是红色方框移动到红色的文字上方时,文字颜色变为白色。
效果看起来像是一个红色方框在移动,其实,是文字与背景色的变换,让我们产生的错觉。实际上是白底红字在不断的变换成红底白字,而产生的效果。
直接进入正题,先上效果图(gif图与页面真实效果有差异):
如上方效果,我们今天就用jquery来简单的实现它。
首先,我们先将结构搭好,整个结构是由两层相同的文字,通过定位叠加在一起的。说不太清楚,看代码吧。
<div class="content"> <div class="box"> <div class="font r_w_font r_w_font1">旋</div> <div class="font r_w_font r_w_font2">转</div> <div class="font w_r_font w_r_font3">动</div> <div class="font w_r_font w_r_font4">画</div> <div class="font w_r_font w_r_font1">旋</div> <div class="font w_r_font w_r_font2">转</div> <div class="font r_w_font r_w_font3">动</div> <div class="font r_w_font r_w_font4">画</div> </div> </div>
有了结构以后,就该设计其样式,主要样式是,分别给每一个字相应的文字颜色和背景色。具体样式可以对照以下CSS代码。
*{ margin: 0; padding: 0; font-size: 14px; line-height: 1; } .content{ width: 28px; height: 28px; border: 1px solid #ccc; margin: 50px auto; } .box{ width: 100%; height: 100%; position: relative; cursor: pointer; } .font{ width: 14px; height: 14px; position: absolute; overflow: hidden; } .r_w_font{ color: #fff; background-color: #ff0000; } .w_r_font{ color: #ff0000; background-color: #fff; } .r_w_font1{ left: 0; top: 0; } .r_w_font2{ left: 50%; top: 0; } .w_r_font3{ left: 0; top: 50%; } .w_r_font4{ left: 50%; top: 50%; } .w_r_font1{ left: 0; top: 0; width: 0; } .w_r_font2{ left: 50%; top: 0; } .r_w_font3{ left: 0; top: 50%; width: 0px; } .r_w_font4{ left: 50%; top: 50%; height: 0px; }
结构和样式搭建好以后,想要让动画效果出来,今天就用到了我们强大的jQuery库了。
先引入jq文件,然后来编写我们自己的逻辑代码,核心使用到jq的animate方法,具体还是看下图代码吧。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ move(); }) function move(){ $('.w_r_font1').animate({ width:'14px' },1000,'linear'); $('.w_r_font2').animate({ width: '0px', textIndent: '-14px', left: '28px' },1000,'linear',function(){ $('.w_r_font2').css({ width: '14px', height: '0px', textIndent: '0px', left: '14px' }); $('.w_r_font2').animate({ height: '14px' },1000,'linear',function(){ $('.w_r_font2').css({ width: '', height: '', textIndent: '', left: '' }) }); $('.r_w_font4').animate({ height: '14px' },1000,'linear',function(){ $('.r_w_font3').css({ width: '0', textIndent: '-14px', left: '14px' }); $('.r_w_font4').animate({ width: '0px' },1000,'linear',function(){ $('.r_w_font4').css({ width: '', height: '' }) }); $('.r_w_font3').animate({ width: '14px', textIndent: '0px', left: '0px' },1000,'linear',function(){ $('.r_w_font3').animate({ height: '0px' },1000,'linear',function(){ $('.r_w_font3').css({ width: '', height: '', textIndent: '', left: '' }) }); $('.w_r_font1').animate({ height: '0px' },1000,'linear',function(){ $('.w_r_font1').css({ width: '', height: '' }); move(); }) }) }) }) }; </script>
以上,就实现了360导航上的这个效果,猛戳这里。当然,相信大家有更简单更有效的方法去实现它。我们,加油!
Over~拜
上一篇: 纯CSS实现广告位3D滚动效果
下一篇: SVG简单实现融滞效果
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注