Dynamic animation

Traduci questa paginaMicrosoft® Translator

Passa il Mouse all'interno della finestra per selezionare lo script quindi "CTRL+C" (copia) mettete il cursore dove volete inserire Javascript nella vostra pagina Web, andate nel codice html e fate "CTRL+V" (incolla) dove vedete il cursore lampeggiante.

Esempio

DYNAMIC ANIMATION

Fai caso

alle parole che

cadono al loro posto

una alla volta!

E sono tutte linkabili :)

Fase 1 Scarica questo file con il nome "animate.js"

dynamicanimAttr = "dynamicanimation" animCancel = "skipanim" fpanimationPrefix = "fpAnim" animateElements = new Array() currentElement = 0 speed = 1 stepsZoom = 8 stepsWord = 8 stepsFly = 17 stepsSpiral = 16 stepsSpiralWord = 19 stepsElastic = 32 steps = stepsZoom step = 0 cornerPhase=0 outEffect=0 function remSuffix(str) { ind=str.indexOf("FP") str = str.substring(0,ind) return str } function dynAnimOut(el) { outEffect=1 dynAnimation(el) outEffect=0 } function dynAnimation(obj) { animateElements = new Array() var ms = navigator.appVersion.indexOf("MSIE") ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4) if(!ie4) { if((navigator.appName == "Netscape") && (parseInt(navigator.appVersion.substring(0, 1)) >= 4)) doc_els=document.layers else return } else doc_els=document.all if(outEffect && !ie4) return if(ie4) { for (index=document.all.length-1; index >= document.body.sourceIndex; index--) { el = document.all[index] if(outEffect && el != obj) continue if(outEffect) animationId = el.id.substring(9,el.id.length) else animationId = el.id.substring(6,el.id.length) animation=remSuffix(animationId) if(null != animation) { altcnt=0 if( animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord" || animation == "waveWords" || animation == "hopWords") { ih = el.innerHTML outString = "" i1 = 0 iend = ih.length while(true) { i2 = startWord(ih, i1) if(i2 == -1) i2 = iend outWord(ih, i1, i2, false, "", outEffect ? obj.id : el.id) if(i2 == iend) break i1 = i2 i2 = endWord(ih, i1) if(i2 == -1) i2 = iend if (animation == "waveWords") outWordAlt(ih, i1, i2, true, animation, altcnt) else outWord(ih, i1, i2, true, (outEffect ? "Out" : "") + animation, outEffect ? obj.id : el.id) if(i2 == iend) break i1 = i2 altcnt++ } document.all[index].innerHTML = outString document.all[index].style.posLeft = 0 document.all[index].setAttribute(animCancel, true) document.all[index].style.visibility="visible" } } } } i = 0 for (index=0; index < doc_els.length; index++) { el = doc_els[index] if(0 != el.id.indexOf(fpanimationPrefix)) continue if (ie4) { elprops=el.style scrollOffsetTop=document.body.scrollTop docHeight=document.body.offsetHeight docWidth=document.body.offsetWidth elW=100 elH=el.offsetHeight } else { elprops=el scrollOffsetTop=window.pageYOffset docHeight=window.innerHeight docWidth=window.innerWidth elW=el.clip.width elH=el.clip.height } if(outEffect) animationId = el.id.substring(9,el.id.length) else animationId = el.id.substring(6,el.id.length) animation=remSuffix(animationId) if(outEffect && (obj != el)) { if(el.SRCID != obj.id) continue } if (null != animation ) { if(ie4 && null!=el.getAttribute(animCancel, false)) continue if(!ie4) { elprops.posLeft=elprops.left elprops.posTop=elprops.top } el.startL=offsetLeft(el) if(animation == "flyLeft") { elprops.posLeft = -offsetLeft(el)-elW elprops.posTop = 0 } else if(animation == "flyRight" || animation=="elasticRight") { elprops.posLeft = -offsetLeft(el)+docWidth elprops.posTop = 0 } else if(animation == "flyTop" || animation == "dropWord") { elprops.posLeft = 0 elprops.posTop = scrollOffsetTop-offsetTop(el)-elH } else if(animation == "flyBottom" || animation == "elasticBottom") { elprops.posLeft = 0 elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight } else if(animation == "flyTopLeft") { elprops.posLeft = -offsetLeft(el)-elW elprops.posTop = scrollOffsetTop-offsetTop(el)-elH } else if(animation == "flyTopRight" || animation == "flyTopRightWord") { elprops.posLeft = -offsetLeft(el)+docWidth elprops.posTop = scrollOffsetTop-offsetTop(el)-elH } else if(animation == "flyCorner") { elprops.posLeft = docWidth*0.2-offsetLeft(el) elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight } else if(animation == "flyBottomLeft") { elprops.posLeft = -offsetLeft(el)-elW elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight } else if(animation == "flyBottomRight" || animation == "flyBottomRightWord") { elprops.posLeft = -offsetLeft(el)+docWidth elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight } else if(animation == "spiral") { elprops.posLeft = -offsetLeft(el)+docWidth elprops.posTop = scrollOffsetTop-offsetTop(el)+docHeight } else if((animation.indexOf("waveWords") != -1) || animation=="hopWords") { if(i) { prevEl=animateElements[i-1] elprops.r = offsetLeft(el)-prevEl.startL } else elprops.r = offsetLeft(el) } else if(animation == "wipeLR" || animation == "wipeMID") { if (ie4 && elprops.position=="absolute") { el.sizeW=el.offsetWidth elprops.clip="rect(0 0 0 0)" } else if (!ie4) { el.sizeW=el.clip.width el.clip.width=0 } } else if(animation == "wipeTB") { if (ie4 && elprops.position=="absolute") { elprops.clip="rect(0 0 0 0)" } else if(!ie4) { el.sizeH=el.clip.height el.clip.height=0 } } else if(animation == "zoomIn") { elprops.posLeft = 0 elprops.posTop = 0 } else if(animation == "zoomOut") { elprops.posLeft = 0 elprops.posTop = 0 } else { continue } if(!outEffect) { el.initLeft = elprops.posLeft el.initTop = elprops.posTop el.endLeft = 0 el.endTop = 0 elprops.visibility = "hidden" } else { el.initLeft = 0 el.initTop = 0 el.endLeft = elprops.posLeft el.endTop = elprops.posTop elprops.posTop = 0 elprops.posLeft = 0 } if(!ie4) { elprops.left=elprops.initLeft elprops.top =elprops.initTop } animateElements[i++] = el } } if(animateElements.length > 0) { if(outEffect) window.setTimeout("animate(1);", speed, "Javascript") else window.setTimeout("animate(0);", speed, "Javascript") } } function offsetLeft(el) { if(ie4) { x = el.offsetLeft for (e = el.offsetParent; e; e = e.offsetParent) x += e.offsetLeft return x } else { x = el.pageX return x } } function offsetTop(el) { if(ie4) { y = el.offsetTop for (e = el.offsetParent; e; e = e.offsetParent) y += e.offsetTop; return y } else { y = el.pageY return y } } function startWord(ih, i) { for(tag = false; i < ih.length; i++) { c = ih.charAt(i) if(c == '<') { if(ih.substring(i+1, i+4) == "IMG") return i; tag = true } if(!tag) return i if(c == '>') tag = false } return -1 } function endWord(ih, i) { nonSpace = false space = false img = false if(ih.charAt(i) == '<') { img = true i++; } while(i < ih.length) { c = ih.charAt(i) if(c != ' ') nonSpace = true if(img && c == '>') img = false; if(nonSpace && !img && c == ' ') space = true if(c == '<') return i if(space && c != ' ') return i i++ } return -1 } function outWord(ih, i1, i2, dyn, anim, srcID) { if(dyn) if(!outEffect) outString += "" else outString += "" outString += ih.substring(i1, i2) if(dyn) outString += "" } function outWordAlt(ih, i1, i2, dyn, anim, altcnt) { if(dyn) { if(altcnt%2) outString += "" else outString += "" } outString += ih.substring(i1, i2) if(dyn) outString += "" } function animate(animOut) { el = animateElements[currentElement] if(animOut) animationId = el.id.substring(9,el.id.length); else animationId = el.id.substring(6,el.id.length); animation=remSuffix(animationId) if (ie4) elprops=el.style else elprops=el if(!step && !animOut) elprops.visibility="visible" step++ if(animation == "spiral") { steps = stepsSpiral v = step/steps rf = 1.0 - v t = v * 2.0*Math.PI rx = Math.max(Math.abs(el.initLeft), 200) ry = Math.max(Math.abs(el.initTop), 200) elprops.posLeft = Math.ceil(-rf*Math.cos(t)*rx) elprops.posTop = Math.ceil(-rf*Math.sin(t)*ry) } else if(animation == "waveWordsL" || animation=="hopWords" || animation == "waveWords") { steps = stepsSpiralWord v = step/steps rf = (1.0 - v) t = v * 1.0*Math.PI elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r) elprops.posTop = Math.ceil(-rf*Math.sin(t)*elprops.r) } else if(animation == "waveWordsR") { steps = stepsSpiralWord v = step/steps rf = (1.0 - v) t = v * 1.0*Math.PI elprops.posLeft = Math.ceil(-rf*Math.cos(t)*elprops.r) elprops.posTop = Math.ceil( rf*Math.sin(t)*elprops.r) } else if(animation == "zoomIn") { steps = stepsZoom elprops.fontSize = Math.ceil(50+50*step/steps) + "%" elprops.posLeft = 0 } else if(animation == "zoomOut") { steps = stepsZoom fontSz=Math.ceil(100+200*(steps-step)/steps) + "%" elprops.fontSize = fontSz elprops.posLeft = 0 } else if(animation == "elasticRight") { steps = stepsElastic v = step/steps rf=Math.exp(-v*7) t = v * 1.5*Math.PI rx =Math.abs(el.initLeft) elprops.posLeft = rf*Math.cos(t)*rx elprops.posTop = 0 } else if(animation == "elasticBottom") { steps = stepsElastic v = step/steps rf=Math.exp(-v*7) t = v * 2.5*Math.PI ry =Math.abs(el.initTop) elprops.posLeft = 0 elprops.posTop = rf*Math.cos(t)*ry } else if(animation == "wipeLR") { steps = stepsElastic if(ie4 && elprops.position=="absolute") elprops.clip = "rect(0 "+ step/steps*100 +"% 100% 0)" else if (!ie4) { elprops.clip.right=step/steps*el.sizeW } } else if(animation == "wipeTB") { steps = stepsElastic if(ie4 && elprops.position=="absolute") elprops.clip = "rect(0 100% "+step/steps*el.offsetHeight+"px 0)" else elprops.clip.bottom=step/steps*el.sizeH } else if(animation == "wipeMID") { steps = stepsElastic if(ie4 && elprops.position=="absolute") { elprops.clip = "rect(0 "+el.sizeW/2*(1+step/steps)+"px 100% "+el.sizeW/2*(1-step/steps)+")" } else if(!ie4) { elprops.clip.right=el.sizeW/2*(1+step/steps) elprops.clip.left=el.sizeW/2*(1-step/steps) } } else if(animation == "flyCorner") { if(!cornerPhase) { steps = stepsElastic/2 v = step/steps rf=Math.exp(-v*7) t = v * 2.5*Math.PI ry =Math.abs(el.initTop) elprops.posTop = rf*Math.cos(t)*ry } else { steps = stepsFly dl = el.initLeft / steps elprops.posLeft = elprops.posLeft - dl elprops.posTop = 0 } } else { steps = stepsFly if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord") steps = stepsWord dl = (el.endLeft - el.initLeft) / steps dt = (el.endTop - el.initTop) / steps elprops.posLeft = elprops.posLeft + dl elprops.posTop = elprops.posTop + dt } if (step >= steps) { if(!(animation == "wipeLR" || animation == "wipeTB" || animation == "wipeMID" || (animation == "flyCorner" && !cornerPhase))) { elprops.posLeft = el.endLeft elprops.posTop = el.endTop } if(animOut) { elprops.visibility="hidden" } step = 0 if(animation=="flyCorner" && !cornerPhase) cornerPhase=1 else { cornerPhase=0 currentElement++ } } if(!ie4) { elprops.left=elprops.posLeft elprops.top =elprops.posTop } if(currentElement < animateElements.length) { if(animOut) window.setTimeout("animate(1);", speed, "Javascript") else window.setTimeout("animate(0);", speed, "Javascript") } else currentElement=0 } function rollIn(el) { var ms = navigator.appVersion.indexOf("MSIE") ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4) if(ie4) { el.initstyle=el.style.cssText;el.style.cssText=el.fprolloverstyle } } function rollOut(el) { var ms = navigator.appVersion.indexOf("MSIE") ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4) if(ie4) { el.style.cssText=el.initstyle } } function clickSwapStyle(el) { var ms = navigator.appVersion.indexOf("MSIE") ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4) if(ie4) { ts=el.style.cssText el.style.cssText=el.fprolloverstyle el.fprolloverstyle=ts } } function clickSwapImg(el) { if(document.all || document.layers) { ts=el.src el.src=el.lowsrc el.lowsrc=ts } }

Trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <Head> </Head>

Fase 2:

Trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <Body> </Body>

Fase 3:

Copia quanto segue e fai riferimento a quanto segue .
Sostituisci il mio testo con il tuo , puoi aggiungerne quanto ne vuoi .
Ogni riga puo' diventare un link attivo dove puoi specificare anche il target.
Se levi il riferimento <a href=...></a> elimini la proprieta' di link attivo.

DYNAMIC ANIMATION <a href="#" target="">Fai caso</a> <a href="#" target="">alle parole che</a> <a href="#" target="">cadono al loro posto</a> <a href="#" target="">una alla volta!</a> <a href="#" target="">E sono tutte linkabili :)</a>