Сделайте анимацию с библиотекой Glorious JavaScript - PullRequest
Новая
       97

Сделайте анимацию с библиотекой Glorious JavaScript

0 голосов
/ 23 апреля 2020

Я пытался использовать библиотеку для создания материала для моих учеников.

https://glorious.codes/demo

Я хочу сделать анимацию, но не могу понять, как использовать или где использовать библиотеку. Я думаю, что это необходимо использовать из файла html. установить библиотеку, но при открытии страницы она создает только текст, который я помещаю в качестве теста.

Я использую WebStorm в качестве IDE, создаю проект node.js.

enter image description here

<!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.

Ответы [ 2 ]

1 голос
/ 24 апреля 2020

Если вы новичок в веб-технологиях, здесь есть довольно крутой поворот. Лично я бы сделал шаг назад и ознакомился с инструментами. Если у вас есть минута, зайдите на сайт W3school . Существует много информации, которая поможет вам быстро перейти с HTML / CSS / JS. Конкретно сосредоточьтесь на CSS селекторах и Javascript, и это будет иметь гораздо больше смысла.

Теперь по вопросу, который вы задали:

Во-первых, NodeJS не обязательно требуется для достижения вашей цели. Вы можете создать простой файл HTML и ссылаться на библиотеки Glorious прямо из Интернета. Посмотрите, что я сделал в элементах <script> и <link> ниже.

После загрузки библиотек вам необходимо:

  1. Создать библиотеку и назначить ее переменная для использования в будущем (см. const demo = new GDemo(...))
  2. Скажите библиотеке, где в вашем HTML вы хотите, чтобы она отображала анимацию. В данном случае это <div/> с id='container'.
  3. Скажите библиотеке, что визуализировать. Это раздел 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>
0 голосов
/ 23 апреля 2020

Не могли бы вы подробнее рассказать о проблеме? Из вашего примера вы только что создали пустую страницу. Что вы пытаетесь разместить на своей странице? Столы?

Также я бы предложил использовать в React фреймворк, такой как Материалы (https://material.io/components), если вы запускаете проект Js с нуля, за исключением случаев, когда у вас есть что-то конкретное c в эту библиотеку вы действительно хотите отобразить.

...