a jQuery plugin to highlight important section of your site
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
examples
src
.gitignore
LICENSE
README.md
hop-intro.gif
hop-intro.mp4
hop-logo.png
tsconfig.json

README.md

Hop Logo

a jQuery plugin to highlight important sections of your site, inspired by Google Inbox. it will create a circle arround a specific section, and overlay the whole page.

Hop intro

Get Started

Simply call the hop() method on your jQuery instance.

$.hop(options: Options): jQueryInstance

return the current jQuery instance

    $('.target-element').hop();

Note: if multiple elements selected, Hop will choose the first one.

Options

The following options are available if you want to adjust it,

color: string

The overlay color, any valid html color

radius: number

The radius of the circle, must be a positive number

opacity: number

the overlay opacity, 0 > opacity < 1

borderWidth: number

the width of the border arround the hop

borderColor: string

the border color, any valid html color

Examples

Check the examples folder

API

After calling the hop() plugin on a jQuery element, you can get the Hop instance in $(el).data('hop')

Usage example

$('.logo').hop();
var hopApi = $('.logo').data('hop');

// move the hope by (20px, 10px) from the current position
hopApi.move(20, 10, true);

// remove it
hopApi.remove();

Note: if you want to change the radius, color or border properties, you can recall the plugin with the new options

$('.logo').hop();

// increase the radius
$('.logo').hop({radius: 250});

Hop class methods interface

remove() : Hop

Remove and hide the hop, return the current Hop instance

move(left, top, relative? = false): Hop

Move the current hop horizantally or vertically, return the current Hop instance

param description example
left `number string` move the hop to the right, pass a negative value to move it to the left
top `number string`move the hop to the bottom, pass a negative value to move it to the top
relative boolean default to false, if true, it will move it from the current location, otherwise it will be relative to the current document

Note: if you want to move the hop to another element, call the plugin on the new element

$('.logo').hop();

// move the hop to the footer
$('.footer').hop();

To Apply animation

just put this css rule in your document

.hop-outer {
    .2s linear all;
}

off course you can customize it as per your need.

Roadmap

  • Generate TypeScript dts files
  • Provide a jQuery less version
  • Improve current API
  • Add more examples

Contribution

This plugin is written in TypeScript. I will update the contribution guide the soonest