Expand|Select|Wrap|Line Numbers
- <script>
- //TEXT EFFECTS CODE WRITTEN BY iam_clint!
- window.onload = doEffects;
- var speed = 15; //lower the number the faster
- var color_speed = 50; //speed at which colors change
- var smoothing = 8; //the larger the number the less smooth but faster for sliding.
- var font_smoothing = 1; //lower the number the smoother the font changes.
- var start_top = 0;
- var start_left = 0;
- //setting global variables
- var curele = "";
- var slidedown = "";
- var start_topSD = "";
- var slideup = "";
- var start_topSU = "";
- var slideright = "";
- var start_leftSR = "";
- var slideleft = "";
- var start_leftSL = "";
- var zoomin = "";
- var zoomout = "";
- var start_zoomSize = "";
- var start_zoomSize0 = "";
- var colors = "";
- var R = "00";
- var G = "00";
- var B = "00";
- function doEffects() {
- var elements = document.getElementsByTagName("DIV");
- for (i=0; i<elements.length; i++) {
- var c = elements[i].getAttribute("effect").split(",");
- for (b=0; b<c.length; b++) {
- //elements[i].getAttribute("effect")
- if (c[b] == "slidedown") { preset(elements[i]); start_topSD = elements[i].style.top; elements[i].style.top = 0; slidedown = window.setInterval("eSlideDown('"+curele+"')", speed); }
- if (c[b] == "slideup") { preset(elements[i]); start_topSU = elements[i].style.top; elements[i].style.top = document.documentElement.offsetHeight; slideup = window.setInterval("eSlideUp('"+curele+"')", speed); }
- if (c[b] == "slideright") { preset(elements[i]); start_leftSR = elements[i].style.left; elements[i].style.left = 0; slideright = window.setInterval("eSlideRight('"+curele+"')", speed); }
- if (c[b] == "slideleft") { preset(elements[i]); start_leftSL = elements[i].style.left; start_topSD = elements[i].style.top; elements[i].style.left = document.documentElement.offsetWidth; slideleft = window.setInterval("eSlideLeft('"+curele+"')", speed); }
- if (c[b] == "zoomin") { preset(elements[i]); start_zoomSize = elements[i].style.fontSize; elements[i].style.fontSize = "0px"; zoomin = window.setInterval("eZoomIn('"+curele+"')", speed); }
- if (c[b] == "zoomout") { preset(elements[i]); start_zoomSizeO = elements[i].style.fontSize; elements[i].style.fontSize = "100px"; zoomout = window.setInterval("eZoomOut('"+curele+"')", speed); }
- if (c[b] == "colors") { preset(elements[i]); colors = window.setInterval("eColors('"+curele+"')", color_speed); }
- }
- }
- }
- function preset(ele) {
- curele = ele.getAttribute("id");
- }
- function calcHex(val) { hex = val; if (val==10) { hex = "A"; } if (val==11) { hex = "B"; } if (val==12) { hex = "C"; } if (val==13) { hex = "D"; } if (val==14) { hex = "E"; } if (val==15) { hex = "F"; } return hex; }
- function eSlideDown(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.top)<parseFloat(start_topSD)) { ele.style.top = Math.floor(parseFloat(ele.style.top)+smoothing)+"px"; } else { ele.style.top = start_topSD; window.clearInterval(slidedown); } }
- function eSlideUp(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.top)>parseFloat(start_topSU)) { ele.style.top = Math.floor(parseFloat(ele.style.top)-smoothing)+"px"; } else { ele.style.top = start_topSU; window.clearInterval(slideup); } }
- function eSlideLeft(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.left)>parseFloat(start_leftSL)) { ele.style.left = Math.floor(parseFloat(ele.style.left)-smoothing)+"px"; } else { ele.style.left = start_leftSL; window.clearInterval(slideleft); } }
- function eSlideRight(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.left)<parseFloat(start_leftSR)) { ele.style.left = Math.floor(parseFloat(ele.style.left)+smoothing)+"px"; } else { ele.style.left = start_leftSR; window.clearInterval(slideright); } }
- function eZoomIn(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.fontSize)<parseFloat(start_zoomSize)) { ele.style.fontSize = Math.floor(parseFloat(ele.style.fontSize)+font_smoothing)+"px"; } else { ele.style.fontSize = start_zoomSize; window.clearInterval(zoomin); } }
- function eZoomOut(eleid) { var ele = document.getElementById(eleid); if (parseFloat(ele.style.fontSize)>parseFloat(start_zoomSizeO)) { ele.style.fontSize = Math.floor(parseFloat(ele.style.fontSize)-font_smoothing)+"px"; } else { ele.style.fontSize = start_zoomSizeO; window.clearInterval(zoomout); } }
- function eColors(eleid) { var ele = document.getElementById(eleid); R = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); G = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); B = calcHex(Math.floor(Math.random()*15))+''+calcHex(Math.floor(Math.random()*15)); ele.style.color = "#"+R+G+B; }
- </script>
- <!--<div name="txtEffect" effect="slideleft" id="id4" style="position: absolute; top: 50px; left: 500px;"><font color="red">This text should slide in from the right</font></div>
- <div name="txtEffect" effect="slideleft" id="id5" style="position: absolute; top: 150px; left: 500px;"><font color="blue">This text should slide in from the right</font></div>
- <div name="txtEffect" effect="slideleft" id="id6" style="position: absolute; top: 250px; left: 500px;"><font color="green">This text should slide in from the right</font></div>
- <div name="txtEffect" effect="slideleft" id="id7" style="position: absolute; top: 350px; left: 500px;"><font color="orange">This text should slide in from the right</font></div>
- <div name="txtEffect" effect="slideright" id="id8" style="position: absolute; top: 100px; left: 500px;"><font color="red">This text should slide in from the left</font></div>
- <div name="txtEffect" effect="slideright" id="id9" style="position: absolute; top: 200px; left: 500px;"><font color="blue">This text should slide in from the left</font></div>
- <div name="txtEffect" effect="slideright" id="id10" style="position: absolute; top: 300px; left: 500px;"><font color="green">This text should slide in from the left</font></div>
- <div name="txtEffect" effect="slideright" id="id11" style="position: absolute; top: 400px; left: 500px;"><font color="orange">This text should slide in from the left</font></div>-->
- <div name="txtEffect" effect="slidedown,colors" id="id1" style="position: absolute; top: 300px; left: 0px;">This text should slide down from the top and change colors</div>
- <div name="txtEffect" effect="slideright" id="id3" style="position: absolute; top: 300px; left: 360px;"><font color="red">This text should slide in from the left</div>
- <div name="txtEffect" effect="zoomout,slideleft" id="id4" style="position: absolute; top: 300px; left: 600px; font-size: 20px;"><font color="green">This text should slide in from the right and zoom out</div>
- <div name="txtEffect" effect="zoomin,slideup,colors" id="id5" style="position: absolute; top: 500px; left: 300px; font-size: 40px;">This text should Zoom in to size (zoom in) and slide up and change colors</div>