www.webdeveloper.com
Results 1 to 8 of 8

Thread: Need some help/advice for animations

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Need some help/advice for animations

    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.

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    Page not found
    The requested url does not exist on this server.

    I can only imagine some css opacity with javascript setIntervals

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    Hmm. Must be something going on with their server. Try this location
    http://www.templatemonster.com/magen...mes/31805.html

    Thanks

  4. #4
    Join Date
    Oct 2006
    Posts
    939
    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.

  5. #5
    Join Date
    Apr 2012
    Posts
    3
    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.

  6. #6
    Join Date
    Oct 2006
    Posts
    939
    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.

  7. #7
    Join Date
    Apr 2012
    Posts
    11

    Not really without flash at least not that smooth

    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?

  8. #8
    Join Date
    Oct 2006
    Posts
    939
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles