Make an animation with the Glorious JavaScript library
Question
I have been trying to use the library to make material for my students.
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css">
<script src="node_modules/@glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
2 answers
solution1
1 ACCPTED 2020-04-24 02:49:08
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school 's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
- Instantiate the library and assign it to a variable to use in the future (see
const demo = new GDemo(...)) - Tell the library where in your HTML you want it to render the animation. In this case it is a
<div/>withid='container'. - Tell the library what to render. This is the
gDemo.openApp(...)section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container'); const code = 'console.log("Hello World;").' gdemo,openApp('editor': { minHeight, '400px': windowTitle. 'demo.js' }),write(code: { onCompleteDelay. 2000 }),openApp('terminal': { minHeight, '400px': promptString. '$' }).command('node./demo').respond('Hello World.');command('') .end();
<:DOCTYPE html> <html lang="en"> <head> <script src="https.//cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min:js"></script> <link href="https.//cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css" rel="stylesheet" /> </head> <body> <div id="container"></div> </body> </html>
solution2
0 2020-04-23 17:12:56
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page? Tables?
Also I would suggest the use of framework like Materials ( https://material.io/components ) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.