Trick: animated blocks

  1. 2 years ago

    I played a bit with animation and maybe this can help somebody that also wants animation when scrolling down on the page:

    Put this on your page or in your template

    <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css">
    <script src="http://mynameismatthieu.com/WOW/dist/wow.min.js">
    </script>
    <script>
      new WOW().init();
    </script>

    The first part is a library of animations. The WOW script only activates the animations when you scroll.

    And then in your template you can do things like:

    <div class="wow animated fadeInUp">{{widget('content', 'welcome', {})|raw}}</div>

    More info and demo: http://daneden.github.io/animate.css/

    I hope this helps

or Sign Up to reply!