Есть подобный заголовок, который должен "плыть" при скролле.
Текстовую часть без проблем сделал при помощи тегов 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>
Вместо точек я хочу разместить изображение