Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2023, 15:52
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 53

Движение текста по контуру (траектории).
Всем привет. Нашел в Codepen, интересующий меня вариант скрипта. Оригинал тут https://codepen.io/jh3y/pen/ExjpmZV. Пытался реализовать тоже самое, но не получается, попытка тут https://codepen.io/bsi_52/pen/KKJgdPQ . В скриптах знания нулевые, а в этом примере очень нравится, что текст движется не пропадая в конечной точке маршрута. Просьба специалистов решить мою проблему. Всем спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2023, 16:39
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

На самом деле, тут скрипты особо не нужны, обычный SVG прекрасно справляется с подобными анимациями.

Набросал небольшой пример: https://jsfiddle.net/u5mqe9Lv/

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    svg {
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }
  </style>
</head>

<body>
  <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path id="motion" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    </defs>
    <path
      fill="none"
      stroke="lightgrey"
      d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="1.2s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan>H</tspan>
    </text>
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.9s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan>E</tspan>
    </text>
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.6s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan>L</tspan>
    </text>
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto" begin="0.3s">
        <mpath href="#motion" />
      </animateMotion>
      <tspan>L</tspan>
    </text>
    <text>
      <animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
        <mpath href="#motion" />
      </animateMotion>
      <tspan>O</tspan>
    </text>
  </svg>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2023, 17:58
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 53

Большое спасибо за быстрый ответ. завтра попробую Ваш вариант там где хотел использовать скрипт.
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2023, 20:58
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 53

ruslan_mart, да это то что надо. огромное Вам спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью скрипта высчитать ширину полосы прокрутки? LADYX Элементы интерфейса 35 13.11.2017 12:50
Движение по заданной траектории Ling Общие вопросы Javascript 0 10.03.2016 18:55
движение текста при нажатии кнопки jquery imediasun1 Элементы интерфейса 10 31.01.2014 09:55
Движение камеры по фону в заданной траектории ruslord1 Элементы интерфейса 1 26.08.2013 01:25
Движение текста в Mozilla AlexMak Firefox/Mozilla 7 25.11.2008 17:40