Skip to content
Other hover effects are boring.
JavaScript Ruby

readme.md

okhover by OKFocus

OKHover is a jQuery plugin that makes it easy to reproduce the tiled background effect seen on the OKFocus website. It uses HTML5 data attributes and is designed to be simple yet highly customizable.

Requirements

The only real technical requirement besides jQuery itself, is declaring the HTML5 doctype for your web application. This is achieved by making sure the first line of your HTML is <!doctype html>. This ensures that using data attributes will be considered valid markup by browsers.

Usage

For a simple example, consider this snippet of code:

<ul>
  <li data-okimage='http://example.com/path/to/an/image.gif'>
    <a href='#'>I'm a link</a>
  </li>
</ul>

The above will have no visible effect. To achieve the hovering effect, you'll have to include this javascript after including the OKHover source.

$(function(){
    $('li').okhover();  
}):

When you hover on an <li>, you'll now see the okhover effect in action. The data attribute data-image is a reference to the image that will appear tiled in the background.

Options

The following options are available to you:

option description default
fadeIn A boolean that controls if the background image will fade in false
fadeOut A boolean that controls if the background image will fade out false
fadeInDuration A number that controls how long the fade-in will be (in milliseconds) 400 milliseconds
z-index A number that controls the z-index of the background div -1
el If you would like to the effect to appear somewhere else (any DOM element that supports the background-image property) null

Here's an example with a lot of options:

$(function(){
    $('div').okhover({
        fadeIn: true,
        fadeOut: true,
        fadeInDuration: 2000,
        zIndex: 420,
        el: 'a'
    });
});

Run Tests

OKFocus tests JavaScript with Jasmine. Run tests:

$ bundle install
$ rake jasmine
Something went wrong with that request. Please try again.