javascript - 联合国儿童基金会网络动画

Question

有人能告诉我关于这个联合国儿童基金会网站的门动画和缩放页面转换的任何信息吗，我想尝试制作这个很酷的动画。至少给我“关键字”如何找到它。那些是用 html5 制作的吗？

Answer 1

在联合国儿童基金会动画中，开发人员使用了一种使用GSAP JS 库和 CSS 转换的 JavaScript 混合方法。

您可以使用 Chrome 开发人员工具查看 bundle.js和screen.css文件中的代码。

一般可以使用：

• CSS 关键帧动画
• CSS 过渡
• JavaScript vanilla 或一些库
• 网页动画 API

为 HTML 页面中的 DOM 元素设置动画。

为了帮助您入门，我使用 CSS 关键帧动画创建了一个简单的缩放/缩放效果，但是您可以使用 jQuery、GSAP、Velocity 等 JavaScript 库来达到类似的效果。

对于更复杂的动画，我建议使用专门的 JS 库作为 GSAP，如果您需要更简单、引人注目的动画，您可以考虑使用一些预制效果：

• animate.css（CSS 关键帧动画）
• animatelo.js (Web Animation API) - 声明我创建了这个库:)

这真的取决于你动画的复杂性和你的技能。

#mario {
  background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
  background-repeat: no-repeat;
  width: 375px;
  height: 375px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: leaves 5s ease-in-out infinite alternate;
  animation: marioAnim 5s ease-in-out infinite alternate;
}

@-webkit-keyframes marioAnim {
  0% {
    -webkit-transform: scale(1.0);
  }
  100% {
    -webkit-transform: scale(2.0);
  }
}

@keyframes leaves {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(2.0);
  }
}

<div id="mario"></div>