美食降落吃到饱的JS特效【原创】

查看演示 下载资源 下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，并引入一个JS插件，代码如下：

<style type="text/css">
html {
  background-color:#fff;
  color:#32353a;
  font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  line-height:1.5;
}

body {
  margin:0;
}

h1 {
  font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size:2.2em;
  font-weight: 500;
}

.counter {
  margin-bottom:1rem;
  border-bottom:.1875em dashed #d2d6dd;
}

.tagline {
  font-size:1.125em;
  margin:2rem 1.5rem;
}

.calories {
  color:#8b919b;
  font-size:.875em;
}

.splash {
  position: relative;
  height:100vh;
  max-width:30em;
  text-align:center;
}

.splash {
  box-sizing:border-box;
  max-width:30em;
  margin:0 auto;
  padding:1.5em;
}

.counter {
  position:relative;
  padding-top:30vh;
  padding-bottom:1vh;
}

.counter h1 {
  position:relative;
  text-align:center;
  margin:0;
  line-height: .625;
  z-index:2;
  transform-origin: bottom center;
}

.dish {
  color:#e89c2b;
  position:absolute;
  width:1em;
  height:1em;
  margin-top:-.75em;
  margin-left:-.5em;
  font-size:2rem;
  top:0;
  transform:translateY(-3em);
  transition-duration:.75s;
  transition-timing-function:ease-in;
  transition-property:transform;
  z-index:1;
}

.dish.drop {
  transform:translateY(30vh);
}

.nommer {
  position:absolute;
  bottom:2em;
  margin-left:-1em;
  color:rgba(0,0,0,.5);
  font-size:1.5rem;
  transform-origin:bottom center;
}
</style>
<script type="text/javascript" src="js/fitty.min.js"></script>

页面的body部分，设置好页面初始化时的显示文字即可，代码如下：

<div class="splash">
  <div class="counter">
    <div><h1>饿了吗？开饭！</h1></div>
  </div>
  <p class="tagline">自由增删美食和随机评价</p>
  <p class="calories">轻量级，超简易</p>
</div>

页面的底部，通过javascript来设置图标掉落、字体变大等事件的响应，代码如下：

<script type="text/javascript">
//美食雨
(function(){
  var counter = document.querySelector('.counter');
  var diner = document.querySelector('h1');
  var menu = ['🍟', '🍎', '🍕', '🍗', '🍇', '🍔'];
  var noms = ['好香', '好吃', '美味', '我喜欢', '真好吃', '太香了'];
  var finished = 0;

  //用餐完毕动画
  function jelly(e) {
    diner.removeEventListener('fit', jelly);
    diner.animate(
      [
        { transform: 'scale(' + 1 / e.detail.scaleFactor + ')' },
        { transform: 'scale(1.1)' },
        { transform: 'scale(.9)' },
        { transform: 'scale(1.05)' },
        { transform: 'scale(.98)' },
        { transform: 'scale(1)' }
      ],
      {
        duration:500
      }
    );
  }

  //美食的评价
  function nom(index) {

    var nommer = document.getElementById('nommer-' + index);
    var rotation = -20 + (Math.random() * 40);
    var scale = .75 + (Math.random() * .5);

    nommer.animate(
      [
        { opacity:0, transform: 'scale(' + .25 * scale + ') rotateZ(' + rotation + 'deg) translateY(0) ' },
        { opacity:1, transform: 'scale(' + scale + ') rotateZ(' + rotation + 'deg) translateY(-.5em) ' }
      ],
      {
        duration:250
      }
    );

    diner.animate(
      [
        { transform: 'scaleY(1)' },
        { transform: 'scaleY(' + (.7 + (Math.random() * .2)) + ')' },
        { transform: 'scaleY(1)' }
      ],
      {
        duration:100
      }
    );
  }

  //判断是否支持动画
  if ('animate' in diner) {
    diner.addEventListener('fit', jelly);
  }

  //生成多种美食
  var dishes = menu
  .concat(menu) // 复制不同
  .sort(function() { return .5 - Math.random(); })
  .concat(['🍲']) // 无图标时自动补充一个
  .map(function(menuItem, i) {
    var offset = 33.33 + (Math.random() * 33.33);
    var dish = document.createElement('div');
    dish.textContent = menuItem;
    dish.setAttribute('aria-hidden', 'true');
    dish.setAttribute('data-nommer', i);
    dish.className = 'dish';
    dish.style.cssText = 'left:' + offset + '%; transition-delay: ' + ((i * 200) + Math.random() * 100) + 'ms';
    var nommer = document.createElement('div');
    nommer.id = 'nommer-' + i;
    nommer.textContent = noms[Math.floor(Math.random() * noms.length)];
    nommer.setAttribute('aria-hidden', 'true');
    nommer.className = 'nommer';
    nommer.style.cssText = 'left:' + offset + '%; opacity:0;';
    counter.appendChild(dish);
    counter.appendChild(nommer);
    return dish;
  });

  //食物全部掉落完成
  setTimeout(function() {
    requestAnimationFrame(function() {
      dishes.forEach(function (dish) {
        dish.classList.add('drop');
        dish.addEventListener('transitionend', burb);
      })
    });
  }, 500);

  //判断是否吃饱
  function burb(e) {
    e.target.removeEventListener('transitionend', burb);
    e.target.style.opacity = 0;

    finished++;
    if (finished === dishes.length) {
      full();
    } else if ('animate' in diner) {
      nom(e.target.getAttribute('data-nommer'));
    }
  }

  //吃饱了
  function full() {
    diner.innerHTML = "吃饱了，点赞！";
    fitty(diner, {
      minSize:30
    });
  }
}());
</script>