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

Question

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

Answer 1

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

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

一般可以使用：

CSS 关键帧动画
CSS 转换
JavaScript 原版或一些库
网络动画API

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

为了帮助您入门，我使用 CSS 关键帧动画创建了一个简单的 scale/zoom 效果，但您可以使用 JavaScript 库达到与 [=66= 类似的效果]、GSAP、Velocity 或其他。

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

animate.css（CSS关键帧动画）
animatelo.js（网络动画 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>

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

Unicef web animations

html

javascript

css

web-animations