Делаем перемещение текста по изогнутой траектории

08/13/201911/29/2021

Изогнутая линия рисуется в SVG как , а устанавливается на нее с помощью :

<pre rel="SVG" class=" language-markup"><code class=" language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>160px<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0 0 1098.72 89.55<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>path</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>curve<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>transparent<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>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<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>path</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">transform</span><span class="token punctuation">:</span>translate<span class="token number">3</span><span class="token unit">d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textPath</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">transform</span><span class="token punctuation">:</span>translate<span class="token number">3</span><span class="token unit">d</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">alignment-baseline</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xlink:</span>href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#curve<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>*The pictures are not technically selfies.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textPath</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span></code></pre>

Трюк с перемещением происходит путем настройки атрибута startOffset элемента textPath.

Я не уверен на 100%, как они это сделали, но мы можем сделать небольшую хакерскую математику, наблюдая положение прокрутки страницы и устанавливая этот атрибут так, чтобы он двигался так быстро и так далеко, как нам хочется.

<pre rel="JavaScript" class=" language-javascript"><code class=" language-javascript"><span class="token keyword">const</span> textPath <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#text-path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> h <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span> 
      b <span class="token operator">=</span> document<span class="token punctuation">.</span>body<span class="token punctuation">,</span>
      st <span class="token operator">=</span> <span class="token string">'scrollTop'</span><span class="token punctuation">,</span>
      sh <span class="token operator">=</span> <span class="token string">'scrollHeight'</span><span class="token punctuation">;</span>

document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"scroll"</span><span class="token punctuation">,</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> percent <span class="token operator">=</span> <span class="token punctuation">(</span>h<span class="token punctuation">[</span>st<span class="token punctuation">]</span><span class="token operator">||</span>b<span class="token punctuation">[</span>st<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>h<span class="token punctuation">[</span>sh<span class="token punctuation">]</span><span class="token operator">||</span>b<span class="token punctuation">[</span>sh<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">-</span> h<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span>
  textPath<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"startOffset"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token operator">-</span>percent <span class="token operator">*</span> <span class="token number">40</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1200</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

Вот демо:

<div style="height: 650px">
<iframe name="cp_embed_1" src="https://codepen.io/chriscoyier/embed/qeZwRb?height=629&amp;theme-id=1&amp;default-tab=result&amp;user=chriscoyier&amp;slug-hash=qeZwRb&amp;pen-title=Selfie%20Crawl&amp;name=cp_embed_1" scrolling="no" frameborder="0" height="629" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Selfie Crawl" class="cp_embed_iframe " style="width: 100%; overflow: hidden; display: block; height: 100%;" id="cp_embed_qeZwRb"></iframe>
</div>

Текст на изогнутой линии — это крутой дизайн по ряду причин! Его просто не так много видно в Интернете, поэтому, когда он используется, он выделяется.

<div style="height: 650px">
<iframe name="cp_embed_2" src="https://codepen.io/wheatup/embed/rXJrYm?height=636&amp;theme-id=1&amp;default-tab=result&amp;user=wheatup&amp;slug-hash=rXJrYm&amp;pen-title=CodePen%20Challenge%3A%20Hearthstone%20Card&amp;name=cp_embed_2" scrolling="no" frameborder="0" height="636" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="CodePen Challenge: Hearthstone Card" class="cp_embed_iframe " style="width: 100%; overflow: hidden; display: block; height: 100%;" id="cp_embed_rXJrYm"></iframe>
</div>