Анимация логотипа в SVG

106

12 октября 2019, 10:40

Итак, у меня есть логотип клиента, и я хочу анимировать его при прокрутке. Допустим, логотипом является DANIEL.

Когда пользователь прокручивает страницу вниз, я хочу, чтобы расстояние между буквами увеличилось, чтобы оно в конечном итоге стало D A N I E L.

Я видел, как это можно сделать с обычным текстом, но это будет, как я уже сказал, логотип SVG. Также логотип должен быть мобильным.

Кто может дать совет, как это сделать?

Answer 1

Это на самом деле очень просто. Вам просто нужно следить за событиями scroll, а затем обновлять элемент <text> в зависимости от того, как далеко вы прокрутили страницу вниз.

Я достиг увеличения межбуквенного интервала, используя атрибут представления letter-spacing.

window.addEventListener("scroll", function() { 
  document.getElementById("mytext").setAttribute("letter-spacing", (window.scrollY / window.outerHeight) + "em"); 
});

body { 
  height: 2000px; 
} 
 
svg { 
  position: fixed; 
}

<svg viewBox="0 0 600 100"> 
  <text id="mytext" x="300" y="70" font-size="50" text-anchor="middle">DANIEL</text> 
</svg>

Для других не текстовых элементов, таких как <path> и т.д., Вам потребуется немного другой подход. Вам нужно будет физически перемещать их с помощью трансформации.

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

var EXPAND_AMOUNT = 40; 
 
window.addEventListener("scroll", function() { 
  var scrollPercent = window.scrollY / window.outerHeight; 
  document.getElementById("obj1").setAttribute("transform", "translate("+(scrollPercent * 3 * -EXPAND_AMOUNT)+",0)"); 
  document.getElementById("obj2").setAttribute("transform", "translate("+(scrollPercent * 2 * -EXPAND_AMOUNT)+",0)"); 
  document.getElementById("obj3").setAttribute("transform", "translate("+(scrollPercent * -EXPAND_AMOUNT)+",0)"); 
  document.getElementById("obj4").setAttribute("transform", "translate("+(scrollPercent * EXPAND_AMOUNT)+",0)"); 
  document.getElementById("obj5").setAttribute("transform", "translate("+(scrollPercent * 2 * EXPAND_AMOUNT)+",0)"); 
  document.getElementById("obj6").setAttribute("transform", "translate("+(scrollPercent * 3 * EXPAND_AMOUNT)+",0)"); 
});

body { 
  height: 2000px; 
} 
 
svg { 
  position: fixed; 
}

<svg viewBox="0 0 600 100"> 
  <rect id="obj1" x="165" y="25" width="40" height="50"/> 
  <rect id="obj2" x="210" y="25" width="40" height="50"/> 
  <rect id="obj3" x="255" y="25" width="40" height="50"/> 
  <rect id="obj4" x="300" y="25" width="40" height="50"/> 
  <rect id="obj5" x="345" y="25" width="40" height="50"/> 
  <rect id="obj6" x="390" y="25" width="40" height="50"/> 
</svg>