Creating Spinning Logo for WordPress Genesis and Other Themes is quite easy. Move the mouse over the logo and it will spin. You can control the speed,behavior. No head spinning effect really. Its quite easy to create the effect and control the animation behavior programatically. We have named the article as creating spinning logo for WordPress Genesis, but actually it will work any HTML5 or even older HTML webpages or CMS where you can control the CSS, source code etcetera.
Creating Spinning Logo for WordPress Genesis : Introduction
We will be using a specific excellent repository named -prefix-free. Its amazing because it is only of 2 KB size. Well, want to see a demo ? Copy paste this url on a new browser tab :
1 | http://leaverou.github.io/prefixfree/ |
Move your mouse over the round green button saying “only 2 KB zip”. Browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.
For Genesis Part, there is nothing but adding some extra CSS in the Child Theme’s style.css file. There are complicated WordPress Themes with multiple CSS files, honestly its difficult to say what to edit for them.
Second part is adding the minified javascript. Which you basically can add through Genesis settings page in the footer.
Creating Spinning Logo for WordPress Genesis : Let’s Go
The original CSS is actually this :
As you can understand, you have to change the div class name, which is download in this example. You can do some test by changing the degree here :
http://leaverou.github.io/prefixfree/#test-drive
Change the values and mouse over the same looking round download button there. What you are thinking of ? Logo ? That you can either use as background or use our Guide to Image in CSS to Base64 Data URI Encoding – image format free.
Creating Spinning Logo for WordPress Genesis : Per Post
But you might have a wish to add the effect within a post or page only. That you can do if you follow our old guide – Use Any Web Font Within WordPress Posts With Inline CSS. js can be added in the same way. Indeed, we have shown that before too. Only another part is adding the specific div class.
Try it and leave a feedback !
