PDA

View Full Version : Creating this effect?



greens85
Mar 5th, 2010, 02:23 PM
Hi all,

I'm looking for a good tutorial on how to create a certain effect...

http://simpliflying.com/2010/5-ways-to-incorporate-social-media-into-the-flying-experience-and-leverage-on-your-followers/

Near the bottom of the page there are a number of social media icons, facebook, twitter etc. that are half hidden but 'pop up' when you hover over them.

Does anyone know of any tutorials for creating this or can point me in the right direction?

Many thanks,

Greens85

tomws
Mar 5th, 2010, 03:32 PM
Source view is your friend. Firebug makes it even easier.

It's apparently called Sexy Bookmarks and it's a plugin for Wordpress. http://sexybookmarks.net/

greens85
Mar 5th, 2010, 03:47 PM
Source view is your friend. Firebug makes it even easier.

It's apparently called Sexy Bookmarks and it's a plugin for Wordpress. http://sexybookmarks.net/

Hi Tomws,

Many thanks for the reply..

I checked it out with source view & firebug (as you say firebug is a great tool) however I couldn't seem to work out where the image was coming from.

I have downloaded the files from the link, but strangely there are no social media images in the images folder!

Forgive my lack of knowledge but you say its a plugin for wordpress, does this mean that it's unlikely that I will be able to impliment it on my website...

Perhaps there is a html/css alternative, I tried an image swap solution but couldn't achieve the look I was going for...

greens85

tomws
Mar 5th, 2010, 03:57 PM
The images are in there: sexy-sprite.png.

As for whether you can implement it on your site: yes and no. No, you can't just drop it in and have it work unless you're using Wordpress. But yes, you can make it work - you'll just need to do a bit of re-writing.

The plugin files will be most useful for learning how they used jquery to animate it. It should be fairly easy to do, and it's a nice way to learn a bit of jquery.

greens85
Mar 5th, 2010, 04:19 PM
The images are in there: sexy-sprite.png.

As for whether you can implement it on your site: yes and no. No, you can't just drop it in and have it work unless you're using Wordpress. But yes, you can make it work - you'll just need to do a bit of re-writing.

The plugin files will be most useful for learning how they used jquery to animate it. It should be fairly easy to do, and it's a nice way to learn a bit of jquery.

I'm guessing I don't need to try and study the PHP files to get it going?

Sorry to be a pain, but which are the plugin files? The ones in the JS folder?

tomws
Mar 5th, 2010, 04:26 PM
All of the files are the plugin. The javascript files will contain the jquery and maybe some other stuff. The php files, I'm guessing, will contain the logic necessary to plug it into the Wordpress system and place the layout components.