animated Pseudo-Header

Animierter Pseudo-Header mit Animationen von https://designtest-florence.jimdo.com/ 

Quelle: http://jackonthe.net/css3animateit/ 

HowToDo

Vorbereitungen

• Einbetten animation.js und animation.css 
• .jtpl-section-main auf display:none setzen und per jQuery fadeIn('slow') wieder einblenden

Animated Container

• Container mit Inhalten füllen und Animationen vereinbaren
  - "$('.event').parent().prev().addClass('fadeIn fadeInDown slow go');" funktioniert nur bei Bildern
  - "$('.event1').parent().prev().children().addClass('fadeIn fadeInLeft slow go');" bei Textelementen etc.
• Bei Spaltenelementen jede Spalte animieren

Container verschieben

• $('#pseudo-header').parent().prev().prependTo('.jtpl-section-main').addClass("pseudo-header");         
• $('#pseudo-header').addClass('nodisplay');