/    Sign up×
Community /Pin to ProfileBookmark

Random Pictures Popping out

Copy linkTweet thisAlerts:
Feb 22.2013

I am not really good with JavaScript, and I am trying to make a site for my friend’s business. I am making like a comic book website for him, he draws. He would like to have like characters from his story pop out randomly for 30 seconds but just the picture’s popping out the side and randomly change. So like you on the site and from the middle right it just opens up for 30 seconds, closes and 2 minutes later a different picture of a different character comes out. This might be already done for a site but I can not find anything like this and I certainly am not creative enough to think how to do it.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsFeb 22.2013 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>

<script type="text/javascript">
<!--
// Cartoon PopUp (22-Febuary-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcCartoonPopUp={

init:function(o){
var ld=o.ImageLoad,ary=o.ImageArray,a,z0=0;
for (;z0<ary.length;z0++){
a=[document.createElement('IMG'),new Image(),0,0];
a[1].src=ary[z0][0];
a[0].style.position='absolute';
a[0].style.visibility='visible';
a[0].style.borderWidth='0px';
ary[z0][1]?a[0].title=ary[z0][1]:null;
ary[z0]=a.concat(ary[z0]);
}
this.load(o,ary,new Date(),(typeof(ld)=='number'?ld:5)*1000);
},

load:function(o,ary,d,ms){
clearTimeout(o.to);
for (var oop=this,w,h,z0=0,z1=0;z0<ary.length;z0++){
if ((ary[z0][1]&&ary[z0][1].width<40)&&new Date()-d<ms){
o.to=setTimeout(function(){ oop.load(o,ary,d,ms); },200);
return;
}
}
for (;z1<ary.length;z1++){
if (ary[z1][1]&&ary[z1][1].width<40){
o.obj.removeChild(ary[z1][0]);
ary.splice(z1--,1);
}
else {
ary[z1][0].src=ary[z1][1].src;
w=ary[z1][1].width;
h=ary[z1][1].height;
ary[z1][2]=[h/2,w/2,h/2,w/2];
ary[z1][3]=[0,w,h,0];
}
}
if (ary[0]){
oop.ready(o,ary);
}
},

ready:function(o,ary){
var ms=o.Animate,ms=typeof(ms)=='number'&&ms>20?ms:1000,show=o.ShowEvery,show=(typeof(show)=='number'&&show>ms/1000*2?show:ms*1000*4)*1000,hide=o.HideAfter,hide=(typeof(hide)=='number'&&hide>ms/1000*2?hide:ms*1000*4)*1000,msk=document.createElement('DIV'),a=document.createElement('A'),mk,z0=0;
msk.style.position='fixed';
msk.style.visibility='hidden';
msk.style.zIndex='202';
mk=msk.cloneNode(false);
mk.style.bottom='0px';
mk.style.width='0px';
mk.style.right='0px';
mk.style.height='0px';
document.body.appendChild(mk);
msk.style.left='0px';
msk.style.top='0px';
msk.style.width='100%';
msk.style.height=mk.offsetTop+'px';
document.body.appendChild(msk);
msk.appendChild(a);
o=this;
o.msk=msk;
o.mk=mk;
o.a=a;
o.ary=ary;
o.lgth=ary.length;
o.ms=ms;
o.show=show/2;
o.hide=hide/2;
o.to=setTimeout(function(){ o.pop(); },o.show*2);
},


pop:function(){
var o=this,nu=Math.floor(Math.random()*o.lgth);
o.msk.style.height=o.mk.offsetTop+'px';
o.ary[nu][0].style.left=Math.random()*(o.msk.offsetWidth-o.ary[nu][3][1])+'px';
o.ary[nu][0].style.top=Math.random()*(o.msk.offsetHeight-o.ary[nu][3][2])+'px';
o.a.removeAttribute('href');
o.ary[nu][6]?o.a.href=o.ary[nu][6]:null;
o.a.appendChild(o.ary[nu][0]);
o.animate(o,o.ary[nu],o.ary[nu][2],o.ary[nu][3],new Date(),o.ms,true);
},

animate:function(o,ary,f,t,srt,mS,nxt){
clearTimeout(ary[1]);
var oop=this,ms=new Date().getTime()-srt,nu,n=[],z0=0;
for (;z0<4;z0++){
nu=(t[z0]-f[z0])/mS*ms+f[z0];
if (isFinite(nu)){
n[z0]=Math.max(nu,0);
}
}
ary[0].style.clip='rect('+n[0]+'px,'+n[1]+'px,'+n[2]+'px,'+n[3]+'px)';
if (ms<mS){
ary[1]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nxt); },10);
}
else {
ary[0].style.clip='rect('+t[0]+'px,'+t[1]+'px,'+t[2]+'px,'+t[3]+'px)';
oop.to=nxt===true?setTimeout(function(){ oop.animate(o,ary,t,f,new Date(),o.ms,false); },o.hide+(Math.random()*o.hide)):setTimeout(function(){ oop.pop(); },o.show+(Math.random()*o.show));
nxt===false?oop.a.removeChild(ary[0]):null;
}
}



}

zxcCartoonPopUp.init({
ImageArray:[ //(optional) anarry.arrays defining the image src, title and link href. (number, default = Animate*4)
// field 0 = image src.
// field 1 = image title.
// field 1 = image link href.
['http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif','Cartoon 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif','Cartoon 2','http://www.vicsjavascripts.org.uk/'],
['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif','Cartoon 3'],
['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif','Cartoon 4']
],
ImageLoad:5, //(optional) the time allowed to load all images in seconds. (number, default = 5 seconds)
Animate:1000, //(optional) the animation duration in milli seconds. (number, default = 1000 milli seconds)
ShowEvery:5, //(optional) the show period in seconds. (number, default = Animate*4)
HideAfter:5 //(optional) the show period in seconds. (number, default = Animate*4)
})
//-->
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@daddycardonaauthorFeb 23.2013 — This is almost what I want I, I was just thinking this might be what he wants. I wanted like a picture to slide on and then go back like in a picture frame, but this is much cooler ?
×

Success!

Help @daddycardona spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...