JavaScript Mouse-Following Shadow Plugin: realshaow.js
Add-ons
Plugin Description: Simulates lighting and shadows that follow the mouse cursor.
First, include the jQuery framework and the Real Shadow plugin:
Then initialize it.
1 2 3 4 5 6 7 8 9 10 11 | $(selector).realshadow(); // options are optional$(selector).realshadow({ followMouse: false, // Defaults to true pageX: x, // X-axis coordinate of the light source pageY: y // Y-axis coordinate of the light source c: { // Shadow color r: 1, // red channel for shadow g: 1, // green channel for shadow b: 1, // blue channel for shadow }}); |
Related Plugin Parameters: This plugin provides several simple options for customization, as follows: followMouse: Defaults to false. Specifies whether the shadow changes as it follows mouse movement. pageX: The X-coordinate of the light source used to generate the shadow. pageY: The Y-coordinate of the light source used to generate the shadow. c: Shadow color definition, including r, g, and b. If you need to specify different colors for different elements, you can use the following method:
1 2 3 4 5 6 7 | <span rel="r"></span><span rel="g"></span><span rel="b"></span><span rel="rg"></span><span rel="gb"></span><span rel="br"></span><span rel="rgb"></span> |
In the code above, we use rel to define the shadow color for the corresponding element.
评论