WordPress function to create a typing effect for text

Typing Effect WordPress Function Documentation

add_action('wp_enqueue_scripts', 'enqueue_typing_effect_script');

This line hooks the function enqueue_typing_effect_script to the wp_enqueue_scripts action. It is commonly used to enqueue or load scripts and stylesheets in the WordPress front end.

function add_typing_effect_class($content) { ... }

This function adds the type-text class to HTML elements within the content of a WordPress post or page. It utilizes a regular expression to find and modify existing classes in HTML tags.

Parameters:

• $content (string): The content of the post or page.

Returns:

• Modified content with the added type-text class.

add_filter('the_content', 'add_typing_effect_class');

This line hooks the function add_typing_effect_class to the the_content filter. It allows the modification of the content before it is displayed on the page.

function add_typing_effect_script() { ... }

This function injects JavaScript directly into the HTML to create a typing effect for elements with the type-text class. It uses the Intersection Observer API to trigger the typing animation when the element becomes visible on the screen.

JavaScript Features:

• Intersection Observer: Observes the visibility of elements and triggers the typing animation when they become visible.
• startTypingAnimation function: Initiates the typing animation on the specified element.
• Typing Animation: Simulates typing by gradually appending characters to the element’s content.
• Adjustable Parameters: The typing speed (in milliseconds) and the intersection threshold can be adjusted.

add_action('wp_footer', 'add_typing_effect_script');

This line hooks the function add_typing_effect_script to the wp_footer action. It ensures that the JavaScript code is inserted into the footer of the HTML document, which is a common practice to optimize script loading in WordPress.

Note:

Ensure that the jQuery library is loaded on your WordPress site for this script to work correctly, as it depends on the jQuery object.

Usage:

To implement the typing effect, add the type-text class to HTML elements within the post or page content. When these elements become visible on the screen, the typing animation will be triggered. Adjust the typing speed and intersection threshold as needed by modifying the respective parameters in the JavaScript code.

add_action('wp_enqueue_scripts', 'enqueue_typing_effect_script');

function add_typing_effect_class($content) {
    $content = preg_replace('/<(\w+)[^>]*class=[\'"]([^\'"]*)type-text([^\'"]*)[\'"]/', '<$1 class="$2 $3 type-text"', $content);
    return $content;
}
add_filter('the_content', 'add_typing_effect_class');

// Add the JavaScript directly into the HTML
function add_typing_effect_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            var observer = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) {
                        startTypingAnimation(entry.target);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 }); // Adjust the threshold as needed

            $('.type-text').each(function () {
                observer.observe(this);
            });

            function startTypingAnimation(element) {
                var $this = $(element);
                var text = $this.text();
                $this.empty();
                var i = 0;

                function type() {
                    if (i < text.length) {
                        $this.append(text.charAt(i));
                        i++;
                        setTimeout(type, 50); // Adjust the typing speed (milliseconds)
                    }
                }

                type();
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_typing_effect_script');