Jump to content

Creating An Animated GIF


POWERPLAY27

Recommended Posts

Ok well I have used Powerpoint to create an animation, I then saved the file as a GIF.I have no idea if I did it correctly, because the GIF image does not animate: I want to animate this to put on my website: slide1ud.gif Each bullet point and text to fade on entrance one after the other.

Edited by POWERPLAY27
Link to comment
Share on other sites

Ok this is my javascript code

<script type="text/javascript">	  $('#webdesignerAnime p:gt(0)').hide();		setInterval(function(){  $('#webdesignerAnime p:first-child').fadeIn('slow')  .next('p').fadeOut('slow')  .end().appendTo('#webdesignerAnime');}, 1000);   </script>

This is my html code:

<div  id='webdesignerAnime'><p>Static/Dynamic Website Design/Re-Design</p><p>Bespoke Online Applications</p><p>Flash Animation Design Development</p><p>Database Creation & Communication</p><p>Content Management System (CMS)</p><p>Multimedia (CD-ROM / DVD-ROM / Blu Ray)</p><p>Ecommerce</p><p>Search Engine Optimisation</p></div>

The result: www.sign-technologies.net/webdesigner.aspx I want to adjust this code I found on another forum so that the list of text is fades in one at a time similiar as to what is going on within the red space on that webpage.What is needed in order to do this?

Edited by POWERPLAY27
Link to comment
Share on other sites

Create a counter and duration variable (this will make it easy to adjust timing), and make global

var cp=0;var duration=800;

You will have to use

$('#webdesignerAnime p').css({'visibility': 'hidden'});

AS if you use hide() will use display: none when finished, and the box will collapse, and grow as the content fadeIn. you need to create function to check current counter value against total number of paragraphs, if below total, loop again

$fadethis = (function ()		{		if(cp < $('#webdesignerAnime p').size())			{			$('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){			$fadethis();			});		cp++;		}				});

when you start the fadeIn function using '$fadethis'it will first reset css styling to display: none; (so fadeIn will work) and visibility: visible (prevent collapsing of outer box),then it should fadeIn, the queue function will wait for the fadein to complete, before running $fadethis function again, and at the same time the counter is incremented (cp++). All code

var cp=0;var duration=800;$(function(){	$('#webdesignerAnime p').css({'visibility': 'hidden'});		$fadethis = (function ()		{		if(cp < $('#webdesignerAnime p').size())			{			$('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){			$fadethis();			});		cp++;		}				});		$fadethis();					});

Edited by dsonesuk
Link to comment
Share on other sites

Thanks for the swift response, I went to sleep just after writing that and woke up just now, its on my mind lol. I've done it, thank you very much :good: , I actually did it the long way at first and inserted the code myself, but it didn't work so I just copied and pasted your code.With every new piece of coding I find I try to understand it, try to get the gist and feel for it thats why sometimes I just do it the long way. Now with the issue of bullet points, I am thinking maybe change the paragraphs into <li> list and have bullet points with the text, but then I won't be able to change the color of the bullet points themselves.So I want to create bullet poinst myself to go along with the text, you mentioned "just use span styled to be block element, define height:, width: background-color: and float left within paragraph" <span style="display:block; height: 50%; width: 50%; background-color: yellow; float:left;"> so basically something like this, shall I put this within each <p> element?

Edited by POWERPLAY27
Link to comment
Share on other sites

All code
var cp=0;var duration=800;$(function(){	$('#webdesignerAnime p').css({'visibility': 'hidden'});		$fadethis = (function ()		{		if(cp < $('#webdesignerAnime p').size())			{			$('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){			$fadethis();			});		cp++;		}				});		$fadethis();					});

There are a few problems with this code:
  • The $fadethis variable is undeclared.
  • Your lack of correct spacing makes the code very tricky to read. I initially thought that the $fadethis function was being called immediately inside the $fadethis function, which it isn't.
  • Why have you begun your function name with a dollar sign? This isn't PHP. Sure, do it yourself in your own code, but don't confuse beginners by trying to get them to do it
  • Why are you passing a function which calls $fadethis as a callback? Why not just pass $fadethis?
  • Your line with logic in seems needlessly complicated, and also wrong. How are you hiding the old elements? I suspect you meant to .hide() the elements (which is easier than calling .css() manually), then call .eq(), and then fade the specific element in.
  • Assuming the logic you implemented it correct, everything on the page will jump up a couple hundred pixels wfor a fraction of a second when slides change.
  • There is no way to restart the powerpoint.
  • User cannot manually advance the powerpoint, which would be nice.
  • Why are you hiding the elements using .css()? This is what .hide() was designed for, and it is better at it.

Link to comment
Share on other sites

  1. oh dear should i commit hari kiri now
  2. correct spacing what, are you going on about?
  3. see 1
  4. because you want it to proceed to next sibling element AFTER the fadeIn has been fully excuted, if this was not added it would instantly proceed to next with no delay
  5. using hide() has the drawback of finishing the fadeIn with display: none, this causes these 'p' elements to collapse, as the box container has no fixed height, it would collapse also, 'calling css manually? WHAT!
  6. never happens, and whay are we talking about powerpoint and slides all of a sudden, hello, huston drifting away here.
  7. again! why are we talking about powerpoint, NOT POWERPOINT, jquery undeestandee.
  8. ditto 7
  9. see 5
  10. you are what we call in the trade as a numpty.

You seem to have got confused with powerpoint,and i think the code he last posted, which did not provide the solution he wanted, which he clearly stated what he required was

The result: www.sign-technologies.net/webdesigner.aspxI want to adjust this code I found on another forum so that the list of text is fades in one at a time similiar as to what is going on within the red space on that webpage.What is needed in order to do this?
Edited by dsonesuk
Link to comment
Share on other sites

Now with the issue of bullet points, I am thinking maybe change the paragraphs into <li> list and have bullet points with the text, but then I won't be able to change the color of the bullet points themselves.So I want to create bullet poinst myself to go along with the text, you mentioned "just use span styled to be block element, define height:, width: background-color: and float left within paragraph" <span style="display:block; height: 50%; width: 50%; background-color: yellow; float:left;"> so basically something like this, shall I put this within each <p> element?
percentage is unlikely going to give correct result, use same size as font, i guess at 14px, and yes! place in paragraph element as they are targeted for fadein, therefore it will hide span as well, plus you have better control of positioning and alignment with text. Edited by dsonesuk
Link to comment
Share on other sites

I wondered what the ###### was going on then i noticed the background was image, and you use - top margin. You can get away with not using image completely use border-radius: download PIE.htc and it should work IE older browsers.

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/var cp=0, cp2=0;var duration=800;$(function(){    $('#webdesignerAnime p').css({'visibility': 'hidden'});        var $fadethis = (function ()        {        if(cp < $('#webdesignerAnime p').size())            {            $('#webdesignerAnime p').eq(cp).css({'visibility': 'visible' , 'display': 'none'}).fadeIn( duration , function(){            $fadethis();                        });        cp++;        }        });        $fadethis();});/*--*//*]]>*/</script><style type="text/css">#webdesignerAnime {background-color:#990000; width:460px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size: 14px; overflow:hidden;margin: 10px; margin-left: 53px;  border-radius: 12px; behavior: url(PIE.htc); /* MSIE fix */ }#webdesignerAnime p {    margin-bottom: 1em;    margin-left: 33px;    margin-top: 1.15em;}#webdesignerAnime p span {display:block; height: 14px; width:14px; float:left; background-color:#FFFF9A; margin-top: 1px; margin-right: 16px;}</style></head><body><div id="webdesignerAnime"><p><span></span>Static/Dynamic Website Design/Re-Design</p><p><span></span>Bespoke Online Applicatios</p><p><span></span>Flash Animation Design Development</p><p><span></span>Database Creation & Communication</p><p><span></span>Content Management System (CMS)</p><p><span></span>Multimedia (CD-ROM/DVD-ROM/BlueRay)</p><p><span></span>Ecommerce</p><p><span></span>Search Engine Optimisation (SEO)</p></div><!--<img src="http://img341.imageshack.us/img341/7582/slide1ud.gif" alt="" />--></body></html>

Link to comment
Share on other sites

If I do that doesn't work properly and also I put the span in css, but one of the block is marginally to the left of the other blocks. I can sort that out by inputing the span and the css properties individually in each line and adjusting the values, but of course would be easier to have just one line of css properties and all in line.

Edited by POWERPLAY27
Link to comment
Share on other sites

Ok now I'm having trouble lifting that text up. Text up now, trying to move to the left, but I'm stuck now. Fixed it, thanks, clear: both; helped me to do it with the overflow:hidden I was stuck with the margin-left positioning.

Edited by POWERPLAY27
Link to comment
Share on other sites

OK! you have to get rid excess tranparent border, and trim it to minimum, then either have to make it the size you require to accommodate the text, and use for background-image of #webdesignerAnime using css3 to adjust size to fit #webdesignerAnime, OR use as img and place in #webdesignerAnime give it position: absolute; left:0; top:0;right:0; bottom:0; this will cause the img to stretch to full width and height of #webdesignerAnime container.

Link to comment
Share on other sites

The clear both; is the best method to use right? I did it, its now working just as my flash file was.
What ever suits your needs, i personally would have used the border-radius method, no image, just background color, and rounded corners, using border-radius:, seem strange to create two separate elements, and merge one into the other with a minus top margin, but everyone have their own methods of achieving their final design effect.
Link to comment
Share on other sites

I will take your way into consideration, I didn't know I could do it that way per say, I just started now reading through a book on javascript, there is about 14 chapters and I'm now only on chapter 3 nearly on 4, lol. Haha just realised border-radius is a css property, haha still I didn't know I could do certain backgrounds this way!

Edited by POWERPLAY27
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...