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');
Leave a Reply