[英]Make an animation with the Glorious JavaScript library
我一直在尝试使用图书馆为我的学生制作材料。
我想制作动画，但我不明白如何使用或在哪里使用该库。 我认为有必要从 html 文件中使用它。 安装库，但是在打开页面时它只会创建我作为测试放置的文本。
我正在使用 WebStorm 作为 IDE，创建一个 node.js 项目。
<!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>
有人可以指导我使用什么程序或如何使用图书馆。 这是我第一次尝试用 JavaScript 执行 animation。
如果您是 web 技术的新手，这里的曲线非常陡峭。 就个人而言，我会退后一步，熟悉这些工具。 如果您有时间，请查看W3school的网站。 有大量信息可以帮助您快速使用 HTML/CSS/JS。 特别关注CSS 选择器和Javascript ，这将更有意义。
现在对于您提出的问题：
首先，实现您的目标不一定需要 NodeJS。 您可以创建一个简单的 HTML 文件并直接从 web 引用 Glorious 库。 看看我在下面的<script>和<link>元素中做了什么。
加载库后，您需要：
const demo = new GDemo(...) ）id='container'的<div/> 。gDemo.openApp(...)部分。 我直接从这个库的GitHub页面中提取了这个示例。 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>
您能否详细说明一下这个问题。 从您的示例中，您刚刚创建了一个空页面。 你想在你的页面上放什么？ 桌子？
此外，如果您从头开始一个 Js 项目，我建议在 React 中使用诸如 Materials ( https://material.io/components ) 之类的框架，除非您在这个库中有一些您真正想要显示的特定内容。
如何仅使用Javascript（没有库）制作灯箱动画效果
[英]How To Make A Lightbox Animation Effect Only Using Javascript (no library)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.