Text Effects

iam_clint

Heres some sample code I wrote up for you guys to use on making text effects

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>

volectricity

I like and don't like how it's given it's own attribute. I like the concept, but I don't like adding invalid markup. It does look like it works nicely though.

Since this is creating animation effects, I'd add a little extra optimization in the series of ifs by making them else ifs to avoid checking them all. Other than that, this script is solid. Very nice work. :D

acoder

To avoid invalid markup, you could use the class attribute instead.

gits

hmmm ... the old 'philosophical' question ;) : custom attribute vs. class ...

i think it is really a question that is up to the 'taste' of the developer with advantages and disadvantages on both sides ... using a custom attribute makes the html invalid but describes what you really want to do ... to add an attribute that holds a value you need ... it's the straight way and from my point of view it is semantically correct until everybody who reads that will know what you want to do ... but: it makes the markup invalid! using the class-attribute avoids that problem, but you misuse it and you loose the semantic ... an attr-name like 'effect' shows what you want to have there ... class is always class ... so: there are the two possibilities and, i know all xhtml-evangelists will hate me for that ;), i would always prefer the custom-attribute way ...

kind regards

volectricity

I'm writing a class that handle effects, and I chose to go with classes, requiring that the classes corresponding to events have a special class in their class attribute. However, when you put it into perspective, a custom attribute does seem like a good idea. I'll need to start a debate somewhere regarding this and get some opinions.

Text Effects

re: Text Effects

re: Text Effects

re: Text Effects

re: Text Effects

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about