关于技术您现在的位置是:首页 > 关于技术

模拟360导航首页,文字与背景颜色互换滚动效果

头像 2019-01-21 18:38:53 163 人已围观 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~拜

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号