Animate all H3 headers

Dear Luc3283,

Animating all headers can be a bit tricky, but it can be done.

Let me know which animation do you have in mind for the header, and I’ll try to come up with something ??

Lets just say some light ‘on scroll’ effect such as a buzz or something not too distracting.

But if I could somehow write it into my theme’s CSS to define an H3 with that effect, that would be ideal. However, I am not a CSS pro…

• This reply was modified 6 years, 2 months ago by luc3283.

Dear Luc3283,

This would require a little bit of code addition to your theme’s functions.php file.

Please follow the below steps:

1. Create your required classes using the Animate It! Classes Generator
(https://www.downloads.eleopard.in/class-generator-wordpress)
For this example I am using the following classes animated shake duration3 eds-on-scroll

2. On your WordPress Backend, go to Appearance > Editor and open functions.php, the Theme functions file.

3. At the bottom of the file, paste the following code:

/** Function to automatically add Additional Class to <h3></h3>  */

add_filter('the_content', 'add_h3_classes', 20);
function add_h3_classes($content)
{
    $doc = new DOMDocument(); //Instantiate DOMDocument
    $doc->loadHTML($content); //Load the Post/Page Content as HTML
    $headings = $doc->getElementsByTagName('h3'); //Find all h3
    foreach($headings as $heading)
    {
        append_attr_to_element($heading, 'class', 'animated shake duration3 eds-on-scroll'); //Add your generated classes here
    }
    return $doc->saveHTML(); //Return modified content as string
}
function append_attr_to_element(&$element, $attr, $value)
{
    if($element->hasAttribute($attr)) //If the element has the specified attribute
    {
        $attrs = explode(' ', $element->getAttribute($attr)); //Explode existing values
        if(!in_array($value, $attrs))
            $attrs[] = $value; //Append the new value
        $attrs = array_map('trim', array_filter($attrs)); //Clean existing values
        $element->setAttribute($attr, implode(' ', $attrs)); //Set cleaned attribute
    }
    else
        $element->setAttribute($attr, $value); //Set attribute
}

4. Save

__________________________________

This will add the classes to all the H# heading.
you can replace the classes with any other animations that you wish.

You can see this live in action here: https://animateitdemo.wpdevcloud.com/custom-classes-demo/

Let me know if this works for you.

Thanks!

The animations appear a bit different on my site than on the demo… Jello for example looks more like a bounce and shake…

Also, just noticed, it adds strange characters like “?” into my text at random places and changed “don’t” into “dona€?t”. For now I have disabled this function…

Here is an example link, but the function is disabled for now: https://www.ahcafr.com/bathmate-reviews/

• This reply was modified 6 years, 2 months ago by luc3283.
• This reply was modified 6 years, 2 months ago by luc3283.
• This reply was modified 6 years, 2 months ago by luc3283.
• This reply was modified 6 years, 2 months ago by luc3283.
• This reply was modified 6 years, 2 months ago by luc3283.

Dear Luc3283,

Nothing a little CSS tweak can’t fix ??

Please do the following:

1. Go to Settings > Animate It! > Custom CSS Box.

2. Paste the following:

h3.eds-on-scroll {
    opacity: 1;
}

This will make all the H3 headings with on-scroll animation visible by default.
Let me know if this works for you.

Ok, and how about the strange characters the script adds.

It adds “?” into my text at random places and changed “don’t” into “dona€?t”.

Dear Luc3283,

That’s strange.
I cannot imagine why this would be happening, as the function only adds classes, and does nothing to the content of the H3.

I have added “don’t” to the demo post I created, and it is working fine for me:
https://animateitdemo.wpdevcloud.com/custom-classes-demo/

If you could throw some on how I can re-create this issue on my end, that would be great.