The previous period of time has been busy in the micro-lesson competition, blog update Less, sorry, today to spare a more.
1. Introduction
Before we used two articles, "pure CSS3 Text Effect Recommendation", "CSS3 three-dimensional text best practice" to introduce the use of CSS3 Text-shaodwo to achieve shadow text, three-dimensional text effect, but the pure CSS3 implementation of the way also has limitations, For example, a large number of applications will delay page loading speed, the effect of the control is not strong, today we recommend a JS plug-in to compensate for these deficiencies, grand launch shine.js.
You can take a look at this article "Better than Pure CSS3" Learn how to use, you can also go to the official website specific learning.
2. Use Step A. Introducing Plugins
[HTML]View Plaincopy
- <script src="Path/to/shine.min.js"></script>
B. Instantiating Shine.js
[JavaScript]View Plaincopy
- Default parameter instantiation, My-shine-object for elements that need to be shadowed
- var shine = New Shine (document.getElementById (' my-shine-object '));
We can also set the parameters and then instantiate the object
[JavaScript]View Plaincopy
- var shine_config = new Shinejs. Config ({
- Numsteps:10,
- offset = 0.25,
- BLUR:100,
- opacity:0.5,
- <span style="White-space:pre" > </span>shadowrgb: new Shinejs. Color (255, 0, 0)
- });
- var shine = New Shine (document.getElementById ("My-shine-object"), shine_config);
C. Shadow-related operations we can set the mouse motion response of the Shadow
[JavaScript]View Plaincopy
- Window.addeventlistener (' MouseMove ', function (event) {
- shine.light.position.x = Event.clientx;
- SHINE.LIGHT.POSITION.Y = Event.clienty;
- Shine.draw ();
- }, false);
3.API Detailed API details please refer to the official GitHub homepage. A. Construction method
[JavaScript]View Plaincopy
- Shine (DomElement, Optconfig, Optclassprefix, Optshadowproperty)
domelement optconfig
parameter |
type |
description |
! HtmlElement |
element with Shadow applied |
?shinejs. config= |
The configuration object that stores the shadow parameters (optional Config instance), can be omitted if omitted to pass the default parameter. |
Optclassprefix |
?string= |
Adds a prefix to all shadow objects, which defaults to shine-. |
Optshadowproperty |
?string= |
Optional property name, the shadow would be, applied to. Overrides The automatic detection for use of eithertextShadow OrboxShadow . The value would be applied aselement.style[shadowProperty] = ‘...‘ and automatically prefixed for legacy browsers (e.g.MozBoxShadow ). |
B. Common methods
Shine.prototype.draw () Shine.prototype.destroy () Shine.prototype.updateContent (Opttext) Shine.prototype.enableAutoUpdates () Shine.prototype.disableAutoUpdates ()
C. Common Properties domelement config
property |
type |
description |
htmlelement |
the DOM element to apply the shine effect to. |
shinejs. Config |
stores all Config parameters. |
Light |
shinejs.Light |
Stores the light position and intensity. |