08. May 2019

Play of columns - Animations

Add animation effect to any Jimdo module of your website

How it works

You add the below code to Edit Head of specific page where any module inside of the columns would have FadeInUp effect.

<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {

// wow
wow = new WOW(
    {
      boxClass:     'j-hgrid',
      animateClass: ' animated fadeInUp',
      mobile:       true,
      offset:       100
    }
  )
  wow.init();

});
})(jQuery);
//]]>
</script>

<style>
/* <![CDATA[ */
.j-hgrid{
   visibility: hidden;
}
/*]]>*/
</style>

Additional customizations

animatedClass:

animated fadeInUp, animated FadeIn

mobile:

true, false

offset:

100 or any other value

Live example

This is the heading

Phasellus tempus. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Fusce a quam. Praesent venenatis metus at tortor pulvinar varius.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus consectetuer vestibulum elit. Sed hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Nam adipiscing. Donec vitae orci sed dolor rutrum auctor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Donec id justo.