#javascript #html #typed.js
#javascript #HTML #typed.js
Вопрос:
Эй, ребята, у меня есть JS-код, в котором я пытаюсь анимировать, что-то вроде эффекта ввода. Я знаю, что могу использовать typed.js для этой цели, но это требует передачи в HTML-контейнере. К которому в данном случае у меня нет доступа, я имею в виду, что у меня есть index.html но этот текст, который я пытаюсь анимировать, написан не на HTML, а на JS. Хотя по какой-то причине, когда я проверяю этот текстовый элемент на веб-странице, он показывает текст в HTML. Я знаю, что это довольно сложно понять, поэтому я прикрепил фрагмент кода для обоих index.html и JS-код.
JS-КОД: ЗДЕСЬ Я ХОЧУ АНИМИРОВАТЬ часть субтитров
[![const greeting = {
username: "Mr.",
title: "Hi all,",
subTitle: emoji(
"A fanatic Full Stack Software Developer 🚀 having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."
),
displayGreeting: true // Set false to hide this section, defaults to true
};][1]][1]
index.html , вы заметите, что он не содержит элемента, который я хочу анимировать, но он появляется как его часть, когда я просматриваю элемент на веб-странице
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png?v8=qAJ44G5Bm7">
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png?v8=qAJ44G5Bm7">
<link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg?v8=qAJ44G5Bm7" color="#885bd5">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v8=qAJ44G5Bm7">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacificoamp;display=swap" rel="stylesheet">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#6c63ff" />
<meta name="My Portfolio" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png?v8=qAJ44G5Bm7">
<meta property="og:title" content="My Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://developerfolio.js.org/" />
<meta property="og:image" content="https://developerfolio.js.org/static/media/developerActivity.59389695.svg" />
<link rel=preload href="/static/media/Montserrat-Regular.ee653992.ttf" as="font" type="font/woff" crossorigin>
<link rel=preload href="/static/media/Agustina.21f233e1.woff" as="font" type="font/woff" crossorigin>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135618960-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-135618960-2');
</script>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.13.0/css/all.min.css">
<title>Trial/title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Пожалуйста, помогите мне решить эту проблему, я был бы очень признателен!
Комментарии:
1. Я перестал читать здесь: » … текст, который я пытаюсь анимировать [это] JS «. Вы не можете анимировать текст , вам понадобится HTML-элемент для анимации.
2. Но, по-видимому, он есть, но я не могу его анимировать, потому что я уже передаю входные данные (строку) из файла JS
3. Текст, который вы видите, находится не в файле JS, он просто динамически вставляется в DOM, либо в существующий элемент, либо JS тоже создает элемент.