« »

This effect makes the text will be stretched when you move mouse over the specified text.

Label: Stretch Text onMouseover

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style>

#main {visibility: hidden; height:60; overflow: hidden; position: absolute; top:100; font-family: 'arial black'; color: blue;}
#notsomain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:150; font-family: 'arial black'; color: blue;}
#notatallmain {visibility: hidden; height:70; overflow: hidden; position: absolute; top:200; font-family: 'arial black'; color: blue;}
#start {position:relative; color: #000;}
#finalwords {visibility: hidden; position:absolute; top:340; color: ffffff;}
.ftype1 {font-size: 36pt; letter-spacing:40px;}
.ftype2 {font-size: 36pt; letter-spacing:30px;}
.ftype3 {font-size: 36pt; letter-spacing:20px;}
.ftype4 {font-size: 36pt; letter-spacing:10px;}
.ftype5 {font-size: 36pt; letter-spacing:0px;}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JavaScript">
var test = new Array
test[0] = "ftype1"
test[1] = "ftype2"
test[2] = "ftype3"
test[3] = "ftype4"
test[4] = "ftype5"
var i=0
var j=510
var k=0

function movetext(id)
	{start.style.visibility = "hidden"
	replaceid = id
	id.className = test[0]
	id.style.left = j
	id.style.visibility = "visible"
	j -= 100
	if (j < 10)	{j = 510; changetext(replaceid)}
	else {setTimeout("movetext(replaceid)",100)}
	}

function changetext(id)
	{id.className = test[i]
	i++
	if (i > 4)
		{k++
		if (k == 1) {i=0; movetext(notsomain)}
		if (k == 2) {i=0; movetext(notatallmain)}
		if (k == 3) {finaltext()}		
		}
	else {setTimeout("changetext(replaceid)",100)}
	}
	
function finaltext()
	{finalwords.style.visibility = "visible"}
	
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<p id="finalwords">This is only a test.<br><br><br>In the event that this had 
been an actual emergency...well, never mind,<br>
	it would probably be too late anyway.</p>
<div class="ftype1" id="main">This is a test</div>
<div class="ftype1" id="notsomain">of the emergency</div>
<div class="ftype1" id="notatallmain">broadcast system.</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->