Other hover effects are boring.
JavaScript Ruby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
spec/javascripts
src
.gitignore
Gemfile
LICENSE
Rakefile
component.json
okhover.jquery.json
readme.md

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