Community Forums › Forums › Archived Forums › Design Tips and Tricks › hover effects, etc.: speed setting
Tagged: css, hover effect, setting, speed
- This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by
Tom.
-
AuthorPosts
-
May 17, 2014 at 12:45 pm #105637
jhguynn
MemberSurely there must be a setting somewhere (javascript?, css?) that governs how quickly hover effects, image swap-outs, etc., occur in the Genesis environment. I've tried to use an image sprite with a hover effect css to make a snappy image transition on mouseover, but it's so damn slow to change on mouseover it just looks stupid. What should occur lightning quick, i.e. imperceptibe to the naked human eye, is anything but.
I find this to be true of the usual native Genesis hover effects for buttons, social icons, etc. on mouse over. It's just too damn slow.
How can I improve the performance of these effects in Genesis?
May 17, 2014 at 11:11 pm #105697Tom
ParticipantThe effect and timing will depend on the CSS design of your theme. It is not governed by "the Genesis environment".
"Hover" is a pseudo class selector for images, links, buttons, etc. and can take on many properties. Some of these are controlled by CSS transitions, animation effects, etc..
Good reading starts here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 17, 2014 at 11:28 pm #105698jhguynn
MemberThe above mentioned properties re: hover effects being sluggish pertain to the Studiopress themes I'm using, such as Executive Pro and Enterprise Pro. Still looking for some clues to get better performance with these effects.
May 18, 2014 at 12:23 am #105703jhguynn
Memberan added thought: the troubles I'm having are specific to Studiopress themes. Watch this video for a comparison between two themes, one Studiopress and one not:
Hover effect: Comparison of two themes: Enterprise Pro and Flexsqueeze
FYI: The exact same code and css is used for both.
May 18, 2014 at 12:55 am #105707Tom
ParticipantI would ask you to post links to both sites, but I can see that one is on a local DEV setup. However, If you can do this it would be appreciated.
As I said:
The effect and timing will depend on the CSS design of your theme. It is not governed by “the Genesis environment”.
The effect show in the 'flexsqueeze' site appears to be using CSS or javascript animations and/or transitions.Beyond that, it is unlikely, if not impossible, for two themes from two different shops using two different frameworks to use "the exact same code". It's simply not directly transferable; there has to be a translation or re-mapping to the markup as defined from one theme to the other, If you are using a plugin to achieve the effects, perhaps the author could explain why his plugin behaves differently from one theme to another, It seems kind of a moot point as those images and animations are not currently visible on your site. ( http://oi60.tinypic.com/1xz0ie.jpg )
For your current Enterprise Pro theme: it uses the mildest of transition effects as follows. You could modify this to use broader animations and transitions or add javascript effects.
a, button, input:focus, input[type="button"], input[type="reset"], input[type="submit"], textarea:focus, .button { -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.