Разработка промо-сайта для лекарственного препарата

В начале года мы завершили промо сайт "Смарт контрацепция" для компании Bayer AG. Сайт о лекарственном средстве для женщин.

Задача

Новый современный дизайн для сайте smartcontraception.ru, который посвящен лекраственному препарату для умной женской контрацепции производства Bayer Healthcare LLC был закончен в феврале 2016. Из особенностей данного сайта стоит отметить его адаптивность для всех устройств, сложную анимацию объектов, и удобство просмотра контента в один экран по высоте. Натяжку верстки на движок сайта осуществляли другие разработчики, так как политика компании Байер не позволяет проводить все работы по проекту в одной компании. В дальнейшем сайт будет работать на Team CMS.

Краткое ТЗ

Главная страница
  1. Главная страница представляет из себя ТРИ СЛАЙДА.
    Переход от одного слайда к другому осуществляется ползунком.
  2. При переключении состояния ползунка меняется большая картинка. А так же меняется заголовок у ползунка «Насыщенная жизнь», «Умные гаджеты» и «Ты и Фолаты»
  3. И становятся активными определенные картинки, соответствующие состоянию СЛАЙДА. Нужно реализовать плавный переход от слайда к слайду с эффектом выезжающих полей для заголовка и появлением текста.  
  4. При бездействии пользователя более чем 5 секунд, происходит автоматический передвижение ползунка в следующее состояние. Данный процесс нужно зациклить. Т.е. переход по слайдам осуществляется в следующем порядке 1-2-3-1-2-3… 
  5. При наведении на подсвеченную (активную) картинку, она должна иметь эффект плавного увеличения на 10%.
  6. Ссылки в подвале сайта. При наведении должно пропадать подчеркивание и менять цвет на голубой. Берем цвет с кнопки «ГИНЕКОЛОГ ONLINE».
  7. Ссылки соц. сетей, тоже должны менять цвет при наведении на голубой как в пункте №6. 
  8. Кнопка «ГИНЕКОЛОГ ONLINE» при нажатии имеет эффект зажатой кнопки.
  9. Страница должна масштабироваться под любое разрешение экрана с условием отображения во весь экран без появления вертикального или горизонтального скрола.
    Т.е. высота и ширина 100%.
  10. Обеспечить плавный переход от слайда к слайду пункт №3.
Главная страница (Адаптивная версия)
  1. Адаптивная верстка для отображения сайта на мобильных устройствах (смартфоны и планшеты).
  2. Функционал и эффекты перехода постараться сохранить с desktop версии сайта.
  3. Так же обеспечить автоматический переход от слайда к слайду в случае бездействия пользователя в течении 5 секунд.
Второстепенная страница

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

  1. Логотип SMART является ссылкой на главную страницу.
  2. Появляется вертикальное меню слева, которое закреплено по высоте и не прокручивается вместе с контентом находящимся в правой части экрана (картинки). Содержащее три ползунка. И ссылки по сайту ведущие на типовые страницы.
    А так же ссылки на соц. сети. И Гинеколог online.
    Для адаптивной версии меню должно иметь возможность скрыть. 
  3. Страница должна отображаться во весь экран при любом разрешении экрана. 100% по ширине. Высота страница обусловлена набором отображаемых картинок соответствующей зажатым ползункам. Масштабируется в результате набора картинок.
  4. Функционал ползунков следующий:
    • Насыщенная жизнь
    • Умные гаджеты
    • Ты и фолаты

При заходе на страницу отображается зажатым ползунок соответствующий переходу с главной страницы. Т.е. если мы перешли на второстепенную страницу с слайда №1 главной страницы, то зажатым будет ползунок «Насыщенная жизнь».
Соответственно если зашли на второстепенную страницу со второго слайда главной страницы, то зажатым будет «Умные гаджеты».