Небольшое задание на 1.5 часа это максимум. Нужно добавить параллакс эффект и волны от клика на первом экране :)
Сейчас есть: созданный лендинг. HTML, CSS, пара скриптов. 3 варианта верстки – под мобильные, планшеты и десктопы (980px, 768px и 360px).
Все это лежит здесь:
В целом идея звучит так: сделать первый экран живым.
Первое
Использовать параллакс эффект. Есть 3 слоя: фон (статичен), карта и название сайта с вторым заголовком (карта и заголовки совсем немного движутся в противоположную сторону от движения мышки).
Второе
На карте размещены 4 локации. Из локаций в случайном порядке исходят волны красного цвета. При клике на локацию исходит новая дополнительная волна из нажатой локации. То есть можно одновременно сделать несколько волн (см картинку
.
Комментарии:
- При наведении мышь превращается в руку
- Алгоритм переключения: случайный порядок, а не подряд!
- Смотреть, чтобы на всех 3 версиях верстки 1) наши три буллита, логотип и второй заголовок не конфликтовали между собой, чтобы между ними было достаточно места, на этом скрине его мало!
,
Для этого можно подвинуть карту и т.д. 2) в минимальном разрешении для этого формата карта умещалась на экране
Скорость между рождением новых волн: 3 секунды. Сама по себе волна расширяется 1.5 секунды, потом исчезает.
Все это должно работать во всех 3 версиях: десктоп, плашнет, мобайл
----------
Сверху слева удалить тот логотип, на его место поставить тот, что сейчас посередине экрана находится.