Lightweight Rollover Effect with jQuery and CSS

Julian Sula — Tue, 08 Jan 2013 23:50:22 +0000

In today’s tutorial I’ll show you how to create a CSS rollover with a smooth fade in/fade out effect using jQuery. In this example we are going to create a simple social navigation bar where we’ll link to our FaceBook, Twitter, Google+, Linkedin, RSSfeed, E-mail and Pinterest.

By the end of this tutorial you should end up with something like example below:

So let’s get started.

1) First let’s create our image sprites

This first image is what we’ll load first. Let’s name this ‘social-sprites.png’ (You can right click this image and save as on your computer)

This second image contains our rollover/hover state. We’ll name this image ‘social-sprites-hover.png’ (You can right click this image and save as on your computer)

2) Now let’s create a basic html page.

You can copy and paste this html code in a text editor and save it as hover.html





jQuery/CSS Smooth Rollover

3) Create an unordered list

Now lets create an unordered list with all our links and let’s add an ‘id’ to our list and name it ‘socialnavigation’ as well as all the items in it so they are all unique. So it looks like this.

Next insert the above list between the tags of your html page.





jQuery/CSS Smooth Rollover

3) Let’s add some style

Now that we have our list of links complete it’s time to apply some CSS styling to it. This will essentially create our CSS rollover effect.

4) Attach style to page

You can either save this stylesheet as a separate file and name it i.e. style.css and include it in your html page or just simply embed it between the tags. In this example we’ll just go ahead an embed it in our html page.






jQuery/CSS Smooth Rollover

At this point you should have a basic image sprite based rollover effect. While this can satisfy for most uses it is kind of plain and unexciting, so what will do now is incorporate jQuery to spice things up a bit. So what I want this rollover to do is to initially have a state (or the initial inactive state) where it is of a certain intensity (and this is where jQuery comes in, another state when we rollover it and the final state when we roll away from it and we want the in between actions to have a smooth fadein and fadeout effect. We can simply embed the jQuery script straight from Google and embed it between

Our final page should like this.








jQuery/CSS Smooth Rollover

Hope you enjoyed this tutorial. Stay tuned for more.

Site Navigation and Usability

Admin — Fri, 11 Nov 2011 15:43:35 +0000

It is important for the end user to know intuitively where to click on a web site upon first visit. A clean layout is the first step to capturing the user’s attention, then compelling content that encourages him/her to read and then click. Sounds simple. Apparently it isn’t, evidenced by high “bounce rates” (that’s when people bounce in and bounce out…kind of like channel surfing through cable) unless your traffic is targeted to a specific audience that is expressly searching for your content.

One way for capturing ADD audiences faced with millions of choices everyday is embedding a video on the homepage that automatically plays. it could be a music video, a talking head, a news reel, a professor teaching a workshop – whatever displays your content quickly and efficiently. You can do this by adding “autoplay=1″ to your video code, for example:

http://www.youtube.com/v/xu4IynGLy80&hl=en&fs=1&autoplay=1“>

While this video is playing, the user’s peripheral vision will catch the text surrounding the player. This means the text should compliment and supplement the content of the video, adding context, further explanation, case studies and yes – a reason to purchase or support your product or service, and perhaps become a repeat visitor who will refer your web site to others via social networking buttons (Facebook, Twitter, Digg, etc), which should also be featured on or near your video (click for more about creating a video).

When they click it goes to this content…
The Internet is quickly becoming a cable service with WAY more channels than the 300 or 400 you currently get on TV, so put on your director’s hat, and think of the films, TV shows, news reports and other content that capture your own attention. Then do a search on YouTube for the content that gets the most traffic. People go nuts over pets and babies doing cute things.
Comedy is another crowd pleaser (although it’s not always easy to achieve). Breaking news on your particular subject can also set you apart from the competition. Yes, we are at the point in history where EVERYONE in business must also be a media producer – UNLESS…you are the type of person who knows his/her strengths and would rather leave such creative endeavors to professionals like 4FX, a design and production firm with a proven track record and more ideas than they can keep up with!

Most web sites offer navigation tabs along the left hand side of a web page, along the top and the bottom.

Left side: Content subpages are usually listed here.
Top: Search, advertising links are usually featured here.
Bottom: About Us, Privacy Policy, another search button, and any other company or organization information are featured here.

And what about the right hand side? This is up to you, but most Web 2.0 standards keep this section open for changing content, advertising banners, the video we mentioned earlier (if it is not featured in the center of the page).

Of course, you could totally ignore these standards and design your own, unique page, but keep in mind that most users have been trained to look at web sites with these particular design features, which makes it much easier for them to intuitively navigate your site.