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

[Barsenal93]

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

[MasterOfPuppets]

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

[Alex15963]

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

[Barsenal93]

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

[Alex15963]

Держи свой проект. Думаю разберешься.

[Barsenal93]

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

[dlod]

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

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

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

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

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

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

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

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

[Barsenal93]

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

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

[dlod]

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

далее

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

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

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

[Barsenal93]

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

[Meggozavrpesya]

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