Yong

<p>Create an animated typing effect with <a href="https://github.com/mattboldt/typed.js" rel="nofollow ugc">Typed.js</a> easily.</p>
<p>Just install and activate, <strong>Animated Typed JS Shortcode</strong> plugin and you can start using <code>[typedjs][/typedjs]</code> shortcode to create your animated typing text.</p>
<p>No settings needed just plug and play.</p>
<h4>How to use the shortcode?</h4>
<p>You can use the shortcode just like this:</p>
<p><strong><code>[typedjs]My animated typing text[/typedjs]</code></strong></p>
<p>To show more than 1 string/text, separate the strings with a <code>double colons (::)</code> like this:</p>
<p><strong><code>[typedjs]My animated typing text::It's freaking awesome![/typedjs]</code></strong></p>
<p>If you want to customize your animated text behaviour, you can use shortcode attributes to do that like this:</p>
<p><strong><code>[typedjs loop=true]My animated typing text::It's freaking awesome!::It's now looping, OMG![/typedjs]</code></strong></p>
<p>Here are the list of all available attributes that you can use:</p>
<ul>
<li><code>typespeed</code> : The text typing speed in milliseconds (default: 50)</li>
<li><code>startdelay</code> : Delay time before typing start in milliseconds (default: 500)</li>
<li><code>backspeed</code> : Backspacing speed in milliseconds (default: 50)</li>
<li><code>backdelay</code> : Time before backspacing in milliseconds (default: 500)</li>
<li><code>smartbackspace</code> : Only backspace what doesn’t match the previous string (default: true)</li>
<li><code>shuffle</code> : Shuffle the strings (default: false)</li>
<li><code>fadeout</code> : Fade out instead of backspace (default: false)</li>
<li><code>fadeoutdelay</code> : Time before fade out in milliseconds (default: 500)</li>
<li><code>loop</code> : Loop strings animation (default: false)</li>
<li><code>loopcount</code> : Amount of loops if enabled (default: Infinity)</li>
<li><code>showcursor</code> : Show/hide cursor (default: true)</li>
<li><code>cursorchar</code> : Character to be used as cursor (default: |)</li>
<li><code>class</code>: Custom class for the shortcode element (default: ”)</li>
</ul>
<h4>Optimize Javascript loading</h4>
<p>The <code>typed.min.js</code> is only 12KB, in the previous version I tried to load the script only when the shortcode is used, but it’s not working properly because the script is loaded asynchronously. So, I decided to load the script in the footer of the page to make sure it’s loaded properly.</p>
<p>However, if you want to load the script only on specific pages, you can use this hook to enqueue the script only on specific pages:</p>
<pre><code>`php
</code></pre>
<p>add_action(‘wp_enqueue_scripts’, ‘my_custom_typedjs_script’);<br />
function my_custom_typedjs_script() {<br />
    if ( ! is_page( ‘my-page-slug’ ) ) {<br />
        wp_dequeue_script( ‘typedjsshortcode’ );<br />
    }<br />
}<br />
    `</p>
<p>This will dequeue the script on all pages except the page with the slug <code>my-page-slug</code>.</p>
<h4>CREDITS</h4>
<p>Thanks to <a href="https://mattboldt.com/" rel="nofollow ugc">Matt Boldt</a> for creating this cool library <a href="https://github.com/mattboldt/typed.js" rel="nofollow ugc">Typed.js</a>!</p>


Animated Typed JS Shortcode

This plugin add shortcode to create an animated typing effect with Typed JS. No settings needed, just plug and play.

Modernaweb Studio

Shahin

<p>Black Widgets is a free add-on for Elementor; with this plugin, you can create unique elements with the ability to customize your website.</p>
<p>We will add more widgets with more and more styles that may surprise you in the future; for now, add black widgets to your WordPress, and don’t miss future updates.</p>
<p><a href="https://modernaweb.net/black-widgets/" rel="nofollow ugc">Black Widgets Demo</a></p>
<h3>Create your own styles</h3>
<p>✔️ 21 Widgets<br />
⚡ An Awesome Typography<br />
⚡ Great Animate with AnimeJS and GSAP<br />
⚡ CSS Transform(2D & 3D CSS Styles)<br />
⚡ Scroll Trigger(with CDN)</p>
<h3>✹ Dsgn</h3>
<p>Dsgn is a simple way to start a website easily, quickly, and free. This is Free & + Fresh Templates Design for Elementor and Black Widgets.</p>
<p><a href="https://modernaweb.net/dsgn/" rel="nofollow ugc">Dsgn Templates</a><br />
<a href="https://modernaweb.net/dsgn/solutions/" rel="nofollow ugc">Our Solutions</a></p>
<p>— Enjoy 😉</p>
<h3>Available Widgets</h3>
<ul>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-title/" rel="nofollow ugc">Black Title</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-button/" rel="nofollow ugc">Black Button</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-image/" rel="nofollow ugc">Black Image Pro</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-flip-box/" rel="nofollow ugc">Black Flip Box</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-title-animate/" rel="nofollow ugc">Black Title Animate</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-magic-link/" rel="nofollow ugc">Black Magic Link</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-dropcap/" rel="nofollow ugc">Black Drop Cap</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-fade/" rel="nofollow ugc">Black Fade</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-alert/" rel="nofollow ugc">Black Alert</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-icon/" rel="nofollow ugc">Black Icon</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-list/" rel="nofollow ugc">Black List</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-social-links/" rel="nofollow ugc">Black Social Links</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-icon-box-pro/" rel="nofollow ugc">Black Icon Box Pro</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-call-to-action/" rel="nofollow ugc">Black Call to Action</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-blockquote/" rel="nofollow ugc">Black Blockquote</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-typography/" rel="nofollow ugc">Black Typography(for experts)</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-box/" rel="nofollow ugc">Black Box</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-flat-nav/" rel="nofollow ugc">Black Flat Nav(menu)</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-sentence/" rel="nofollow ugc">Black Sentence</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-trigger/" rel="nofollow ugc">Black Trigger(for experts)</a></li>
<li><a href="https://modernaweb.net/black-widgets/all-widgets/black-horizontal/" rel="nofollow ugc">Black Horizontal(for experts)</a></li>
</ul>
<h3>Features</h3>
<ul>
<li><a href="https://modernaweb.net/black-widgets/features/builder-tools/" rel="nofollow ugc">Builder Tools By Elementor</a></li>
<li><a href="https://modernaweb.net/black-widgets/features/typography/" rel="nofollow ugc">Typography</a></li>
<li><a href="https://modernaweb.net/black-widgets/features/gsap-animate/" rel="nofollow ugc">GSAP Animate</a></li>
<li><a href="https://modernaweb.net/black-widgets/support/whats-new/" rel="nofollow ugc">What’s New</a></li>
</ul>
<h3>Support</h3>
<p>If you found an issue or have a new suggestion, contact us: <a href="mailto:modernawebdesign@gmail.com" rel="nofollow ugc"> <strong>modernawebdesign@gmail.com</strong> </a></p>
<ul>
<li><a href="https://modernaweb.net/contact/" rel="nofollow ugc">Contact Us</a></li>
<li><a href="https://modernaweb.net/black-widgets/support/solutions/" rel="nofollow ugc">Solutions</a></li>
<li><a href="https://modernaweb.net/black-widgets/features/documentation/" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://modernaweb.net/black-widgets/support/get-creative/" rel="nofollow ugc">Get Creative</a></li>
</ul>


Black Widgets For Elementor

Free add-on for Elementor! With this add-on, you can add more visual effects and improve your website's user experience. ✌

Animated Typed JS Shortcode vs Black Widgets For Elementor