Визуализация опций АНИМАЦИИ на одной странице

[UraAlpeev]

Собрал все виды опций Animation и Motion Effects на одной странице в виде
"справочника"
и пользуюсь, потому что помнить все трудно.

Ссылка на "справочник"

[spoon]

Полезно

[Alex15963]

Молодец! Спасибо!

[Eric]

Спасибо

[Amigo01]

Спасибо!!!

[UraAlpeev]

Добавил страницу Transitions.

Не все ключи удалось запустить,
например, очень хотел использовать ключ color для текста, но безрезультатно - нет реакции, хотя этот ключ нормально используется в Animation Manager, например в rainbow-text.
Если у кого-то получится, сообщите...

https://uraalpeev.online/animation/Transition.html

[Bonis]

Годы трудов)

шучу, шикарная визуализация.
Благодарю от души.

[UraAlpeev]

Добавил страницу Rollover Layer

https://uraalpeev.online/animation/RolloverLayer.html

[UraAlpeev]

Rollover Text
https://uraalpeev.online/animation/RolloverText.html
и
Rollover Image
https://uraalpeev.online/animation/RolloverImage.html

[Alex15963]

Спасибо!

[UraAlpeev]

Да, забыл добавить, что там теперь такой набор:

Motion Effects
Animation
Transitions
Rollover Layer
Rollover Text
Rollover Image
Tabs
Hide&Show with effects
PhotoCollage

[serega]

Юра, найди бесплатный хостинг, положи сайт на вечное хранение

[Alex15963]

Вот html

[serega]

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

[UraAlpeev]

Да, не заметил, что ссылка на ресурс уже недействительна.
Выложил снова https://alpeee.ru/animation

[serega]

Красиво, да.
А это совпадение, что недавно вышло в этом CSS

Код: Выделить всё

timeline-scope:
scroll-timeline:
animation-timeline:

но ты это не использовал ? По идее, там тоже можно следить за скроллом.

Отправлено спустя 12 минут 3 секунды:
Юра, а сделай это в цикле , сократи код в 35 раз.

Код: Выделить всё

function onScrollImage1()
   {
      var $obj = $("#wb_Image1");
      if (!$obj.hasClass("in-viewport") && $obj.inViewPort(false))
      {
         $obj.addClass("in-viewport");
         AnimateCss('wb_Image1', 'transform-bounce', 0, 2000);
      }
      else
      if ($obj.hasClass("in-viewport") && !$obj.inViewPort(true))
      {
         $obj.removeClass("in-viewport");
         AnimateCss('wb_Image1', 'animate-fade-out', 0, 0);
      }
   }
   if (!$('#wb_Image1').inViewPort(true))
   {
      $('#wb_Image1').addClass("in-viewport");
   }
   onScrollImage1();
   $(window).scroll(function(event)
   {
      onScrollImage1();
   });

Может , местная публика засядет за изучение JS . Здесь нуДно только список составить из всех transform-bounce