编程知识 cdmana.com

Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing

I'm participating in the Mid Autumn Festival Creative submission competition , Details please see : Mid Autumn Festival Creative submission contest

The Mid Autumn Festival is coming ,HR My little sister said we need to get a mid autumn animation on the official account of the expert , Give it to the factory 1w+ Employees are a little surprised by the atmosphere of the Mid Autumn Festival .

After a brainstorming session , Decided to get a family pattern and eat moon cakes , Enjoy the full moon , With warm blessings, print out word by word , The atmosphere is perfect .

Design the renderings , A simple paragraph JS Code to achieve the Mid Autumn Festival effect , Add a timer on the home page , Load this paragraph on the day of the Mid Autumn Festival JS, perfect !

image.png

(function(){
  
  // Printer effect 
  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);
  }
  //  Load out the picture 、 background 
  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();
  // Warm heart blessing 
  text([' It's the Mid Autumn Festival again ,', ' Family reunion, happy pottery ,', ' Bull HR I wish you a happy family !']);
  // 4 Seconds later, the animation disappears 
  // setTimeout(() => {
  // $('#midMoon').css('display', 'none');
  // }, 4000);
})()


 Copy code 

版权声明
本文为[AVA fish]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210909122358701q.html

Scroll to Top