0

I'm looking for a solution to activate a CSS3 Animation when in viewport without changing the class of the container. Any suggestions?

What I've done is a wordpress shortcode to wrap an element with the animate.css classes 

function bounce( $atts, $content = null ) {  
    return '<div class="animated bounce">'.do_shortcode($content).'</div>';  
}  
add_shortcode("Bounce", "bounce");

function flash( $atts, $content = null ) {  
    return '<div class="animated flash">'.do_shortcode($content).'</div>';  
}  
add_shortcode("Flash", "flash");

This will output 

<div class="animated bounce">My Content</div>

or

<div class="animated flash">My Content</div>

Now I only want the animation to start when it's in the viewport. But as I added it as a shortcode I don't know the class of the parent element to add the "animated bounce" when its entering the viewport AND as the customer could use this shortcode at ANY position in the theme it could also be the same class on multiple areas on the site. so it really needs to look for the single element, not the element class.

I guess I have to load the shortcode when in viewport, not the animation. But I don't know how. Remember: The same shortcode could be 10 times on one page, but every single of those 10 shortcodes should only shoot if they are visible right now.

Hope you understand my problem and can serve a solution. Thank you in advance!

ThomasB
  • 402
  • 3
  • 14
  • Not familiar with ajax in jQuery but surely something along the lines of **if($(window).scroll().top > $('.animated bounce').scrollTop()){//ajax calls PHP here}** will do the job? – ggdx May 02 '14 at 23:51
  • 1
    why not just initally render all shortcodes and add some JS ? http://stackoverflow.com/questions/16325679/activate-css3-animation-when-the-content-scrolls-into-view – gherkins May 03 '14 at 08:02

0 Answers0