|
JavaScript - Anyone Familar With Tween.js?
tween.js is a nice script that moves layers from one location to another. I have a hard time wrapping my head around it because as you all know, my skills are basic at best (I know enough to really screw things up). My problem is I have 3 layers and only one is visible at a time. When you click link one, any layer that is on the page moves down while the layer corresponding to the link moves up into place. My first thought was a sloppy function and repeat for each link:
Code: function annomateT1() {
Down1= new Tween(document.getElementById('text02').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down1.start();
Down2 = new Tween(document.getElementById('text03').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down2.start();
Up1 = new Tween(document.getElementById('text01').style,'top',Tween.bounceEaseOut,580,85,4,'px');
Up1.start();
}
Then the link one would be just "javascript:"annomateT1()" The animation works, its just sloppy and doesn't work consistently (the second layer seems to get "stuck"). The tween class has some event handlers and listeners and I tried using them but those scripts didn't even work - I simply don't know enough. Here is a link to the tween.js page for those who are interested: http://jstween.blogspot.com/ Thanks in advance for your help... Similar TutorialsHello everyone, I have written a color tween script based off of istallkizza's script that he provided for someone else in a different thread (http://codingforums.com/showpost.php...20&postcount=5.) It works, but the more it is used, the faster it runs, can anyone help me diagnose the problem? Code: var colorArr = new Array();
var colorSym = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var colorInt;
for (i=0;i<colorSym.length;i++)
{
for (n=0;n<colorSym.length;n++)
{
colorArr.push(colorSym[i]+colorSym[n]);
}
}
function colorTween(celem,r,g,b,time){
initColor = colorToHex(document.getElementById(celem).style.backgroundColor);
origColor = splitColor(initColor);
currColor = splitColor(initColor);
targetColor = [colorArr[r], colorArr[g], colorArr[b]]
colorIncs = [Math.round(diffBetween(origColor[0],targetColor[0])/time),Math.round(diffBetween(origColor[1],targetColor[1])/time),Math.round(diffBetween(origColor[2],targetColor[2])/time)];
startColorFade();
function stopInt() {
if (colorInt) { clearInterval(colorInt); }
}
function startColorFade() {
stopInt();
var colorInt = setInterval("this.colorFader()",time);
}
this.colorFader = function() {
currColor[0] = colorArr[arrayIndex(colorArr,currColor[0]) + colorIncs[0]];
currColor[1] = colorArr[arrayIndex(colorArr,currColor[1]) + colorIncs[1]];
currColor[2] = colorArr[arrayIndex(colorArr,currColor[2]) + colorIncs[2]];
document.getElementById(celem).style.backgroundColor = "#"+currColor.join("");
if (Math.abs(diffBetween(currColor[0],targetColor[0])) <= Math.abs(colorIncs[0])) {
currColor = splitColor("#"+targetColor.join(""));
document.getElementById(celem).style.backgroundColor = "#"+targetColor.join("");
stopInt()
}
}
function arrayIndex(arr,check){
for (var i=0;i<=arr.length;i++)
{
if (arr[i] === check) { return i; }
}
return false;
}
function diffBetween(c1,c2){
var num1 = arrayIndex(colorArr,c1);
var num2 = arrayIndex(colorArr,c2);
return num2-num1;
}
function splitColor(color){
return [color.substring(1,3),color.substring(3,5),color.substring(5,7)];
}
function colorToHex(nhcolor) {
if (nhcolor.substr(0, 1) === '#') {
return nhcolor;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(nhcolor);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
}
The script can be viewed in action he http://www.webskethio.com/websites/index.php I have a javascript slideshow and I can't seem to get the thumbnail motion tween to be smooth and consistent on all browsers. the entire script is on one single HTML file. here is a link to it: http://www.mediastream247.com/temp/ss9.html somebody please help. I have been trying for weeks to figure this out and have searched all over the internet, but still no solution. it's slow on IE and choppy on Firefox. On Safari it's OK, but could be better. **just realised I have put this in the wrong section
|
|||||||