Я работаю на своем сайте с шаблоном Wordpress. Я дизайнер пользовательского интерфейса, но не так много знаю о кодировании, только основы. Я надеюсь, что кто-то может немного помочь мне.
Я сделал анимацию в After Effects, экспортировал ее в формате JSON. Затем установил плагин «Bodymovin» для рендеринга файла JSON в SVG, CANVAS или HTML. Вы можете увидеть анимацию и затронутую страницу здесь . Проблема в том, что при прокрутке вниз анимация визуализируется дважды (анимация прокручивается в два раза быстрее, чем слоган). Здесь вы можете увидеть, что происходит в редактор
Это код из бэкэнда для создания слоганов и включения анимации.
<h1 class="p1" style="text-align: center;"><span class="s1 type_second weight_light big-intro strokes">[bodymovin anim_id="8141" autoplay_viewport="true" width="100px" align="center"]@crossinghorizons</span></h1><p style="text-align: center;">Travel, portraiture and branding photography</p>
А вот так выглядит код при проверке элементов в редакторе на странице.
<div style="transform: translate3d(0px, 0px, 0px); opacity: 3.15; pointer-events: none; transition: all 0ms ease-out 0s;"><h1 class="p1" style="text-align: center"><span class="s1 type_second weight_light big-intro strokes"><div id="anim-5be9dfd07daf3" class="wpbdmv-animation align-center renderer-canvas playing" style="max-width: 100px; margin-right: auto; margin-left: auto; transform: translate3d(0px, 0px, 0px); opacity: 3.15; pointer-events: none; transition: all 0ms ease-out 0s;"><canvas width="200" height="142" style="width: 100%; height: 100%; transform-origin: 0px 0px 0px;"></canvas></div>@crossinghorizons</span></h1><p style="text-align: center">Travel, portraiture and branding photography</p>
Я пытался кое-что исправить, но не могу найти правильного решения, надеюсь, кто-то знает, что идет не так и что с этим делать. Спасибо!