January 26, 2014

Weebly Tricks #25 - Add a Typing Text Effects to Your Site

Posted by Domz at 1/26/2014

Typing Text Effects


Like images, static text can be boring. But of course not all text lines should be edited while some like introductions tends to appeal more when the right effects was applied. My tutorial today is all about group of text which appears currently being typed on your browser. The transition is smooth and the tutorial is very easy. I found some websites with paragraph title like this and mind you, it can draw attention.







1. First you need to download the TypingText.js through this LINK, just right click on it and "save link as".

2. Upload that file to your template by going to Design > Edit CSS/HTML > Add new file.

3. Now, look for the <head> and paste the code below it. (Learn how to edit the <head> here)

<script type="text/javascript" src="http://theweeblytricks.weebly.com/files/theme/TypingText.js">
/****************************************************
* Typing Text script- By Twey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
</script>

The bold text will be your website name because that is the source of the file you've just uploaded. Change and save it then go to the page you want to edit.

4. We have two examples in the demo, drag an "embed code" element to your page and paste any of the following codes:

Example 1: Normal Typing Text Effects
<div id="example1">Thanks for visiting <a href="http://www.myweeblytricks.com/">My Weebly Tricks!</a>
Wow, HTML gets properly typed out too!</div>
<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));

//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });

//Type out examples:
TypingText.runAll();
</script>

Example 2. Typing Text Effects with Slashes
<div>

<p id="example2">This text has a <b>slashing cursor</b> at the end. The procedure is very easy and you can always add this style for an eye catching look for your sentences. This will also encourage your audience to read what you are virtually writing.....</p>

<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));

//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });

//Type out examples:
TypingText.runAll();
</script>
</div>

Just change the message in yellow marks. Publish your site and check for that awesome typing text effects of yours!

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top