Printable View
Hi,
I've just become a bit of a 'fan' of the ludicrously cute Canadian comedian Katherine Ryan and I was looking at her site today and really liked the changing text on her 'Latest News' bit.
http://katherineryan.co.uk/
I'm sure I've seen something like this on DD but can't remember what it would come under.
Any help'd be greatly appreciated. Cheers
Jay Dog
try
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#studio {
position:relative;width:500px;height:180px;text-Align:center;border:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<input type="button" name="" value="Next" onclick="zxcColorFader.Next('studio',1);" />
<input type="button" name="" value="Back" onclick="zxcColorFader.Next('studio',-1);" />
<input type="button" name="" value="GoTo 0" onclick="zxcColorFader.GoTo('studio',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcColorFader.GoTo('studio',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcColorFader.GoTo('studio',2);" />
<br />
<div id="studio" onmouseover="zxcColorFader.Pause('studio');" onmouseout="zxcColorFader.Auto('studio');" >
<div class="testimonial">
<blockquote>
<div class="content"><h3>Katherine Ryan is certainly one to watch. She is innovative, original and hugely charming. Her material never crosses into lazy cliche’s but instead provides an insightful, savvy and most importantly massively entertaining evening of comedy.</h3></div>
<div class="author">Clare Boswell</div>
<small><div class="extra">The Public Reviews</div></small></blockquote>
</div>
<div class="testimonial">
<blockquote>
<div class="content"><h3>A performer with a distinctive comic voice</h3></div>
<div class="author">The Telegraph</div>
<small><div class="extra">August 2012</div></small></blockquote>
</div>
<div class="testimonial">
<div class="content"><h3>Panel 2</h3></div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Color Fader (11-August-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/
var zxcColorFader={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);
if (o.a[n]&&n!=o.n){
this.rotate(o,n);
}
}
},
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
Auto:function(id,ms){
var o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ zxcColorFader.rotate(o,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var id=o.ParentID,sc=this.hex(o.StartColor),ec=this.hex(o.EndColor),ms=o.Animate,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),m=!sc||!ec;
if (p){
var clds=p.childNodes,c,z0=0;
o.id=id;
o.sc=m?[100]:this.rgb(sc);
o.ec=m?[0]:this.rgb(ec);
o.m=m?1:3;
o.a=[];
for (;z0<clds.length;z0++){
c=clds[z0];
if (c.nodeType==1){
c.style.position='absolute';
c.style.left=(p.offsetWidth-c.offsetWidth)/2+'px';
c.style.top=(p.offsetHeight-c.offsetHeight)/2+'px';
c.style.visibility=o.a.length>0?'hidden':'visible';
o.a.push([c]);
}
}
o.l=o.a.length-1;
o.n=0;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.h=typeof(h)=='number'&&h>20?h:o.ms*4;
this['zxc'+id]=o;
typeof(s)=='number'&&s>=0?this.Auto(id,s):null;
}
},
rotate:function(o,a){
this.Pause(o.id);
o.auto=a===true;
var n=o.auto?o.n+o.ud:a;
n=n<0?o.l:n>o.l?0:n;
this.animate(o,o.a[o.n],o.sc,o.ec,new Date(),o.ms);
o.n=n;
},
animate:function(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=[];
for (var z0=0;z0<o.m;z0++){
n[z0]=(t[z0]-f[z0])/mS*ms+f[z0];
n[z0]=isFinite(n[z0])?n[z0]:t[z0];
}
o.m==3?this.c(a[0],n):this.opc(a[0],n[0]);
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
}
else {
a[0].style.visibility='hidden';
a=o.a[o.n][0];
o.m==3?oop.c(a,o.sc):oop.opc(a,o.sc);
a.style.visibility='visible';
o.auto?this.Auto(o.id,o.h):null;
}
},
c:function(o,c){
o.style.color='rgb('+c+')';
},
opc:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
},
hex:function(h){
return typeof(h)=='string'&&h.length==7?h:false;
},
rgb:function(h){
return [parseInt(h.substring(1,3),16),parseInt(h.substring(3,5),16),parseInt(h.substring(5,7),16)];
}
}
zxcColorFader.init({
ParentID:'studio', // the unique ID name of the parent DIV. (string)
StartColor:'#000000', //(optional) the HEX value of the start color. (hex string, default = fade)
EndColor:'#FFFFFF', //(optional) the HEX value of the end color. (hex string, default = fade)
Animate:1000, //(optional) the animation duration in millsec. (number, default = 1000)
AutoHold:2000, //(optional) the auto rotation 'hold' delay in millsec. (number, default = Animate*4)
AutoStart:2000 //(optional) the auto rotation 'start' delay in millsec. (number, default = no Auto Start)
})
/*]]>*/
</script>
</body>
</html>