Jednym z najczęściej wykorzystywanych efektów na stronie jest zanikanie i pojawianie się elementów, tekstów. Można do tego wykorzystać jakiś framework javascript np. jQuery lub małą funkcję bez potrzeby ładowania całej biblioteki. Poniżej znajduje się kod.
[sourcecode language=”javascript” collapse=”false”]
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.elem.si);
}else{
var value = Math.round(this.alpha + ((this.target – this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = ‘alpha(opacity=’ + value + ‘)’;
this.alpha = value
}
}
}
}();
[/sourcecode]
Funkcję wykorzystujemy w następujący sposób:
[sourcecode language=”javascript” collapse=”false”]
fadeEffect.init(‘fade’, 1, 50) // fade in the "fade" element to 50% transparency
fadeEffect.init(‘fade’, 1) // fade out the "fade" element
[/sourcecode]
Przykład:
