Как сделать такой трюк с анимацией?
Я написал анимацию, обычное стандартная ситуация когда некий шарик движется по пути, анимация зациклена.
Смысл вопроса вот в чём: я хочу что бы в тот момент когда чёрный шарик проходит над цифрой то эта цифра отображалась в этом двигающимся шарике.
Моя наработка smil svg:
p{
width: 80%;
margin: auto;
}
text{
font-family: sans-serif;
}<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>
<svg viewBox="-30 -120 1000 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="lg">
<stop offset="30%" stop-color="purple" stop-opacity="10%"/>
<stop offset="40%" stop-color="#fff" stop-opacity="80%"/>
<stop offset="30%" stop-color="lightgreen" stop-opacity="10%"/>
</linearGradient>
</defs>
<path d="M0,30 Q50,-5 300,-8 Q300,-10 700,0 Q960,10 1000,-30"
stroke="url(#lg)" stroke-width="20" fill="none"
stroke-dasharray="140, 30, 6, 30" id="mpath"/>
<g>
<circle r="20" fill="lightblue" cx="168" cy="-4"></circle>
<circle r="20" fill="lightblue" cx="374" cy="-8"></circle>
<circle r="20" fill="lightblue" cx="580" cy="-3"></circle>
<circle r="20" fill="lightblue" cx="785" cy="3"></circle>
</g>
<g>
<text x="160" y="-30">2%</text>
<text x="368" y="-34">3%</text>
<text x="570" y="-30">4%</text>
<text x="780" y="-25">5%</text>
</g>
<circle r="24">
<animateMotion dur="5s"
repeatCount="indefinite"
rotate="auto"
fill="freeze"
begin="0s"\>
<mpath xlink:href="#mpath" />
</animateMotion>
</circle>
</svg>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>Ответы (1 шт):
Автор решения: MaximLensky
→ Ссылка
Это моё видение этой реализации
Мы смещаем буквы и делаем их одного цвета с нижним кругом но выше чем анимированный круг и получаем на выходе вот такой эффект:
p{
width: 80%;
margin: auto;
}
text{
font-family: sans-serif;
}<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>
<svg viewBox="-30 -120 1000 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="lg">
<stop offset="30%" stop-color="purple" stop-opacity="10%"/>
<stop offset="40%" stop-color="#fff" stop-opacity="80%"/>
<stop offset="30%" stop-color="lightgreen" stop-opacity="10%"/>
</linearGradient>
</defs>
<path d="M0,30 Q50,-5 300,-8 Q300,-10 700,0 Q960,10 1000,-30"
stroke="url(#lg)" stroke-width="20" fill="none"
stroke-dasharray="140, 30, 6, 30" id="mpath"/>
<g>
<circle r="20" fill="lightblue" cx="168" cy="-4"></circle>
<circle r="20" fill="lightblue" cx="374" cy="-8"></circle>
<circle r="20" fill="lightblue" cx="580" cy="-3"></circle>
<circle r="20" fill="lightblue" cx="785" cy="3"></circle>
</g>
<g>
<text x="160" y="-30">2%</text>
<text x="368" y="-34">3%</text>
<text x="570" y="-30">4%</text>
<text x="780" y="-25">5%</text>
</g>
<circle r="24">
<animateMotion dur="5s"
repeatCount="indefinite"
rotate="auto"
fill="freeze"
begin="0s"\>
<mpath xlink:href="#mpath" />
</animateMotion>
</circle>
<g fill="lightblue">
<text x="157" y="2">2%</text>
<text x="363" y="-3">3%</text>
<text x="570" y="0">4%</text>
<text x="774" y="8">5%</text>
</g>
</svg>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam eligendi ex sequi eaque, a perferendis iusto vel hic explicabo fugiat animi dolorum voluptates amet cupiditate nihil nesciunt! Esse iusto praesentium architecto molestias magni! Repellendus mollitia blanditiis non vitae, reprehenderit explicabo molestiae necessitatibus commodi dolorem voluptates perspiciatis deleniti nesciunt sunt totam est itaque enim consectetur esse quidem officia nulla beatae! Alias quasi molestias ut, reprehenderit necessitatibus ea pariatur fugiat porro veritatis dignissimos aspernatur similique! Voluptates perspiciatis unde velit sed ratione sunt iste eaque blanditiis id aliquam alias deserunt consectetur quidem accusantium maiores nam, quo earum similique. Possimus consectetur eius explicabo eos.
</p>