7 элементов после клика по кнопке «Сравнить цены» должны совершить движения, аналогичное приведенному по ссылке https://threejs.org/examples/css3d_periodictable.html. 3D вращение можно не делать ради адаптивности. (блок «хоровод»).

Элемент – текст с фоном внутри контура в виде бутылок для кулерной воды. Каждый элемент - кликабельный и интерактивный (смена прозрачности, изменение цвета границы при наведении мыши и т.п.).

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

На освободившемся экране открыть окно, в котором 70% площади занимает описание открывшегося элемента, а 30% внизу окна - схематичное изображение травы (вертикальные полоски зеленого цвета) – блок «трава». У этого блока два варианта анимации.

«Засыхание» - цвет травы меняется на желтый, трава сокращается в размерах, превращаясь в бурую пыль.

«Расцветание» - над зеленой травой плавно поднимаются вверх на 30% три схематичные ромашки (кружок на палочке желтого цвета и вокруг него эллипсы, как лепестки).

Время анимации травы индивидуальное для каждого элемента и зависит от количества знаков в тексте каждого элемента.

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

Цель работы – сравнить конверсию покупок в интернете без кнопки и с кнопкой "Сравнить цены". Сделанный проект будет внедрен в готовый сайт.

Результаты работы представить в виде файлов.

Предлагается работу выполнить в 4 этапа:

1.«Засыхание» + «Расцветание»;

2. Активный элемент разворачивается, а 6 смещаются (вправо или вверх);

3. «Хоровод»;

4. Финальная верстка страницы

Сложность работы в адаптивности – кодом менять вектора движений элементов и их размеры, сохраняя читабельность, при изменении размеров экрана.