Эффекты появления

ДАННАЯ ИНСТРУКЦИЯ ПЕРЕСТАЛА РАБОТАТЬ В TAPLINK ПОСЛЕ ОДНОГО ИЗ ОБНОВЛЕНИЙ ПЛАТФОРМЫ

Актуальная версия анимаций появления https://teletype.in/@onthewaytothesun/w5ecZluwxS4

Видеоинструкция: https://youtu.be/gugcMX7cVgI

1. Вставьте в самый верх страницы код

<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css"/>
<script src="https://www.delac.io/WOW/dist/wow.min.js"></script>
<script>

  new WOW().init();

</script>

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

ВНИМАНИЕ! Перед манипуляцией с кода сделайте себе копию своего старого кода на всякий случай

Рассмотрите открытый вами код повнимательнее, вернее, посмотрите первую строку вашего кода. Ваша цель — найти часть class="и тут будет какое-нибудь слово"
Поставьте после этого слова пробел и допишите "wow" и потом через еще один пробел напишите название анимации. Выбрать анимации можете на сайте разработчика кода https://animate.style

На этом сайте копируйте понравившуюся анимацию с помощью кнопочки

и вставьте в код.

ВНЫМАНИЕ

Эта страничка разработчика устарела и не все анимации работают корректно. Если после вставки перед анимацией есть часть "animate__", то удалите ее из имени!

Пример получившейся строчки:

<div class="wow fadeInLeft">text text text text text text text</div>

Отлично! Теперь этот код будет анимированные при появлении. Не нужно вставлять эти слова анимаций во все строчки, достаточно только в первую

Демонстрация работы: https://besttaplink.ru/p/87764a/

Задержки

По стандарту анимашки воспроизводятся, как только в поле видимости попадает анимированный элемент. Можно добавить задержку, чтобы элемент анимировался не сразу. Например, задержка поможет для элементов на первом экране, чтобы они не выкатывались все сразу. Для добавления задержки также, через пробел, допишите значения

animate__delay-1s

для задержки 1 секунды

animate__delay-2s

для задержки 2 секунды

animate__delay-3s

Для 3 секунд

animate__delay-4s

Для 2 секунд

animate__delay-5s

Для 5 секунд

То есть код будет выглядеть уже примерно так

<div class="wow fadeInLeft animate__delay-3s">text text text text text text text</div>

Также вы можете сделать дробную задержку через CSS. Для этого вам нужно найти строчку в своем коде, которая начинается с точки и названия класса, к которому вы прописывали слова для анимаций.
То есть, допустим, вы анимируете элемент
<p class="naruto-kruto wow fadeInLeft">Всякое содержимое</p>
Класс элемента, который мы анимировали — naruto-kruto, ведь к нему уже через пробел дописаны анимации. Так что ищем дальше в коде строчку .naruto-kruto
Нашли? Внутрь фигурных скобочек после нее пишем "animation-delay: 2s;"
Вместо 2s пишем свое число, в том числе дробное, например 1.5s

В случае с нашим примером получится
.naruto-kruto {
animation-delay: 0.5s;

и тут еще куча старых свойств этого элемента
}

UPD.СТАРНДАРТНЫЕ БЛОКИ

Можно навесить анимацию и на стандартные блоки! В теории можно анимировать каждую кнопку по-разному, но для этого нужно будет подредактировать каждый таплинк под свои запросы, поэтому я дам код, который анимирует все кнопки сразу

вот он:

<script>
  Array.from(document.querySelectorAll('.block-link')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('fadeInLeft');
    
  });
</script>

Вместо fadeInLeft вставьте понравившееся название анимашки с того же сайта, что был указан выше. ЭТОТ КОД НАДО СТАВИТЬ ВЫШЕ КОДА ИНИЦИАЦИИ, КОТОРЫЙ БЫЛ В НАЧАЛЕ ИНСТРУКЦИИ. ЧТОБЫ НЕ ОШИБИТЬСЯ, МОЖЕТЕ ЭТОТ КОД ВСТАВИТЬ В САМОЕ НАЧАЛО ТАПЛИНКА

По аналогии можно анимировать и стандартные баннеры

<script>
  Array.from(document.querySelectorAll('.block-banner')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('fadeInLeft');
    
  });
</script>

Заменив это название анимации на понравившееся вам

ЭТОТ КОД НАДО СТАВИТЬ ВЫШЕ КОДА ИНИЦИАЦИИ, КОТОРЫЙ БЫЛ В НАЧАЛЕ ИНСТРУКЦИИ. ЧТОБЫ НЕ ОШИБИТЬСЯ, МОЖЕТЕ ЭТОТ КОД ВСТАВИТЬ В САМОЕ НАЧАЛО ТАПЛИНКА

Стандартный блок текст тоже анимируется

<script>
  Array.from(document.querySelectorAll('.block-text')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('fadeInLeft');
    
  });
</script>

Вот эти вот коды для анимации стандартных блоков необходимо помещать ДО самого блока, иначе он не заанимируется!

Стандартный вопрос-ответ

<script>
  Array.from(document.querySelectorAll('.block-collapse')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартная каруселька

<script>
  Array.from(document.querySelectorAll('.block-pictures')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок видео

<script>
  Array.from(document.querySelectorAll('.block-video')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок "карта"

<script>
  Array.from(document.querySelectorAll('.block-map')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок "таймер"

<script>
  Array.from(document.querySelectorAll('.block-timer')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок с формой

<script>
  Array.from(document.querySelectorAll('.block-form')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок с формой

<script>
  Array.from(document.querySelectorAll('.block-form')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок "иконка с текстом"

<script>
  Array.from(document.querySelectorAll('.block-media')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Стандартный блок с прейскурантом

<script>
  Array.from(document.querySelectorAll('.block-pricing')).map((animation) => {
    animation.classList.add('wow');
  animation.classList.add('bounceOutUp');
  });
</script>

Хотите добавить в стандартные блоки задержку анимации?

Внутрь кода типа

добавьте animation.classList.add('animate__delay-2s'); только со своим числом секунд. В итоге должно выйти

<script> Array.from(document.querySelectorAll('.block-pricing')).map((animation) => { animation.classList.add('wow'); animation.classList.add('bounceOutUp');

animation.classList.add('animate__delay-2s'); }); </script>