简单代码实现一个,1w+人看到的中秋祝福

2,165 阅读1分钟

我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛

中秋将至,HR小姐姐说要在我们开发的公众号上的小牛人平台上弄个中秋动画,给厂里面1w+员工一点点中秋的氛围惊喜。

头脑风暴一圈后,决定弄个一家图案吃着月饼,赏着圆月,伴随着暖暖的祝福一字字打印出来,氛围感完美。

设计好效果图,简单的一段JS代码实现中秋效果,再在主页加个定时器,中秋当天加载上这段JS,完美!

image.png

(function(){
  
  //打印机效果
  function text(list, key) {
    var arr = [];
    for (var i = 0; i < list.length; i++) {
      var nowArr = list[i].split('');
      arr = arr.concat(nowArr);
      arr.push('<br/>');
    }
    $('#midMoon .text').append('<p></p>');
    var index = 0;
    var obj = setInterval(function() {
      if (index < arr.length) {
        $('#midMoon .text p').html($('#midMoon .text p').html() + arr[index]);
      }
      index++;
    }, 100);
  }
  // 加载出图片、背景
  function createPop() {
      var html =
      '<div id="midMoon" class="animated fadeIn" style="background:#28318a;height: 100%;width: 100%;position: fixed;top: 0;background-image: url(\'file:///D:/work/hr/festival/mid-autumn/family.png\'); background-size: 85%;background-repeat: no-repeat;background-position:center bottom;"><img src="file:///D:/work/hr/festival/mid-autumn/moon.png" style="width:100%;" class="animated slideInDown"><div class="text" style="text-align: center;margin-top:-50px;font-size:21px;color:#fff;font-family:KaiTi,PingFang SC,San Francisco;"></div></div>';
      $('#app').append(html);
  }
  createPop();
  //暖心祝福
  text(['又是一年中秋到,', '合家团聚乐陶陶,', '公牛HR祝您阖家欢乐!']);
  // 4秒后动画消失
  // setTimeout(() => {
  // 	$('#midMoon').css('display', 'none');
  // }, 4000);
})()