Верстка и анимация лендинга

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

Цель проекта

Лендинг пейдж должен привлекать внимание, заинтересовывать и призывать посетителей страницы к действию – отправке своих данных по средствам формы обратной связи.

Верстка и анимация Landing Page

Для ускорения работы над «оживлением» страницы была использована библиотека готовых стилей Animate.css, которая имеет большой набор типовых анимацией. Но не все эффекты можно реализовать с помощью CSS-стилей, поэтому эффект параллакса на главном экране лендинга был реализован с помощью JS-анимации.

Отправка формы обратной связи

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

Технологии

  • HTML5 и CSS3,
  • Animate.css,
  • JS и CSS анимация,
  • Ajax-формы для сборов заявок.

Посмотреть сайт можно тут: WhiteCatPro.com

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *