Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Nov 26, 2013, 11:57 AM   #1
Figory
macrumors member
 
Join Date: May 2004
Is there a way to pause a gif in my website?

I created a basic gif and included it into the rapid weaver site I am building. However I really want to be able to pause the gif on hover

Is this possible? I'd be really grateful for any info

my test site is here where you can see the gif

THANKs for any help!
Figory is offline   0 Reply With Quote
Old Nov 26, 2013, 12:43 PM   #2
Apple Key
macrumors 6502a
 
Apple Key's Avatar
 
Join Date: Jan 2012
Quote:
Originally Posted by Figory View Post
I created a basic gif and included it into the rapid weaver site I am building. However I really want to be able to pause the gif on hover

Is this possible? I'd be really grateful for any info

my test site is here where you can see the gif

THANKs for any help!
I'm not sure if this is possible. If it is possible, it would be pretty complex and would require some custom javascript programming.

A simpler way to do this would be to generate individual images and have the images cycle using a jQuery plugin. Then have the animation stop when you hover over an image.

Here is one plugin that could do what I've described. You would need to turn off any effects so that the animation is seamless. Also adjust the speed, of course to match your animated gif.

http://jquery.malsup.com/cycle/
http://jquery.malsup.com/cycle/none.html
http://jquery.malsup.com/cycle2/

Let me know if you have any questions. Hope this helps.
__________________
You know what they say... once you go Mac you ain't never gonna go back.
Apple Key is offline   0 Reply With Quote
Old Nov 26, 2013, 12:45 PM   #3
Darth.Titan
macrumors 68020
 
Darth.Titan's Avatar
 
Join Date: Oct 2007
Or, you could create a new image from a single frame, and change the animated gif to the still image on hover.
Darth.Titan is offline   0 Reply With Quote
Old Nov 26, 2013, 12:50 PM   #4
Apple Key
macrumors 6502a
 
Apple Key's Avatar
 
Join Date: Jan 2012
Quote:
Originally Posted by Darth.Titan View Post
Or, you could create a new image from a single frame, and change the animated gif to the still image on hover.
You would need to make sure the animation has finished loading and then programmatically measure which frame of the animation it is on (by setting the timing so that it knows which frame it's on). Then once the user has moved their mouse off of that area, you would need a way for the animation to begin again from the frame which was last shown, which I believe, is not something that can be controlled via javascript.

Unless I'm totally over thinking it and there is a much simpler way.
__________________
You know what they say... once you go Mac you ain't never gonna go back.
Apple Key is offline   0 Reply With Quote
Old Nov 26, 2013, 02:45 PM   #5
Darth.Titan
macrumors 68020
 
Darth.Titan's Avatar
 
Join Date: Oct 2007
Quote:
Originally Posted by Apple Key View Post
You would need to make sure the animation has finished loading and then programmatically measure which frame of the animation it is on (by setting the timing so that it knows which frame it's on). Then once the user has moved their mouse off of that area, you would need a way for the animation to begin again from the frame which was last shown, which I believe, is not something that can be controlled via javascript.

Unless I'm totally over thinking it and there is a much simpler way.
No, I absolutely would not do all that (Pretty sure what you described is not even possible). Not knowing how complex the OP's animated gif and requirements are I simply meant to provide a quicker alternative solution That could work perfectly well depending on the situation.

If the level of perfection you describe was required, your first suggestion would be the way to go.
Darth.Titan is offline   0 Reply With Quote
Old Nov 26, 2013, 04:08 PM   #6
nomade
macrumors member
 
Join Date: Dec 2006
It will work perfectly. Look at the cat at the bottom of this page : http://www.patrimoine-charlevoix.net/html/aine.html
It's a simple hover action.You could just inverse that behaviour.
Good luck.
nomade is offline   0 Reply With Quote
Old Nov 26, 2013, 04:58 PM   #7
Apple Key
macrumors 6502a
 
Apple Key's Avatar
 
Join Date: Jan 2012
Quote:
Originally Posted by Darth.Titan View Post
No, I absolutely would not do all that (Pretty sure what you described is not even possible). Not knowing how complex the OP's animated gif and requirements are I simply meant to provide a quicker alternative solution That could work perfectly well depending on the situation.

If the level of perfection you describe was required, your first suggestion would be the way to go.
I guess I kind of assumed the OP wanted it to resume from where it left off when the user stopped hovering over the image. The image flashes very quickly from one frame to the next, and that's why I thought it made sense to do that. It's 7 frames shown for 0.3 seconds per frame.

If not, then your solution would work well and be quick to implement, as you mentioned.
__________________
You know what they say... once you go Mac you ain't never gonna go back.
Apple Key is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Pause Photostream mlemonds OS X 0 Oct 27, 2012 09:22 PM

Forum Jump

All times are GMT -5. The time now is 01:01 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC