In this tutorial, I will be sharing with you how to create icons that follow your mouse scroll using simple CSS and  HTML. If you have been following my weblog closely, you would have seen these irritating cool additions at the left side of my weblog. Here are two snapshots of them.

See these icons at the topSee these icons in the middle now

Steps

1. In your CSS Stylesheet, add in the following code:

#nomove { position:fixed; left:0; top:250px;
}

TipTip: You may wish to adjust the position of your static icons by changing the values of left and top.

2. Next, in your website or weblog, add in the following code just before you close the body tag:

<div id="nomove">
 
Place the code of anything that you want here.
 
</div>

That’s it and you’re done! Simple huh? However, you may have noticed that on my weblog, the icons light up when your mouse hover over them. How do we do that? Keep in momentum with my weblog on the next tutorial that does just that!

Hover over and it lights up!
Share and spread this germ story!
  • Add to favorites
  • RSS
  • email
  • PDF
  • Print
  • Digg
  • del.icio.us
  • Twitter
  • Facebook
  • Technorati
  • Live
  • MySpace
  • Yahoo! Buzz
  • Google Bookmarks