/    Sign up×
Community /Pin to ProfileBookmark

Need some help/advice for animations

Copy linkTweet thisAlerts:
Apr 20.2012

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: [url]http://www.magentothemesworld.com/ma…ype/31805.html[/url]

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.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@justinbarneskinApr 22.2012 — Page not found

The requested url does not exist on this server.

I can only imagine some css opacity with javascript setIntervals
Copy linkTweet thisAlerts:
@MikkiauthorApr 22.2012 — Hmm. Must be something going on with their server. Try this location

http://www.templatemonster.com/magento-themes/31805.html

Thanks
Copy linkTweet thisAlerts:
@justinbarneskinApr 23.2012 — 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.
Copy linkTweet thisAlerts:
@MikkiauthorApr 23.2012 — 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.
Copy linkTweet thisAlerts:
@justinbarneskinApr 23.2012 — 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.
Copy linkTweet thisAlerts:
@mixingmelApr 23.2012 — 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?
Copy linkTweet thisAlerts:
@justinbarneskinApr 24.2012 — You could probly spend a day changing all the parameters here to get it right-
[code=html]
<!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>
[/code]
×

Success!

Help @Mikki 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.14,
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,
)...