Need some help/advice for animations

**Mikki** · 04-20-2012 10:44 AM

Hi folks! I'm in need of some input. I have a client who has their heart set on one thing, and I'm not sure the best way to approach the project. The short is, they are going to be doing an e-commerce site, using Magento, and are set on this template: http://www.magentothemesworld.com/ma...ype/31805.html

I don't want to use Flash in the site, but the client is dead on committed to having their logo animated in the manner of the template example (i.e. 'stitched'). Is that type of animation even possible outside of Flash? If it IS possible, does anyone have any recommendations on who could do it (it's out of my scope of capabilities).

Thanks for any help or direction you can point me in.

**justinbarneskin** · 04-21-2012 10:33 PM

Page not found
The requested url does not exist on this server.

I can only imagine some css opacity with javascript setIntervals

**Mikki** · 04-22-2012 07:41 AM

Hmm. Must be something going on with their server. Try this location
http://www.templatemonster.com/magen...mes/31805.html

Thanks

**justinbarneskin** · 04-22-2012 11:12 PM

Well, the animations wouldn't be a trick. But you'd have to detect which plugins are available for the audios. If audio is the deal breaker, learn Flash.

**Mikki** · 04-23-2012 07:08 AM

Thanks for your reply. No audio is needed, I just need the animation. I'm encouraged that it can be done. Any thoughts on where I could look to find someone who can do it? It's out of my scope of capabilities. Thanks.

**justinbarneskin** · 04-23-2012 03:36 PM

Its probly out of my scope of sustaining interest. Post a couple good images to work with and maybe someone will find time to do something for ya.

**mixingmel** · 04-23-2012 05:29 PM

You could accomplish something similar in an animated gif version but you are never going to get it to look and load that smoothly. I would just use adobe flash 8 to manipulate the current flash that comes with this template verses starting to build this same type of thing from scratch. Did you purchase this template? It also depends on what their logo is and how much different you want it from what is currently in that template. Are you wanting the images in the flash to be different and then the animation to not reveal the jd logo but their logo?

**justinbarneskin** · 04-23-2012 08:12 PM

You could probly spend a day changing all the parameters here to get it right-

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>ani</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
.ind{position:absolute; top:0px;left:0px; }
.int{position:absolute; top:2px;left:0px;}
}

</STYLE>

<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY onload="getDx()">
<div id="dummy">dummy div</div>

<SCRIPT type="text/javascript">

var imgs=['http://i.imgur.com/VCnQw.jpg','http://i.imgur.com/eQYC3.png']
var n=10;
for(i=0;i<imgs.length;i++){
	document.write('<div class="anim" id="d'+i+'" style="float:left;position:relative" onmouseover="drip(this,drips=true)" onmouseout="drip(this,drips=false)"><img src="'+imgs[i]+'" style="filter:alpha(opacity=10);opacity:0.1"></div>')	}

function getDx(){
var d=document.getElementsByTagName('div'); var dinx=0;
 for(i=0;i<d.length;i++){
	if(d[i].className=='anim'){var nd=''; var dw=d[i].offsetWidth; var dh=d[i].offsetHeight; var m=0; 
		for(j=0;dw>10 || dh>10;j++){dw-=n; dh-=n;
			m+=n;	var ni=document.createElement("div");
  ni.innerHTML='<img class="ind" style="clip:rect('+m+'px,'+dw+'px,'+dh+'px,'+m+'px);" src="'+imgs[dinx]+'" >';
	d[i].appendChild(ni)
		}
  dinx++
	}
 }
}
var drips;  var dav;	 var dp;
function drip(ths){	dav=ths.getElementsByTagName('div'); 
	drips?ddp(dvd=0,io=true):ddp(dvd=0,io=false);

}
function ddp(dvd,io){	
	if(io && dvd<dav.length-1){dav[dvd].className='int'; 	 dvd++; dp?clearTimeout(dp):true; dp=setTimeout("ddp("+dvd+","+io+")",20)	}
	else if( dvd<dav.length-1){dav[dvd].className='ind'; 	 dvd++; dp?clearTimeout(dp):true; dp=setTimeout("ddp("+dvd+","+io+")",20)	}
}

</SCRIPT>

</BODY></HTML>

Thread: Need some help/advice for animations

Thread Tools

Display

Need some help/advice for animations

Not really without flash at least not that smooth

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions