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

Question

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

Answer 1

在 Unicef 动画中，开发人员使用 JavaScript 的混合方法 GSAP JS 库和 CSS Transitions。

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

通常你可以使用:

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

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

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

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

• > animate.css (CSS 关键帧动画)
• > animatelo.js (Web 动画 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>