String text-jquery Plugin

This is a jquery-based string effect plugin.

Have seen this effect before, have tried the idea but the skill point is not enough at that time. The day before yesterday on the train accidentally remembered this, seriously pondered, one go:D

It seems that the skill tree points are not too far off recently.

Effect Show use your mouse to cross the text below

String text string text strings string text string text string string text strings string text string text strings string text

The string words. The string words. The string words. The string words.

String text string text strings string text string text string string text strings string text string text strings string text

The string words. The string words. The string words. The string words.

String text string text strings string text string text string string text strings string text string text strings string text

The string words. The string words. The string words. The string words.

Specifically do the IE6 compatibility,, and do not know whether it is available, and then a picture:

Put the code on GitHub and welcome star ... Https://github.com/shalldie/qin

How to use:

1         $ (selector). Qin ({2             //  default, max offset 3             //  Default, Shaking time 4             //  default, offset per pixel, smaller "the tighter the strings"5         });

The container needs to give a positioning, such as: Relative,absolute

It's not a very complicated thing to tell me about my ideas.

Effect:

1. The mouse enters the container and is able to drag text.
2. The dragged text will drive the nearby text, there is a descending drag distance, the farther is driven the less.
3. Drag to a certain extent, the text will bounce back, there is a shaking effect.

Ideas:

1. The text inside the container is split into a span. Use MouseMove to monitor the mouse.
2. How much distance the mouse moves within the container (MouseEnter to determine the initial position), the text also moves in the same direction, moving the same distance. The distance between the text in the vicinity decreases and the minimum movement is 0.
3. Set a maximum moving distance when the mouse moves beyond this maximum to start the rebound effect. The bounce effect is done with an easing function.

Enjoy it!

String text-jquery Plugin