Animation

nodeppt

This is probably the best web presentation tool so far!

Github

使用 .animated 给元素添加动效

.animated.fadeInUp
.animated 添加的动效是自动播放的

h2.animated.fadeIn.slow

.animated.fadeIn.delay-800

animate with

.tobuild

需要添加动效的元素添加 .tobuild + 动效class

.tobuild 动效是手动触发的

.build 子元素全部会被添加.tobuild

  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn
  • .build + .moveIn

animate.css + .build

  1. fadeIn
  2. swing
  3. flash
  4. pulse
  5. shake
  6. bounceIn
  7. wobble
  8. fadeInLeft
  9. flipInX
  10. tada
  11. slideInUp
  12. jello
  13. heartBeat
  14. fadeInUp
  15. lightSpeedIn

nodeppt 使用 Prismjs 做语法高亮

  • .fadeInUp + .slow
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
  • Highlights inline code as well, not just code blocks
  • Highlights nested languages (CSS in HTML, JavaScript in HTML)
<article id="webslides">
  <!-- Slide 1 -->
  <section>
    <h1>Design for trust</h1>
  </section>
  <!-- Slide 2 -->
  <section class="bg-primary">
    <div class="wrap">
      <h2>.wrap = container (width: 90%)</h2>
    </div>
  </section>
</article>

Autoplay Feature

Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.

.background.anim

Design for understanding

  • 100% purpose

    Businesses that people love

  • Principles

    Useful → Easy → Fast → Beautiful

Designing Experiences

自动播放的animate.css

View More Demos?

* * *

U work so hard, but 干不过 write PPTs

快使用 nodeppt 轻松搞定高大上PPT
nodeppt 助力你的人生逆袭之路！

Github