Beyond Pure CSS3, super-praise shadow effect recommended-SHINE.JS__JS

Front-End development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

Some time ago has been busy in the course of the event, blog update less, sorry, today a more. 1. Introduction

We used to use two articles, "pure CSS3 Text Effect Recommendation", "CSS3 Stereo text Best Practice" for you to introduce the use of CSS3 Text-shaodwo to achieve shadow text, stereo text effect, but the way of pure CSS3 implementation has limitations, For example, a large number of applications will delay the page load speed, the effect of the control is not strong, today to recommend a JS plug-in to make up for these deficiencies, the grand launch of Shine.js.

You can take a look at this article "Better than Pure CSS3" to learn how to use, you can also go to the official website specific learning. 2. Use steps A. Introduction of Plug-ins

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

B. Instantiation of Shine.js

The default parameter is instantiated, My-shine-object is the element
var shine = new Shine (document.getElementById (' my-shine-object ') that needs to add a shadow);

We can also set the parameters and then instantiate the object

var shine_config = new Shinejs. Config ({
	numsteps:10,
	offset = 0.25,
	blur:100,
	opacity:0.5,
	shadowrgb:new Shinejs. Color (255, 0, 0)
});
var shine = new Shine (document.getElementById ("My-shine-object"), shine_config);

C. Shadow-related operationsWe can set the shadow of the mouse to move the response

Window.addeventlistener (' MouseMove ', function (event) {
  shine.light.position.x = Event.clientx;
  SHINE.LIGHT.POSITION.Y = Event.clienty;
  Shine.draw ();
}, False);

3.API DetailedPlease refer to the official GitHub homepage for an API detailed explanation. A. Method of construction

Shine (DomElement, Optconfig, Optclassprefix, Optshadowproperty)

Parameter	Type	Description
DomElement	! HtmlElement	Elements that apply shadows
Optconfig	? Shinejs. config=	The configuration object that stores the shadow parameter (Optional config instance) can be omitted, and if omitted, the default argument is passed.
Optclassprefix	? string=	Adds a prefix to all shadowed objects, and defaults to shine-.
Optshadowproperty	? string=	Optional property name, that the shadow would be applied to. Overrides The automatic detection for use of Eithertextshadow or Boxshadow. The value would be applied aselement.style[shadowproperty] = ' ... ' and automatically prefixed for legacy browsers (e.g. Moz Boxshadow).

B. Common methods

Shine.prototype.draw ()
Shine.prototype.destroy () Shine.prototype.updateContent () (
opttext)
Shine.prototype.enableAutoUpdates ()
Shine.prototype.disableAutoUpdates ()

c. Common Properties Property

	Type	Description
DomElement	HtmlElement	The DOM element to apply the shine effect to.
Config	Shinejs. Config	Stores all config parameters.
Light	Shinejs. Light	Stores the light position and intensity.

Enjoy it.

----------------------------------------------------------

Front-End development Whqet, focus on the Web front-end development, to share relevant resources, welcome to the praise, welcome to Pat Bricks.
---------------------------------------------------------------------------------------------------------