Как создать параллакс эффект?

Question

[faleaksey]

Всем привет!
Имеется подобная анимация раскрытия и сворачивания блоков:

Это реализуется добовлением классов со свойством css keyframes animation или через js делать анимацию?

Comments

[Rustam Bainazarov]

Поверьте, вам придется очень непросто. Без JS это сделать невозможно.

Answer 1

[Анатолий Куликов]

Здесь понадобится и то, и другое. Очень сложный пример, полностью соглашусь.

Тут наверное сделать без vue/react/angular будет достаточно больно.

Хотя данный эффект не оригинален - просмотрите, возможно что-то подобное реализовано и есть какая-то библиотека. Есть сайт unheap, посмотрите там.

Comments

[faleaksey]

Анатолий Куликов за unheap отдельное спасибо)

[mobidev]

Артём Петренков, каким боком angular к анимации html?

[Анатолий Куликов]

Артём Петренков, согласен, написал лишнего. Хотя несколько проще, поскольку можно только один раз написать такой элемент (с взаимодействием и подтягиванием контента) и всё.

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

Answer 2

[profesor08]

Что-то я не увидел каких-то чрезвычайных сложностей. Самое сложное тут это откалибровать darg&drop, все. Остальное простые транзиции, ничего сложного. Не надо смотреть на вау-эффект разинув рот, смотри на то, что происходит с блоками. Обыкновенное изменение состояния добавлением классов.