[英]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.