»
EnglishFrenchVietnamese

Print - Stretch Text onMouseover - JavaScriptBank.com

Full version: jsB@nk » Text » Animation » Stretch Text onMouseover
URL: https://www.javascriptbank.com/stretch-text-onmouseover.html

Stretch Text onMouseover © JavaScriptBank.comThis effect makes the text will be stretched when you move mouse over the specified text.

Full version: jsB@nk » Text » Animation » Stretch Text onMouseover
URL: https://www.javascriptbank.com/stretch-text-onmouseover.html



CSS
<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-->


JavaScript
<script language="JavaScript">var test = new Arraytest[0] = "ftype1"test[1] = "ftype2"test[2] = "ftype3"test[3] = "ftype4"test[4] = "ftype5"var i=0var j=510var k=0function movetext(id){start.style.visibility = "hidden"replaceid = idid.className = test[0]id.style.left = jid.style.visibility = "visible"j -= 100if (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-->


HTML
<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-->