Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login



Reply
How do I spin my logo?
Old 06-16-2012, 07:40 AM How do I spin my logo?
PN-Matt's Avatar
Super Talker

Posts: 119
Location: London/Oxford, England
Trades: 0
I'd like to get this logo spinning.

http://mixedmatt.co.uk/villaringheim/images/logo.png

http://mixedmatt.co.uk/villaringheim/

I've tried looking for scripts can't find something that works!

Thanks
__________________

Please login or register to view this content. Registration is FREE
PN-Matt is offline
Reply With Quote
View Public Profile Visit PN-Matt's homepage!
 
 
Register now for full access!
Old 06-16-2012, 07:42 AM Re: How do I spin my logo?
chrishirst's Avatar
Defies a Status

Posts: 43,963
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Make it into a animated GIF
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-16-2012, 08:58 AM Re: How do I spin my logo?
PN-Matt's Avatar
Super Talker

Posts: 119
Location: London/Oxford, England
Trades: 0
Been searching about how to do this in gimp. I can only find old tutorials. Any pointers?

Thanks for your help
__________________

Please login or register to view this content. Registration is FREE
PN-Matt is offline
Reply With Quote
View Public Profile Visit PN-Matt's homepage!
 
Old 06-16-2012, 11:15 AM Re: How do I spin my logo?
chrishirst's Avatar
Defies a Status

Posts: 43,963
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
http://www.gimp.org/tutorials/Simple_Animations/


And there are lots of "walk throughs" on YouTube if you like that kind of thing.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-16-2012, 12:51 PM Re: How do I spin my logo?
Giselle's Avatar
"Happy Trails"

Posts: 11,260
Name: Giselle
Location: Washington State
Trades: 0
Hello Matt,

I know what you are looking for and I believe it was a JavaScript with a spinning logo, the bad news I can't find it now. I will keep looking though.....

Did find this current tutorial for Gimp:

How to Make a Spinning GFX in Gimp

Here's an old tutorial for Photoshop and Paint Shop Pro putting a spin on a globe, which might give you some ideas:

Putting a spin on the World
Giselle is online now
Reply With Quote
View Public Profile
 
Old 06-16-2012, 03:55 PM Re: How do I spin my logo?
lynxus's Avatar
Awesomeo-Maximo

Posts: 1,625
Location: UK
Trades: 1
You could try HTML5

http://www.vectorlight.net/html5/tut..._an_image.aspx
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE


lynxus is offline
Reply With Quote
View Public Profile Visit lynxus's homepage!
 
Old 06-16-2012, 04:29 PM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
Gif animation won't give you the transparency you probably want.
I would do it with APNG, but of course not all browsers read it (Chrome and IE for example) and file size is greatly increased.

You can do it with javascript.
Set fixed height to your logo and just animate width to 0 and back.

http://jsfiddle.net/miki86/qqzpG/1/

Last edited by miki86; 06-16-2012 at 04:31 PM..
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-17-2012, 12:14 PM Re: How do I spin my logo?
chrishirst's Avatar
Defies a Status

Posts: 43,963
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Quote:
Gif animation won't give you the transparency you probably want.
????

GIF supports transparency.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-17-2012, 01:03 PM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
Sure it does.



Notice the white color around the edges?
That's single color, gif transparency can't be compared to png.
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-17-2012, 01:34 PM Re: How do I spin my logo?
chrishirst's Avatar
Defies a Status

Posts: 43,963
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Yep I know that, and had you qualified your statement to make it accurate I would not have made the comment.
So saying;
Quote:
Gif animation won't give you the alpha|gradient transparency you probably want.
would have been better as it is then clear you are not refering to the "indexed colour transparency" that GIF encoded images DO support.

Being precise with what you say and making statements that are free from ambiguity and thus not open to mis-interpretation may seem pedantic, but it prevents others from being misled now and in the future.

AND PNG-8 format images ALSO only allow for indexed color transparency so can suffer from the same problem of leaving "artifacts" in the transparent areas and where colours are "dithered".
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 06-17-2012, 08:10 PM Re: How do I spin my logo?
Giselle's Avatar
"Happy Trails"

Posts: 11,260
Name: Giselle
Location: Washington State
Trades: 0
Well done Miki, very very nice JavaScript!!

Matt, I tried that Gimp link tutorial I supplied you with, the results weren't that great, in fact just awful, perhaps you might have better luck. And I am not a newbie working with animation......

Nice example Miki showing the difference between a gif and png.
Giselle is online now
Reply With Quote
View Public Profile
 
Old 06-18-2012, 03:57 AM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
Chris i agree with you but you forgot that im not English

Thanks Giselle.
Another good example here:
http://www.instantfundas.com/2009/07...mated-png.html

Give it a shoot with APNG, im guessing the file size will be over 100kb with logo of that size.
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-18-2012, 06:59 AM Re: How do I spin my logo?
PN-Matt's Avatar
Super Talker

Posts: 119
Location: London/Oxford, England
Trades: 0
Thanks all. I've been trying to use jsfiddle as I believe javascript would be a better option then image editing.

However, How do I go about putting that javascript code into the index.html. With a copy and paste it doesn't work. I know there must be something else to it. Sorry for asking a basic question!
__________________

Please login or register to view this content. Registration is FREE
PN-Matt is offline
Reply With Quote
View Public Profile Visit PN-Matt's homepage!
 
Old 06-18-2012, 08:02 AM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
If you are trying my code, which is written in mootools framework, you need to include it in your html.

http://mootools.net/download
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-18-2012, 08:12 AM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
Ahh i see you already have jquery, there's gonna be a conflict.

Either use "no conflict" or write the code with jquery.
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-18-2012, 08:44 AM Re: How do I spin my logo?
PN-Matt's Avatar
Super Talker

Posts: 119
Location: London/Oxford, England
Trades: 0
I download mootools with compatability. Upload to root and my inserted javascript in the index.html should look like whats attached?

Thank you,
Attached Images
File Type: png mycode.PNG (12.6 KB, 4 views)
__________________

Please login or register to view this content. Registration is FREE
PN-Matt is offline
Reply With Quote
View Public Profile Visit PN-Matt's homepage!
 
Old 06-18-2012, 09:21 AM Re: How do I spin my logo?
miki86's Avatar
Extreme Talker

Posts: 239
Location: print_r($serbia);
Trades: 0
Yes but you need to set the HTML to look like mine.
Trick is to wrap the logo image with a div which has text-aligned to center, otherwise your logo won't "spin" correctly.

http://jsfiddle.net/miki86/qqzpG/
miki86 is offline
Reply With Quote
View Public Profile
 
Old 06-18-2012, 10:51 AM Re: How do I spin my logo?
Giselle's Avatar
"Happy Trails"

Posts: 11,260
Name: Giselle
Location: Washington State
Trades: 0
Don't mean to butt into your conversation on the coding Matt and Miki....

I just had to say a big thank you Miki for supplying the link on those APNG tools! This was a new one on me and bookmarked the url. This means when all the browsers will accept an APNG, one won't have to worry about a patterned/texture background, one can forget the dithering baloney and hoping the animated graphic looks half way decent as a gif.

I shall look forward to seeing your website Matt with the spinning logo in place.....
Giselle is online now
Reply With Quote
View Public Profile
 
Old 06-18-2012, 09:05 PM Re: How do I spin my logo?
Junior Talker

Posts: 3
Trades: 0
So much hassle!

Just use this: code.google.com/p/jqueryrotate/

Even supports IE6

You are welcome.
YemSalat is offline
Reply With Quote
View Public Profile
 
Old 06-18-2012, 09:32 PM Re: How do I spin my logo?
PN-Matt's Avatar
Super Talker

Posts: 119
Location: London/Oxford, England
Trades: 0
Quote:
Originally Posted by NewEra View Post
how do you want to spin it ?? if you want to rotate it then you could use this version 3, there is a white bar at the bottom of the interface that controls your Keying information. Pretty easy...

1. Select your logo.
2. Hit the "animate" button so that it turns red.
3. Move to the end of your animation.
4. Rotate your logo. (any amount will work, just need it to set the key.)
5. Go down to the white bar at the bottom and right click on the key (little ellipse looking thing) and change the amout of rotation to 360.
6. Done.

In version 2.5, you'll have to open Track View. It is at the top of the screen. Find your logo in the menu, find rotation and adjust the keys manually.
Version 2.5 of what?

I'm sorry guys I can't get anything to work. I apologise for being such a idiot! Anyone make this any simpler? or have files I can just download and tweak to make this work?

Thank you,
__________________

Please login or register to view this content. Registration is FREE
PN-Matt is offline
Reply With Quote
View Public Profile Visit PN-Matt's homepage!
 
Reply     « Reply to How do I spin my logo?

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.56233 seconds with 12 queries