Last week we have launched dedicated Crunchify Pro site which is very handy for users to get an idea on what all services we are providing. It also includes some of our best Premium Plugins. Head over to it and check it out.
There are few major service categories:
- WordPress Site SEO review at very nominal charge
- Full WebSite Service Design
- WordPress Consultation and Optimization service
- Java Development Service
- WordPress Premium Plugins
As you must have seen on official
Slack.com site, they are using
Typed.js to animate their heading with Typewriter effect which I absolutely loved it.
- jQuery Animated Typing with
- Create A
Typing EffectIn CSS
- How to create a Typewriter / Typing Text effect in HTML using CSS
- How to implement Typed.js to your WordPress website
- How can I use this jQuery script, Typed.js?
Here are the steps if you want to add Typed.js Typewriter Animated effect to your WordPress site:
- We are going to use official
- Download ZIP from official site.
- Extract it and put it under your theme’s
js folder.If your theme doesn’t have js folder then it’s
good idea to create oneand put file under it.
- We need to load jQuery and
typed.min.jsfile into your site’s header.
- In order to achieve that I’m using Header section available in All in One Webmaster plugin.
- Just put below code to header section and plugin will add both scripts and jQuery function into your theme’s header automatically.
strings: ["App Shah...", " an Engineer (MS)...","a WordPress Lover...", "a Java Developer..."],
NOTE: Make sure to change typed.js path as per your environment.
Here we are using 3 parameters:
- TypeSpeed: Which is 100 ms
- backDelay: 3 seconds
- loop: true
Please modify these typed.js parameter if required as per your need.
Now as we added all required script to your site, next task is to add HTML tag where you want to show
typing effect. There are multiple options:
You could add typed effect to
- and more…
I'm <span class="element"></span><span class="typed-cursor"></span>
NOTE:Title section part is kind of tricky and totally depends on your site theme. I would say, take a look at your theme’s template file and modify location where you want to put this typed effect.
In my case, I’ve put animated effect
only on Home page and
removed Post Title too.
It seems, WordPress doesn’t allow any hook to add HTML tags into Title. So I raised a question in Crunchify Forum if anybody know how to tweak it.
Is there any way to add HTML tag to WordPress Post Title? Let me know you answer to this question.
Also, if you need any custom solution then feel free to ask in above forum section and I’ll update you at earliest.