Beyond Pure CSS3, great shadow effect recommended-shine.js

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

1. <script src="Path/to/shine.min.js"></script>

B. Instantiating Shine.js [JavaScript]View Plaincopy

1. Default parameter instantiation, My-shine-object for elements that need to be shadowed
2. var shine = New Shine (document.getElementById (' my-shine-object '));

We can also set the parameters and then instantiate the object [JavaScript]View Plaincopy

1. var shine_config = new Shinejs. Config ({
2. Numsteps:10,
3. offset = 0.25,
4. BLUR:100,
5. opacity:0.5,
6. <span style="White-space:pre" > </span>shadowrgb: new Shinejs. Color (255, 0, 0)
7. });
8. 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

1. Window.addeventlistener (' MouseMove ', function (event) {
2. shine.light.position.x = Event.clientx;
3. SHINE.LIGHT.POSITION.Y = Event.clienty;
4. Shine.draw ();
5. }, false);

3.API Detailed API details please refer to the official GitHub homepage. A. Construction method [JavaScript]View Plaincopy

1. 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 eithertextShadowOrboxShadow. 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.