我正在参加中秋创意投稿大赛,详情请看:中秋创意投稿大赛
中秋将至,HR小姐姐说要在我们开发的公众号上的小牛人平台上弄个中秋动画,给厂里面1w+员工一点点中秋的氛围惊喜。
头脑风暴一圈后,决定弄个一家图案吃着月饼,赏着圆月,伴随着暖暖的祝福一字字打印出来,氛围感完美。
设计好效果图,简单的一段JS代码实现中秋效果,再在主页加个定时器,中秋当天加载上这段JS,完美!
(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);
})()