Текст параллакса не работает в моих html, css и js, но у меня нет ошибок ⇐ CSS

[Гость]

текст должен появляться при прокрутке страницы вниз, как показано на рис.2

рис.2

Я тоже использую приложение реагирования для своего веб-сайта, если это помогает, но я просто не знаю, почему оно не работает, я тоже использовал код с этого веб-сайта, помогите мне тоже https://www.codehim.com/animation -effects/simple-parallax-effect-in-javascript/#:~:text=Вам%20просто%20нужно%20к%20добавить,outer%20height%20of%20%20элементов.

(это html-код)

импортировать логотип из './logo.svg'; импортировать './App.css'; функция Приложение() { возвращаться ( приз Данные принадлежат вам и вам Добро пожаловать в бесконечные средства массовой информации, которые вознаграждают вас за ваши данные как дела, собака как дела, собака как дела, собака ); } экспортировать приложение по умолчанию; (css) .Приложение { выравнивание текста: по центру; } .App-логотип { высота: 40вмин; события указателя: нет; } @media (предпочитает уменьшение движения: нет предпочтений) { .App-логотип { анимация: вращение логотипа приложения, бесконечные 20 секунд, линейная; } } .App-заголовок { цвет фона: #000000; минимальная высота: 100vh; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; размер шрифта: Calc (10 пикселей + 2vmin); белый цвет; } .App-ссылка { цвет: #61dafb; } @keyframes App-logo-spin { от { преобразование: поворот (0 градусов); } к { преобразование: поворот (360 градусов); } } тело{ выравнивание текста: по центру; } .раздел{ высота: 100vh; отступ: 2em; } .section:nth-of-type(2),.section:nth-of-type(4){ цвет фона: rgba(133,133, 133, 0,3); } .parallax-background{ позиция: абсолютная; ширина: 100%; z-индекс: -1; маржа-верх: 100vh; } .parallax-background h1 { высота: 100вх; отступ-дно: 50vh; размер шрифта: 5vmax; непрозрачность: 0,6; } (js)
import { render, screen } из '@testing-library/react'; импортировать приложение из «./App»; test('рендерит ссылку на обучение', () => { рендер(); const linkElement = screen.getByText(/learnact/i); ожидать (linkElement).toBeInTheDocument(); }); вар windowHeight = window.innerHeight; document.addEventListener("resize", function(){ windowHeight = window.innerHeight; }) функция externalHeight(el){ вар высота = el.offsetHeight; вар стиль = getcomputedSyle (эль); высота +=parseInt(style.marginTop)+parseInt(style.marginBottom); высота возврата; } функция параллакс (el, SpeedFactor, OuterHeight) { вар foo = document.querySelectorAll(эль) вар getHeight; вар FirstTop; вар дополнениеTop = 0; foo.forEach(function(subEl){ firstTop = subEl.getBoundingClientRect().top }); } если (outerHeight){ getHeight = функция (эл) { вернуть externalHeight(el); }; }еще{ getHeight = функция (эл) { вернуть эл.clientHeight; }; } обновление функции(){ вар pos = window.scrollY; foo.forEach(function(subEl){ элемент вар = SubEl; вар топ = element.getBoundingClientRect().top; вар высота = getHeight (элемент); element.style.top = -(Math.round((firstTop-pos)*speedFactor)) +"px"; }); document.addEventListener("прокрутка", обновление, правда) document.addEventListener("изменить размер",обновить) обновлять() }; параллакс(".параллакс-фон",-0.6); fullpage.intialize("#fullpage",{ css3: ложь, полоса прокрутки: правда });