Анимация текста в Tilda. Модификации для текстовой анимации

agadzhango 19.04.202329.10.2023 Комментариев нет

703

Содержимое

1 Введение
2 Как добавить анимацию текста в Tilda
3 Анимация текста в Тильда. Пиксель параллакс
4 Анимация текста в Тильде. Мультяшный текст
5 Анимация в Тильде. Флаг
6 Анимация текста в Tilda. Всплывающий текст
7 Анимация текста. Змейка
8 Анимация в Tilda. Волна
9 Анимация текста в Tilda. Умное словосочетание
10 Заключение

Введение

Анимация текста – это мощный инструмент для привлечения внимания к контенту. Независимо от того, какой тип контента вы создаете, анимация может значительно повысить его привлекательность и эффективность. В этой статье мы рассмотрим, как делается анимация текста в Tilda, а также как использовать различные модификации для создания уникальных эффектов.

Tilda – это онлайн-платформа для создания сайтов и лендингов. Она позволяет создавать красивые и функциональные сайты без необходимости знания кода.

Как добавить анимацию текста в Tilda

В Tilda Publishing анимацию для текста можно реализовать несколькими способами:

Базовая анимация в zero block
Step By Step (пошаговая) анимация в zero block
С использованием css и javascript кода

Первые два способа мы не будем затрагивать, так как они довольно простые, и перейдем сразу к варианту с использованием скриптов.

Анимация текста в Тильда. Пиксель параллакс

Для реализации этой анимации вам понадобится zero block, html элемент и небольшой скрипт:

Создайте zero block.
Удалите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add HTML».
Откройте html элемент и скопируйте в него следующий код:

<canvas></canvas>
<menu>
    <form onsubmit="init(event)"><input type="text" id="textInput"/></form>
</menu>
<style>
    body {
  font-family: Arial;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
canvas {
  background: linear-gradient(
    to bottom,
    rgb(6,9,43) 0%,
    rgb(30,45,75) 100%
  );
}
canvas, menu {
  position: absolute;
  top: 0;
  color: white;
}

#textInput {
    display:none;
}
</style>
<script>
    const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const layers = 4;
let size = 0;
let particles = [];
let targets = [];
const lerp = (t, v0, v1) => (1 - t) * v0 + t * v1;
const fov = 2000;
const viewDistance = 200;
let targetRotationY = 0.5;
let rotationY = 0.5;
let speed = 40;
let animFrame;
const texts = [
  "hello.",
];
let textIndex = 0;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Vector3 {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  static fromScreenCoords(_x, _y, _z) {
    const factor = fov / viewDistance;
    const x = (_x - canvas.width / 2) / factor;
    const y = (_y - canvas.height / 2) / factor;
    const z = _z !== undefined ? _z : 0;

    return new Vector3(x, y, z);
  }

  rotateX(angle) {
    const z = this.z * Math.cos(angle) - this.x * Math.sin(angle);
    const x = this.z * Math.sin(angle) + this.x * Math.cos(angle);
    return new Vector3(x, this.y, z);
  }
  rotateY(angle) {
    const y = this.y * Math.cos(angle) - this.z * Math.sin(angle);
    const z = this.y * Math.sin(angle) + this.z * Math.cos(angle);
    return new Vector3(this.x, y, z);
  }
  pp() {
    const factor = fov / (viewDistance + this.z);
    const x = this.x * factor + canvas.width / 2;
    const y = this.y * factor + canvas.height / 2;
    return new Vector3(x, y, this.z);
  }
}

function init(e) {
  if (e) e.preventDefault();
  cancelAnimationFrame(animFrame);
  const text =
    document.getElementById("textInput").value ||
    texts[textIndex++ % texts.length];
  let fontSize = 150;
  let startX = window.innerWidth / 2;
  let startY = window.innerHeight / 2;
  particles = [];
  targets = [];
  // Create temp canvas for the text, draw it and get the image data.
  const c = document.createElement("canvas");
  const cx = c.getContext("2d");
  cx.font = `900 ${fontSize}px Arial`;
  let w = cx.measureText(text).width;
  const h = fontSize * 1.5;
  let gap = 7;

  // Adjust font and particle size to fit text on screen
  while (w > window.innerWidth * 0.8) {
    fontSize -= 1;
    cx.font = `900 ${fontSize}px Arial`;
    w = cx.measureText(text).width;
  }
  if (fontSize < 100) gap = 6;
  if (fontSize < 70) gap = 4;
  if (fontSize < 40) gap = 2;
  size = Math.max(gap / 2, 1);
  c.width = w;
  c.height = h;
  startX = Math.floor(startX - w / 2);
  startY = Math.floor(startY - h / 2);
  cx.fillStyle = "#000";
  // For reasons unknown to me, font needs to be set here again, otherwise font size will be wrong.
  cx.font = `900 ${fontSize}px Arial`;
  cx.fillText(text, 0, fontSize);
  const data = cx.getImageData(0, 0, w, h);

  // Iterate the image data and determine target coordinates for the flying particles
  for (let i = 0; i < data.data.length; i += 4) {
    const rw = data.width * 4;
    const rh = data.height * 4;
    const x = startX + Math.floor((i % rw) / 4);
    const y = startY + Math.floor(i / rw);

    if (data.data[i + 3] > 0 && x % gap === 0 && y % gap === 0) {
      for (let j = 0; j < layers; j++) {
        targets.push(Vector3.fromScreenCoords(x, y, j * 1));
      }
    }
  }

  targets = targets.sort((a, b) => a.x - b.x);
  loop();
  return false;
}

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // As long as there are targets, keep creating new particles.
  // Remove target from the targets array when it's been assigned to a particle.
  for (let i = 0; i < speed; i++) {
    if (targets.length > 0) {
      target = targets[0];
      x = canvas.width / 2 + target.x * 10;
      y = canvas.height / 2;
      z = -10;

      const position = Vector3.fromScreenCoords(x, y, z);
      const interpolant = 0;

      particles.push({ position, target, interpolant });
      targets.splice(0, 1);
    }
  }

  particles
    .sort((pa, pb) => pb.target.z - pa.target.z)
    .forEach((p, i) => {
      if (p.interpolant < 1) {
        p.interpolant = Math.min(p.interpolant + 0.01, 1);

        p.position.x = lerp(p.interpolant, p.position.x, p.target.x);
        p.position.y = lerp(p.interpolant, p.position.y, p.target.y);
        p.position.z = lerp(p.interpolant, p.position.z, p.target.z);
      }
      const rotationX = Math.sin(Date.now() / 2000) * 0.8;
      rotationY = lerp(0.00001, rotationY, targetRotationY);
      const particle = p.position.rotateX(rotationX).rotateY(rotationY).pp();

      const s = 1 - p.position.z / layers;
      ctx.fillStyle =
        p.target.z === 0 ? "rgb(114, 204, 255)" : `rgba(242, 101, 49, ${s})`;

      ctx.fillRect(particle.x, particle.y, s * size, s * size);
    });

  animFrame = requestAnimationFrame(loop);
}

init();

window.addEventListener("mousemove", (e) => {
  const halfHeight = window.innerHeight / 2;
  targetRotationY = (e.clientY - halfHeight) / window.innerHeight;
});

function setSpeed(e, val) {
  document.querySelectorAll("button").forEach((el) => {
    el.classList.remove("active");
  });
  e.target.classList.add("active");
  speed = val;
}

</script>

Сохраните изменения и выйдите из html элемента.

Эта анимация будет работать в пределах html элемента. Разместите этот элемент основываясь на том, в какой области зеро блока будет воспроизводиться эта анимация. Если, как и в нашем случае, вы хотите заполнить анимацией весь блок, то сделайте следующее:

Выберите html элемент.
В пунктах «W» и «H» выберите «%» вместо «px».
Нажмите на «+container», «window container».
В «AXIS X» и «AXIS Y» выберите значение «center».
Сохраните изменения и выйдите из zero block.
Нажмите на кнопку «Настройки» в зеро блоке и скопируйте его ID.
Вернитесь в HTML элемент и вставьте скопированный ID вместо слова «body».
Выйдите из html элемента.
Кликните в пустой области левой кнопкой мыши, чтобы открыть настройки самого блока.
В пункте «window container height» пропишите значение «100».
Сохраните изменения и опубликуйте страницу.

Анимация текста в Тильде. Мультяшный текст

Анимация текста в Tilda. Мультяшный текст

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

Нажмите на кнопку «+» или «Все блоки».
Найдите пункт «Другое» и выберите блок «Т123 HTML-блок».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<h1 class='mtext'><span>"TILDA</span><span>PUBLISHING"</span></h1>
<style>
    @import url("https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap");
 #rec580041736 {
	 background: radial-gradient(circle, rgba(255, 252, 0, 1) 0%, rgba(240, 237, 23, 1) 100%);
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 font-family: "Luckiest Guy", cursive;
}
 .mtext  {
	 margin: 0;
	 font-size: 8em;
	 padding: 0;
	 color: white;
	 text-shadow: 0 0.1em 20px rgba(0, 0, 0, 1), 0.05em -0.03em 0 rgba(0, 0, 0, 1), 0.05em 0.005em 0 rgba(0, 0, 0, 1), 0em 0.08em 0 rgba(0, 0, 0, 1), 0.05em 0.08em 0 rgba(0, 0, 0, 1), 0px -0.03em 0 rgba(0, 0, 0, 1), -0.03em -0.03em 0 rgba(0, 0, 0, 1), -0.03em 0.08em 0 rgba(0, 0, 0, 1), -0.03em 0 0 rgba(0, 0, 0, 1);
}
 .mtext  span {
	 transform: scale(0.9);
	 display: inline-block;
}
 .mtext  span:first-child {
	 animation: bop 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
 .mtext span:last-child {
	 animation: bopB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate;
}
 @keyframes bop {
	 0% {
		 transform: scale(0.9);
	}
	 50%, 100% {
		 transform: scale(1);
	}
}
 @keyframes bopB {
	 0% {
		 transform: scale(0.9);
	}
	 80%, 100% {
		 transform: scale(1) rotateZ(-3deg);
	}
}
 
</style>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «#rec580041736».
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Сохраните изменения и опубликуйте страницу.

Анимация в Тильде. Флаг

Эта анимация имитирует движение флага на ветру. В качестве «флага» выступает слово или словосочетание, которое вы напишете. Принцип создания анимации точно такой же, как и в предыдущем случае:

Создайте блок «Т123».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<div id="ui">
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
    <div class="text">TILDA</div>
</div>
<style>
 #rec580041736 {
	 background: rgba(10, 20, 40, 1);
	 height: 50vh;
	 overflow: hidden;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 perspective: 500px;
}
 div {
	 will-change: transform;
}
 #ui {
	 transform-style: preserve-3d;
}
 #ui .text {
	 position: absolute;
	 font-size: 15rem;
	 color: #fff;
	 line-height: 15rem;
	 font-family: 'Anton', sans-serif;
	 padding: 20px 0;
	 mix-blend-mode: screen;
	 transform-style: preserve-3d;
}
 #ui .text:nth-child(1) {
	 clip-path: polygon(-30% 0, -20% 0, 20% 100%, 0% 100%);
	 animation: wave 2000ms -10000ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(2) {
	 clip-path: polygon(-25% 0, -15% 0, 25% 100%, 5% 100%);
	 animation: wave 2000ms -9800ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(3) {
	 clip-path: polygon(-20% 0, -10% 0, 30% 100%, 10% 100%);
	 animation: wave 2000ms -9600ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(4) {
	 clip-path: polygon(-15% 0, -5% 0, 35% 100%, 15% 100%);
	 animation: wave 2000ms -9400ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(5) {
	 clip-path: polygon(-10% 0, 0% 0, 40% 100%, 20% 100%);
	 animation: wave 2000ms -9200ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(6) {
	 clip-path: polygon(-5% 0, 5% 0, 45% 100%, 25% 100%);
	 animation: wave 2000ms -9000ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(7) {
	 clip-path: polygon(0% 0, 10% 0, 50% 100%, 30% 100%);
	 animation: wave 2000ms -8800ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(8) {
	 clip-path: polygon(5% 0, 15% 0, 55% 100%, 35% 100%);
	 animation: wave 2000ms -8600ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(9) {
	 clip-path: polygon(10% 0, 20% 0, 60% 100%, 40% 100%);
	 animation: wave 2000ms -8400ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(10) {
	 clip-path: polygon(15% 0, 25% 0, 65% 100%, 45% 100%);
	 animation: wave 2000ms -8200ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(11) {
	 clip-path: polygon(20% 0, 30% 0, 70% 100%, 50% 100%);
	 animation: wave 2000ms -8000ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(12) {
	 clip-path: polygon(25% 0, 35% 0, 75% 100%, 55% 100%);
	 animation: wave 2000ms -7800ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(13) {
	 clip-path: polygon(30% 0, 40% 0, 80% 100%, 60% 100%);
	 animation: wave 2000ms -7600ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(14) {
	 clip-path: polygon(35% 0, 45% 0, 85% 100%, 65% 100%);
	 animation: wave 2000ms -7400ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(15) {
	 clip-path: polygon(40% 0, 50% 0, 90% 100%, 70% 100%);
	 animation: wave 2000ms -7200ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(16) {
	 clip-path: polygon(45% 0, 55% 0, 95% 100%, 75% 100%);
	 animation: wave 2000ms -7000ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(17) {
	 clip-path: polygon(50% 0, 60% 0, 100% 100%, 80% 100%);
	 animation: wave 2000ms -6800ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(18) {
	 clip-path: polygon(55% 0, 65% 0, 105% 100%, 85% 100%);
	 animation: wave 2000ms -6600ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(19) {
	 clip-path: polygon(60% 0, 70% 0, 110% 100%, 90% 100%);
	 animation: wave 2000ms -6400ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(20) {
	 clip-path: polygon(65% 0, 75% 0, 115% 100%, 95% 100%);
	 animation: wave 2000ms -6200ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(21) {
	 clip-path: polygon(70% 0, 80% 0, 120% 100%, 100% 100%);
	 animation: wave 2000ms -6000ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(22) {
	 clip-path: polygon(75% 0, 85% 0, 125% 100%, 105% 100%);
	 animation: wave 2000ms -5800ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(23) {
	 clip-path: polygon(80% 0, 90% 0, 130% 100%, 110% 100%);
	 animation: wave 2000ms -5600ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(24) {
	 clip-path: polygon(85% 0, 95% 0, 135% 100%, 115% 100%);
	 animation: wave 2000ms -5400ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(25) {
	 clip-path: polygon(90% 0, 100% 0, 140% 100%, 120% 100%);
	 animation: wave 2000ms -5200ms ease-in-out infinite alternate;
}
 #ui .text:nth-child(26) {
	 clip-path: polygon(95% 0, 105% 0, 145% 100%, 125% 100%);
	 animation: wave 2000ms -5000ms ease-in-out infinite alternate;
}
 @keyframes wave {
	 0% {
		 transform: translate(-50%, -50%) scale(0.9) rotateX(20deg) rotateY(20deg) rotateZ(0deg);
		 color: rgba(0, 30, 100, 1);
	}
	 100% {
		 transform: translate(-50%, -50%) scale(1.1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		 color: rgba(50, 230, 255, 1);
	}
}
 
</style>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «#rec580041736».
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Сохраните изменения и опубликуйте страницу.

Анимация текста в Tilda. Всплывающий текст

Переходим к третьей анимации, которая управляется кликом на левую кнопку мыши. Изначально возникает трехстрочный текст, а при клике этот текст исчезает. Повторный клик возвращает текст в исходное положение.

Создайте блок «Т123».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<h1 class="strip">
  Work hard<br>
  Do good<br>
  Be incredible
</h1>
<style>
    #rec580041736 {
	 height: 50%;
	 background: linear-gradient(15deg, #00a9f1, #cf00f1);
	 color: #fff;
	 position: relative;
}
 #rec580041736:before {
	 content: 'CLICK';
	 font-family: 'Roboto';
	 font-size: 15px;
	 color: rgba(255, 255, 255, 1);
	 position: absolute;
	 z-index: 10;
	 right: 30px;
	 top: 30px;
}
 @media (max-width: 480px) {
	 body:before {
		 top: auto;
		 bottom: 20px;
		 right: 20px;
	}
}
 .strip {
	 font-family: Roboto, sans-serif;
	 font-weight: 100;
	 font-size: 100px;
	 margin: 0;
	 padding: 30px;
	 text-transform: uppercase;
}
 @media (max-width: 700px) {
	 .strip {
		 padding: 20px;
		 font-size: 40px;
	}
}
 .strip span {
	 display: inline-block;
	 transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
	 transform: translate(20%, 100%);
	 position: relative;
	 z-index: 1;
	 letter-spacing: -0.03em;
	 text-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
}
 .strip span:before {
	 content: '';
	 position: absolute;
	 z-index: 1;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transform: translateY(-40%);
	 transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
}
 .strip span.row {
	 overflow: hidden;
	 line-height: 0.9;
	 display: block;
	 transform: none;
}
 .strip span.row:before {
	 display: none;
}
 .strip .animate {
	 transform: translate(0, 0);
}
 .strip .animate:before {
	 transform: translateY(100%);
}
 
</style>
<script>
    $('.strip').each(function(){
  var $t = $(this),
      rows = $.trim($t.html()).split('<br>');

  $t.html('');

  $.each(rows, function(i, val){
    $('<span class="row"></span>').appendTo($t);

    var letters = $.trim(val).split('');

    $.each(letters, function(j, v){
      v = (v == ' ') ? ' ' : v;
      $('<span>' + $.trim(v) + '</span>').appendTo($('.row:last', $t));
    });

  });
});

$('body').click(function(){
  for (i = 0; i < $('.strip span').length; i++) {
    (function(ind) {
      setTimeout(function(){
          $('.strip span:not(".row")').eq(ind).toggleClass('animate');
      }, ind * 15);
    })(i);
  }
}).click();

</script>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «#rec580041736» и «#rec580041736:before».
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Сохраните изменения и опубликуйте страницу.

Анимация текста. Змейка

Любое слово или словосочетание, которое вы напишете, будет красиво переливаться, напоминаю знаменитую игру змейка. Принцип создания этой анимации аналогичен трём предыдущим:

Нажмите на кнопку «+» или «Все блоки».
Найдите пункт «Другое» и выберите блок «Т123 HTML-блок».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<div class="container">
  <svg viewBox="0 0 960 300">
    <symbol id="s-text">
      <text text-anchor="middle" x="50%" y="80%">TILDA</text>
    </symbol>

    <g class = "g-ants">
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
    </g>
  </svg>
</div>
<style>
    @import url(https://fonts.googleapis.com/css?family=Montserrat);

.uc-bbody{
  height: 100%;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

.uc-bbody{
  background: #030321;
  font-family: Arial;
}

.container {
  display: flex;
/*   border:1px solid red; */
  height: 100%;
  align-items: center;
}

svg {
    display: block;
    font: 10.5em 'Montserrat';
    width: 960px;
    height: 300px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #BD0034;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}
</style>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «.uc-bbody» в двух местах.
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Сохраните изменения и опубликуйте страницу.

Анимация в Tilda. Волна

Представьте себе любое слово, внутри которого колыхаются волны, как будто вы находитесь посреди океана. Эта анимация имитирует именно такой эффект:

Нажмите на кнопку «+» или «Все блоки».
Найдите пункт «Другое» и выберите блок «Т123 HTML-блок».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="450px" height="240px" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="#000" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
    
    <text id="text" transform="translate(2,116)" font-family="'Cabin Condensed'" font-size="161.047">OCEAN</text>
    
    <mask id="text-mask">
      <use x="0" y="0" xlink:href="#text" opacity="1" fill="#ffffff"/>
    </mask>
    
    <g id="eff">
      <use x="0" y="0" xlink:href="#text" fill="#a2a3a5"/>
  
  <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-300" y="50" width="1200" height="120" opacity="0.3">
    <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="2s"/>
  </rect>
   <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="45" width="1600" height="120" opacity="0.3">
    <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="3s"/>
  </rect>
      
  <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="800" height="120" opacity="0.3">
    <animate attributeType="xml" attributeName="x" from="-200" to="0" repeatCount="indefinite" dur="1.4s"/>
  </rect>
      <rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" y="55" width="2000" height="120" opacity="0.3">
    <animate attributeType="xml" attributeName="x" from="-500" to="0" repeatCount="indefinite" dur="2.8s"/>
  </rect>
    </g>
  </defs>
 
	  <use xlink:href="#eff" opacity="0.9" style="mix-blend-mode:color-burn"/>

</svg>

  
<style>
.uc-bbody {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content:center;
}

</style>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «.uc-bbody.
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Опубликуйте страницу.

Анимация текста в Tilda. Умное словосочетание

Последняя анимация представляет из себя словосочетание, в котором второе слово красиво меняется на другое. Это простая, но эффективная анимация, которая привлечет внимание на ваш тильда сайт.

Нажмите на кнопку «+» или «Все блоки».
Найдите пункт «Другое» и выберите блок «Т123 HTML-блок».
Нажмите на кнопку «Контент» и скопируйте в него следующий код:

<h1 class='anim'>
  <span>Значение</span>
  <div class="message">
    <div class="word1">close</div>
    <div class="word2">code</div>
    <div class="word3">creating</div>
  </div>
</h1>

<style>
    * {
  box-sizing: border-box;
}

.uc-bbody {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height:50%;
}
.anim {
  color: #333;
  font-family: tahoma;
  font-size: 3rem;
  font-weight: 100;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 550px;
}

.anim span {
  font-size: 40px;
  margin-left: 40px;
}

.message {
  background-color: yellow;
  color: #333;
  display: block;
  font-weight: 900;
  overflow: hidden;
  position: absolute;
  padding-left: 0.5rem;
  top: 0.2rem;
  left: 270px;
  animation: openclose 5s ease-in-out infinite;
}

.word1, .word2, .word3 {
  font-family: tahoma;
}

@keyframes openclose {
  0% {
    top: 0.2rem;
    width: 0;
  }
  5% {
    width: 0;
  }
  15% {
    width: 230px;
  }
  30% {
    top: 0.2rem;
    width: 230px;
  }
  33% {
    top: 0.2rem;
    width: 0;
  }
  35% {
    top: 0.2rem;
    width: 0;
  }
  38% {
    top: -4.5rem;
    
  }
  48% {
    top: -4.5rem;
    width: 190px;
  }
  62% {
    top: -4.5rem;
    width: 190px;
  }
  66% {
    top: -4.5rem;
    width: 0;
    text-indent: 0;
  }
  71% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  86% {
    top: -9rem;
    width: 285px;
  }
  95% {
    top: -9rem;
    width: 285px;
  }
  98% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  100% {
    top: 0;
    width: 0;
    text-indent: 0;
  }
}
</style>

Сохраните изменения и выйдите из меню «Контент».
Нажмите на кнопку «Настройки» и скопируйте ID вашего блока «Т123».
Вернитесь в «Контент» и вставьте ID вместо «.uc-bbody.
Чтобы изменить высоту блока, нажмите на «Настройки» и задайте отступы сверху и снизу.
Опубликуйте страницу.

Заключение

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

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

Надеемся, что этот обзор помог вам расширить свой арсенал инструментов для создания анимированного текста в Tilda и вдохновил на создание уникального и привлекательного контента для вашего сайта.

Больше текстовой анимации тут

Видео версия этой статьи тут

Введение

Как добавить анимацию текста в Tilda

Анимация текста в Тильда. Пиксель параллакс

Анимация текста в Тильде. Мультяшный текст

Анимация в Тильде. Флаг

Анимация текста в Tilda. Всплывающий текст

Анимация текста. Змейка

Анимация в Tilda. Волна

Анимация текста в Tilda. Умное словосочетание

Заключение

Вам также понравится

Как выполнить показ скрытых блоков нажатием на кнопку в Tilda publishing

Как сделать поэкранный скролл в Tilda. Горизонтальный и вертикальный

Как изменить полосу прокрутки в Tilda: подробный гайд

Добавить комментарий Отменить ответ