YOUX agency
youx.agency
Прайс
Услуги
Портфолио
Контакты
Обсудить проект
SEO
Аудит сайта
Разработка
Лендинги
UX/UI Дизайн
Дизайн в Figma
Интеграции
Интеграция 1с
Другое
Заполнить бриф
Корпоративные сайты
Интернет-магазины
Тех. поддержка
Оптимизация сайта
Верстка проектов
Брендинг
Интеграция Iiko
Модификации
Переезд с другой CMS
Обучение
+2

Нестандартные эффекты появления текста в Тильда

Данный код помогает добавить вашему тексту в зеро-блок интересные и необычные эффекты при появлении. Сохрайняте, чтобы не потерять

Заказать код
Вступить в чат
Предложить код
Видео-урок

Инструкция

1

Выберите нужный эффект из списка. Обновите страницу для просмотра

2

Добавьте стиль

вашему тексту в зеро "youxagency"

3

Скопируйте один из скриптов ниже и вставьте на страницу в блок "T123"

Скопировать код №1
Код скопирован

Эффект #1 (slideInBlurred)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>

.youxagency {
  animation: slideInBlurred 1s forwards;
}

@keyframes slideInBlurred {
  from {
    opacity: 0;
    transform: translateX(-50px) rotate(15deg);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
    filter: blur(0);
  }
}
</style>
Скопировать код №2
Код скопирован

Эффект # 2 (bounceIn)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>
.youxagency {
  animation: bounceIn 1s forwards;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
Скопировать код №3
Код скопирован

Эффект # 3 (flip-in)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>

.youxagency {
  animation: flipIn 1s forwards;
}

@keyframes flipIn {
  from {
    transform: rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0);
    opacity: 1;
  }
}
</style>
Скопировать код №4
Код скопирован

Эффект # 4 (flickerAndFade)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->


<style>

.youxagency {
  animation: flickerAndFade 2s ease-in-out forwards;
  opacity: 0;
}

@keyframes flickerAndFade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
</style>
Скопировать код №5
Код скопирован

Эффект # 5 (text-wave)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>

.youxagency {
  animation: textWave 5s linear forwards;
}

@keyframes textWave {
  0% {
    letter-spacing: 2px;
    transform: rotate(-2deg);
  }
  20% {
    letter-spacing: 4px;
    transform: rotate(2deg);
  }
  40% {
    letter-spacing: 2px;
    transform: rotate(-2deg);
  }
  60% {
    letter-spacing: 4px;
    transform: rotate(2deg);
  }
  80% {
    letter-spacing: 2px;
    transform: rotate(-2deg);
  }
  100% {
    letter-spacing: 0px;
    transform: rotate(0deg);
  }
}

</style>
Скопировать код №6
Код скопирован

Эффект # 6 (floating-text)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>

.youxagency {
  animation: floatingLetters 5s ease-in-out;
}

@keyframes floatingLetters {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}


</style>
Скопировать код №7
Код скопирован

Эффект # 7 (flipping-text)


 <!-- Добавляем нестандартные эффекты появления текста в Тильда -->
 <!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->

<style>

.youxagency {
  animation: flipping 2s ease-in-out ;
}

@keyframes flipping {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}


</style>

Другие модификации