Home > Developer > Web Develop
Front end implementation see a Web page effect is cool (refer to https://tympanus.net/Development/SVGDrawingAnimation/index2.html), decided to achieve the following effect, and packaged into a JS plug-in for everyone to easily achieve the effect;
At present, three kinds of effects have been achieved (depicting the border of the container, depicting the line chart style, depicting the pie chart style);
How to use:
1. First introduce jquery and svg.js
2. Then introduce svg.webInitAnimation.js
3. Define your own DOM elements
4. Select the style you want to draw and add it to the class attribute
As follows
<HTML><Head> <Scripttype= "Text/javascript"src= "Jquery-1.9.1.min.js"></Script> <Scripttype= "Text/javascript"src= "Svg.js"></Script> <Scripttype= "Text/javascript"src= "Svg.webInitAnimation.js"></Script></Head><Bodyclass= "Bg-fill"style= "Background-color: #07263B; margin:0;padding:0;"> <Divstyle= "Margin-top:20px;text-align:center;"> <spanclass= "Init_border">Fdsgfsdgfdsg</span> </Div> <spanclass= "Init_border"style= "margin-left:100px;">Fdsafdas</span> <Divclass= "Init_chartline init_border"style= "margin-left:400px;margin-top:50px; background-color:red; width:300px;height:200px;"></Div> <Divclass= "Init_pie"style= "margin-left:200px;margin-top:50px; background-color:red; width:300px;height:300px;"></Div></Body></HTML>
Usage Explanation:
First, if you want the background color to fill the animation style, add the Bg-fill class to the Body node, and set the body's background color, if you don't want the effect, you don't need to add the style and class
Border Description: Select the DOM you want to draw the border to add the Init_border class in class,
Linear Chart Style: Select the DOM you want to draw the style to add the Init_chartline class to,
Pie chart Style: Select the DOM you want to draw the style to add the Init_pie class to
The above style effects can be added on the same dom, preferably with Init_border and other styles
Attention:
If you select the border of the text in the border drawing style, make sure that the DOM you select is the complete enclosing text, preferably the inline element, the block element (for example, <div style= "width:100%;text-align:center;" >testtext</div>) It is not accurate to depict the border of the text but the bounding rectangle of the div block element.
Add more styling effects later please follow my GitHub
Implementation of Web page initialization line rendering based on Svg.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
