Эффекты  [РЕШЕНО]

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 3
Аватара пользователя

Автор Темы
Barsenal93
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 14 авг 2015, 06:36
Версия Web Builder: 10.4.2

Эффекты

Сообщение Barsenal93 » 04 сен 2017, 12:00

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

Реклама
Аватара пользователя

MasterOfPuppets
Подающий надежды
Подающий надежды
Сообщения: 145
Зарегистрирован: 10 май 2015, 19:37
Версия Web Builder: 10.0.1
Имя: Александр
Контактная информация:

Эффекты

Сообщение MasterOfPuppets » 04 сен 2017, 14:06

Вам, похоже, wow анимация нужна. Объяснять дольше, держите проект
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Аватара пользователя

Alex15963
Знаток
Знаток
Сообщения: 420
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4

Эффекты

Сообщение Alex15963 » 05 сен 2017, 01:53

CSS3 анимация, по тригеру scroll свойства - opacity. По-моему - так. Если не поймешь - набросаю проект.

Аватара пользователя

Автор Темы
Barsenal93
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 14 авг 2015, 06:36
Версия Web Builder: 10.4.2

Эффекты

Сообщение Barsenal93 » 05 сен 2017, 04:33

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

Аватара пользователя

Alex15963
Знаток
Знаток
Сообщения: 420
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4

Эффекты

Сообщение Alex15963 » 05 сен 2017, 10:08

Держи свой проект. Думаю разберешься.
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Аватара пользователя

Автор Темы
Barsenal93
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 14 авг 2015, 06:36
Версия Web Builder: 10.4.2

Эффекты

Сообщение Barsenal93 » 10 сен 2017, 16:26

Не совсем подходящее решение, http://www.mikeinghamdesign.com/about.php на этой странице прям тот эффект, который мне нужен, но грамотно его реализовать не получается. Там все блоками показывается без рывков и прочего. Кто может подсказать, как реализовать такое решение?

Аватара пользователя

amidtl
Интересующийся
Интересующийся
Сообщения: 37
Зарегистрирован: 11 июл 2015, 21:57
Версия Web Builder: 12.0.2

Эффекты

Сообщение amidtl » 11 сен 2017, 01:22

Разместите все объекты на слой.

Свойства слоя -- CCS анимация
В разделе -- Анимации -- Добавить
Длительность: 500 (это скорость анимации)
Счётчик повторов: 1

Менеджер анимаций -- Добавить
Имя -- придумайте имя на латинице

Ключевой кадр: 0
Свойство: opacity
Значение: 0 (ноль)
OK

Ключевой кадр: 0
Свойство: transform
Преобразование Y: 20
Остальные параметры оставить по умолчанию
OK

Ключевой кадр: 100
Свойство: opacity
Значение: 1 (ноль)
OK

Ключевой кадр: 100
Свойство: transform
Все параметры оставить по умолчанию
OK

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

Аватара пользователя

Автор Темы
Barsenal93
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 14 авг 2015, 06:36
Версия Web Builder: 10.4.2

Эффекты

Сообщение Barsenal93 » 11 сен 2017, 03:35

Да, вы правы, анимация происходит точно так же, но тут вся суть в скроллинге и появлении, вот в этом у меня проблема...

Отправлено спустя 5 минут 38 секунд:
Тот эффект, который Вы расписали - это animate-fade-in-up (только по значение Y другое)...Вопрос остается откртым

Аватара пользователя

amidtl
Интересующийся
Интересующийся
Сообщения: 37
Зарегистрирован: 11 июл 2015, 21:57
Версия Web Builder: 12.0.2

Эффекты  [РЕШЕНО]

Сообщение amidtl » 11 сен 2017, 13:37

В слое:
CSS анимация -- раздел Анимации -- Ваша анимация -- Правка
Статус воспроизведения: paused

далее

Toolbox -- Стандартные -- Закладка
Закладку разместить внизу под слоем с анимацией (paused). Позиция (размещения) закладки влияет, когда именно сработает анимация при прокрутке страницы.

Свойства закладки -- События -- Добавить
Событие: onscrollreveal
Действие: Возобновить анимацию
Цель: выбрать ID слоя (объекта) с анимацией (paused)
OK -- Сделайте так для каждого слоя (объекта) с анимацией, в той же закладке.

Демо-пример: http://trtr.96.lt/anime.html
В примере во втором слое с анимацией установлена -- Задержка: 500

Аватара пользователя

Автор Темы
Barsenal93
Читатель
Читатель
Сообщения: 22
Зарегистрирован: 14 авг 2015, 06:36
Версия Web Builder: 10.4.2

Эффекты

Сообщение Barsenal93 » 11 сен 2017, 14:42

Блин, вот все почти так же делал, только не дошло, что паузу надо сделать. Большое спасибо, теперь буду знать, как подобный эффект реализовать

Аватара пользователя

Meggozavrpesya
Неофит
Сообщения: 1
Зарегистрирован: 16 сен 2017, 23:19
Версия Web Builder: 12.1
Имя: Василина
Контактная информация:

Эффекты

Сообщение Meggozavrpesya » 16 сен 2017, 23:21

Сделала себе на форум такой же! Автору благодарность!


Ответить Вложения 3

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость