3

Есть подобный заголовок, который должен "плыть" при скролле. введите сюда описание изображения

Текстовую часть без проблем сделал при помощи тегов text и TextPath. Однако никак не могу понять как мне разместить изображение внутри тега с текстом. Использовал некоторые теги svg и псевдоэлементы, результата это не дало.

const textPath = document.querySelector("#text-path");

function onScroll() {
    let percent = (document.documentElement['scrollTop'] || document.body['scrollTop']) / ((document.documentElement['scrollHeight'] || document.body['scrollHeight']) - document.documentElement.clientHeight) * -20;
    textPath.setAttribute("startOffset", (-percent * 40) - 1000)
}

window.addEventListener('scroll', onScroll);
.title text {
    fill: #ffffff;
}

.title svg {
    background: #000;
min-height: 100vh;
}


.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 410px;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Forum;
    font-style: normal;
    font-weight: normal;
    font-size: 45px;
    line-height: 79px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ffffff;
}
<div class="title">
    <svg width="1920" height="100%" viewBox="0 0 1098.72 1">
        <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8 61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>

        <text>
            <textPath href="#curve" id="text-path">
                <tspan>Заголовок •</tspan>
                <tspan>Заголовок •</tspan>
                <tspan>Заголовок •</tspan>
                <tspan>Заголовок •</tspan>
                <tspan>Заголовок •</tspan>
            </textPath>
        </text>
    </svg>
</div>

Вместо точек я хочу разместить изображение

1 ответ 1

1

Вместо точек я хочу разместить изображение

  • Изображение перемещается вдоль кривой с помощью команды: animateMotion

  • Текст перемещается вдоль кривой с помощью команды: textPath

Можно совместить передвижение текста и изображения вдоль одной кривой, только в том случае, если изображение будет текстовым элементом. Например такой символ unicode: &#9883; - ⚛

Анимация движения начнется после клика

.title text {
  font-size:45px;
    font-family: Forum;
    fill:cyan;
    pointer-events:none;
}

.title {
   width:100vw;
   height: 100px;
}
<div class="title">
    <svg id="svg1"  viewBox="0 0 1200 120" style="background:#000;border:1px solid cyan">
        <path transform="translate(0 10)" id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8 61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>

        <text >
            <textPath startOffset="-115%" href="#curve" id="text-path">
                <tspan style="fill:red">Заголовок</tspan> &#9883;</tspan>
                <tspan style="fill:yellow">Заголовок </tspan> &#9883;</tspan>
                <tspan style="fill:yellowgreen">Заголовок &#9883;</tspan>
                <tspan style="fill:cyan">Заголовок &#9883;</tspan>
                <tspan style="fill:orange">Заголовок &#9883;</tspan>
                <animate  attributeName="startOffset" from="100%" to="-115%" begin="svg1.click" dur="10s" repeatCount="indefinite" restart="whenNotActive"/>
            </textPath> 
               
        </text>
    </svg>
</div>

Внимание:

Чтобы буквы не прыгали в местах излома трассы, нужно сделать эти участки более плавными.

Update

Более плавная трасса, без скачков букв на ухабах

<path transform="translate(0 10)" id="curve" fill="transparent" d="M.2.2S106 78 276.6 73.4C447.2 69 548.3 28 685.4 27.4c138.5-.4 213.4 71.9 413.3 43.7"></path>

.title text {
  font-size:45px;
    font-family: Forum;
    fill:cyan;
    pointer-events:none;
}

.title {
   width:100vw;
   height: 100px;
}
<div class="title">
    <svg id="svg1"  viewBox="0 0 1200 120" style="background:#000;border:1px solid cyan">
        <path transform="translate(0 15)" id="curve" fill="transparent" d="M.2.2S106 78 276.6 73.4C447.2 69 548.3 28 685.4 27.4c138.5-.4 213.4 71.9 413.3 43.7"></path>

        <text >
            <textPath startOffset="-115%" href="#curve" id="text-path">
                <tspan style="fill:red">Заголовок</tspan> &#9881;</tspan>
                <tspan style="fill:yellow">Заголовок </tspan> &#9883;</tspan>
                <tspan style="fill:yellowgreen">Заголовок &#9883;</tspan>
                <tspan style="fill:cyan">Заголовок &#9883;</tspan>
                <tspan style="fill:orange">Заголовок &#9883;</tspan>
                <animate  attributeName="startOffset" from="100%" to="-115%" begin="svg1.click" dur="10s" repeatCount="indefinite" restart="whenNotActive"/>
            </textPath> 
               
        </text>
    </svg>
</div>

3

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.