{"id":27965,"date":"2021-08-07T17:00:01","date_gmt":"2021-08-07T15:00:01","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27965"},"modified":"2022-01-12T10:30:03","modified_gmt":"2022-01-12T09:30:03","slug":"create-custom-typeout-effect","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/create-custom-typeout-effect\/","title":{"rendered":"How to Create a Custom Typeout Effect Using Code"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Making your site stand out from the competition can be difficult. That\u2019s why an engaging feature that will attract visitors and entice them to stay is key. And very little can beat animated effects when it comes to visitor engagement. One example of this is the animated typeout text effect. With it, you can create sections of text that are seemingly being typed out in real-time. The typeout text effect is neat enough to stand on its own, but you can also combine it with some static text to achieve different looks.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this article, we\u2019ll take a look at how an animated typeout text effect is made and how to add it to your WordPress website.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to create a custom typeout effect using code<\/h2>\n

[\/vc_column_text][vc_column_text]There are two ways you can add a custom typeout effect in WordPress\u2014using a suitable WordPress plugin or with custom code. Using a plugin is the more beginner-friendly option, so if that\u2019s what you decide to do, we invite you to try the Qi Addons for Elementor<\/a> plugin, which was created by the same team behind our award-winning WordPress themes<\/a>. Qi Addons is a free library of 60 flexible Elementor widgets, i.e. add-ons, that let you customize your WordPress website with ease. It contains Elementor addons that span a range of areas from business, infographic, presentational, creative, WooCommerce to typography, SEO, and form style. Within the typography category, you\u2019ll find the Typeout Text widget<\/a>, which offers a simple way of adding typeout effects to your website.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, our focus in this article will be how to add a custom typeout effect with code. This method is more suitable for intermediate and advanced WordPress users, as it requires familiarity with CSS and\/or JS code. The benefit of using it is that you can customize all aspects of the typeout effect exactly according to your needs. And, in case you\u2019re just curious to see how the typeout effect works \u201cunder the hood\u201d, we\u2019ll be showing you the process using code<\/a> created specifically for this article.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]With that being said, before we move on to the how-to part of this article, we suggest you make a backup of your website<\/a> beforehand. This is just a precautionary measure to ensure its safety. Once you\u2019ve done that, you can proceed to the first part of the code, which is shown below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n

function custom_typing_text( $atts ) {\r\n$default_atts = array(\r\n\"text\" => '',\r\n\"text_color\" => 'black'\r\n);\r\n$params = shortcode_atts( $default_atts, $atts );\r\n$text_styles = \"\";\r\n\r\nif( ! empty( $params['text_color'] ) ) {\r\n$text_styles .= \"color: \" . $params['text_color'] . \";\";\r\n}\r\nreturn '<div class=\"text-holder\"><span style=\"' . $text_styles . '\">' . esc_html( $params['text'] ) . '<\/span><\/div>';\r\n}\r\nadd_shortcode( 'custom-typing-text', 'custom_typing_text' );<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This code represents a very simple custom shortcode that we named custom-typing-text<\/strong>. It was registered using the add_shortcode()<\/a> function with a callback function named custom_typing_text()<\/strong> that we created for it. The shortcode accepts two parameters\u2014text<\/strong> and text_color<\/strong>. Its output is the text you add, colored in the text color you set.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]More specifically, the text is wrapped in a <span><\/a> tag, with the color added using inline CSS. Additionally, if a user forgets to set the text_color property, it will default to the black color. The <span> is also wrapped with a <div><\/a> element, which has a custom class called text-holder<\/strong>. The custom class is added to help with creating CSS code that will be specific to it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To summarize, the shortcode above is created to display a text in a given color only. To use this code, you will need to add it to the functions.php file of your child theme, using FTP<\/a> or within a site-specific plugin<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To create a custom typeout effect, besides using the previously created shortcode, you will need to add additional code to animate the text that is displayed. Generally speaking, the typeout effect can be created using either JS and\/or CSS code. In this article, we\u2019ll explain how to do it using CSS only. The example we prepared is relatively simple but it should be enough to illustrate how the effect is achieved. You can use this CSS as is or you can modify it to fit your needs. With that being said, you can find the CSS code that we created below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.text-holder {\r\ndisplay: -webkit-inline-box;\r\ndisplay: -ms-inline-flexbox;\r\ndisplay: inline-flex;\r\n-webkit-box-pack: center;\r\n-ms-flex-pack: center;\r\njustify-content: center;\r\n}\r\n.text-holder span {\r\nfont-size: 25px;\r\nletter-spacing: 0.2em;\r\nborder-right-width: 3px;\r\nborder-right-style: solid;\r\noverflow: hidden;\r\nwhite-space: nowrap;\r\n-webkit-animation: \r\ntyping-animation 7s steps(30, end) infinite,\r\nblink-animation .5s step-end infinite;\r\nanimation: \r\ntyping-animation 7s steps(30, end) infinite,\r\nblink-animation .5s step-end infinite;\r\n}\r\n\/* The typing effect *\/\r\n@-webkit-keyframes typing-animation {\r\nfrom, to { width: 0 }\r\n50% { width: 100% }\r\n}\r\n@keyframes typing-animation {\r\nfrom, to { width: 0 }\r\n50% { width: 100% }\r\n}\r\n\/* The blinking cursor effect *\/\r\n@-webkit-keyframes blink-animation {\r\nfrom, to { border-color: transparent }\r\n50% { border-color: #000 }\r\n}\r\n@keyframes blink-animation {\r\nfrom, to { border-color: transparent }\r\n50% { border-color: #000 }\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s break this code down.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First of all, we applied two CSS rules to the <div> element that wraps the text. By setting the display to inline-flex, we made the element inline and its inner <span> element, which contains the text, flexible. Also, the <span> is justified starting from the center of the <div> element container using the justify-content: center;<\/strong> rule. Using this CSS property will help with the animations\u2019 appearance\u2014it will create a delicate sliding effect as the text is being revealed, or typed out. All of this covered by the portion of the code you can see below:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.text-holder {\r\ndisplay: -webkit-inline-box;\r\ndisplay: -ms-inline-flexbox;\r\ndisplay: inline-flex;\r\n-webkit-box-pack: center;\r\n-ms-flex-pack: center;\r\njustify-content: center;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The second part of the CSS contains the rules applied directly to the <span> element that holds the inserted text. We set the font size and line spacing for the text, and added a 3px thick border to the right of the text. This border will imitate a blinking cursor that would go with the typing animation. The border color is specified in the section that contains the two custom animations, which we created and applied to the <span> element.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Apart from the animation code, there are two other lines of code that we need to touch on. The overflow: hidden;<\/strong> rule makes sure the text is hidden before the animations start. And the white-space: nowrap;<\/strong> rule keeps the <span> text within a single line.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]All of this covered by the portion of the code you can see below:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.text-holder span {\r\nfont-size: 25px;\r\nletter-spacing: 0.2em;\r\nborder-right-width: 3px;\r\nborder-right-style: solid;\r\noverflow: hidden;\r\nwhite-space: nowrap;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now we come to the part with the animation code. For this article, we created two simple custom animations called the typing-animation<\/strong> and the blink-animation<\/strong> using the @keyframes<\/a> CSS rule. In its first half, the typing-animation<\/strong> gradually increases the width of the span containing the text from 0% up to 100%. In the second half of the animation, the width that was reached is gradually shrunk back down to 0%. This lets the animation mimic the writing of text and its subsequent erasure. The blink-animation<\/strong> mimics the blinking of the right border that we are using as the cursor. The blinking effect is created by gradually changing the border color from transparent to black and back again.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This covered by the portion of the code you can see below:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
\/* The typing effect *\/\r\n@-webkit-keyframes typing-animation {\r\nfrom, to { width: 0 }\r\n50% { width: 100% }\r\n}\r\n@keyframes typing-animation {\r\nfrom, to { width: 0 }\r\n50% { width: 100% }\r\n}\r\n\/* The blinking cursor effect *\/\r\n@-webkit-keyframes blink-animation {\r\nfrom, to { border-color: transparent }\r\n50% { border-color: #000 }\r\n}\r\n@keyframes blink-animation {\r\nfrom, to { border-color: transparent }\r\n50% { border-color: #000 }\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We applied both of these animations to our <span> element using the animation<\/a> shorthand CSS property. The animation shorthand has several properties but we only used a few. First, we called the typing-animation<\/strong> property with the duration of 7 seconds and set the animation-timing-function<\/strong> property to steps(30, end), which means the typing effect is broken into 30 steps, with the last step matching the end of the animation.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Setting the animation-iteration-count<\/strong> property to infinite results in the text constantly being \u201cwritten\u201d and \u201cerased\u201d. As for the blink-animation<\/strong>, its duration is 0.5 seconds, the animation-timing function<\/strong> is set to step-end and the animation-iteration-count<\/strong> property is also set to infinite, so it repeats endlessly. Since step-end is equal to steps(1, end), it means that the change in the color of the right border is far less gradual than it otherwise would be. This creates the impression of the \u201ccursor\u201d blinking rather than fading in and out.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]All of this covered by the portion of the code you can see below:
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
.text-holder span {\r\n-webkit-animation: \r\ntyping-animation 7s steps(30, end) infinite,\r\nblink-animation .5s step-end infinite;\r\nanimation: \r\ntyping-animation 7s steps(30, end) infinite,\r\nblink-animation .5s step-end infinite;\r\n}<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This concludes our explanation of the CSS code we created. Now the question remains\u2014where do you add it?
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When working with CSS code like the one above or any similar to it, you can always add it under Appearance > Customize > Additional CSS. This is the default location for inserting website-related CSS and WordPress users should place their CSS code there. However, more advanced WordPress users can opt to put their CSS in a separate file and enqueue it using the wp_enqueue_style()<\/a> function. If you\u2019d like to learn more on this topic, you can check out our article on enqueueing scripts and stylesheets<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Now, let\u2019s examine how this custom typeout text shortcode is used.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Custom shortcodes can be inserted into pages and posts by using the appropriate shortcode call with the necessary parameters that the shortcode supports. Since our custom shortcode has the name custom-typing-text<\/strong> and supports two parameters \u2013 text<\/strong> and text_color<\/strong>, an example of a proper shortcode call would be the following:[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]<\/p>\n
[custom-typing-text text=\"your-text-here\" text_color=\"your-text-color-here\"]<\/pre>\n
[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Don\u2019t forget to replace the dummy properties for both the text and text color before using the shortcode call. Once you\u2019ve done that, for the shortcode to display on a page, you need to insert the call into an appropriate shortcode-rendering element of your page builder plugin. For example, that could be the Text Block shortcode, if you are using the WPBakery plugin. But, if you are using Elementor, then you\u2019ll need the Text Editor widget. And for Gutenberg users, the Shortcode block is the appropriate element.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]If you need any further help with how to use and add your custom shortcode, you can check out our article on creating custom shortcodes<\/a>. You\u2019ll find extensive coverage of anything you might need there. For the sake of brevity, we will only show the use of a custom shortcode with the Gutenberg editor below.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To use this shortcode with the Gutenberg editor, click on the \u201c+\u201d icon<\/strong> to add a new block and then find the Shortcode block<\/strong>. Next, click on the Shortcode block to add it<\/strong> and insert your (previously customized) shortcode call<\/strong> inside it. After that, you can update the page<\/strong> and examine the results<\/strong>. At this point, you can also include additional content on the page. As you can see from the screenshot below, we have added a small paragraph above the shortcode call.[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Inserting                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This got us the following result.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n    
\n                                    \"Result\"                        <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, you should keep in mind that the example we created is just one of many ways how a typeout effect can be implemented using code. We showcased the method that uses CSS and shared the code that we used to create the effect. However, this example CSS might not fit the design requirements of a different WordPress website. For example, the fonts and the color scheme on your site could clash with the ones we used in the code.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In that case, you will need to customize the CSS code to match your website design or even alter the animation code if needed. Since we took care to explain every line of code carefully, we are confident that you will be able to implement the necessary modifications easily. And, to ensure your code remains cross-browser compatible, take care to change the part of the CSS code that contains the CSS vendor prefixes<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]And, if you aren\u2019t very familiar with CSS, the typeout effect is a neat way to learn something new, gain confidence, and enhance your site at the same time. There is a wealth of online resources available to help you, and you can always take a peek at our tutorials section<\/a>.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n
Final Thoughts<\/h2>\n
[\/vc_column_text][vc_column_text]The typeout text is one of the easiest ways of appealing to visitors and increasing their engagement with your WordPress website. This makes it a neat trick every WordPress owner should know. In this article, we discussed how you can implement the typeout effect using code. To illustrate how this is done, we created a custom shortcode as well as the CSS code that enables the typeout effect. Now all you need to do is follow along with the explanations and figure out which bits of the provided code you\u2019d need to customize to make it fit with your site design.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, if you find yourself stuck or unsure how to edit the code appropriately, you can always use a plugin to add the typeout effect to your site. This is, actually, the preferred choice of many WordPress users who are new to site design or aren\u2019t confident about working with code. If you choose to use a plugin, we recommend the Qi Addons for Elementor and its Typeout Text widget. The typeout text effect can be a powerful tool for helping your website stand out, so make sure not to miss out on it either way.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Bring your text to life with the typeout effect. We’ll show you how to create this attractive design detail for your WordPress site with some easy CSS.<\/p>\n","protected":false},"author":11229,"featured_media":27979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[128,129,4,130],"class_list":["post-27965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-animations","tag-effects","tag-tips","tag-typeout"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=27965"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/27979"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=27965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=27965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=27965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}