Разработка промо-сайта для компании Bayer

Разработка промо-сайта для компании Bayer

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

Новый современный дизайн для сайте 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 главной страницы, то зажатым будет ползунок «Насыщенная жизнь».
Соответственно если зашли на второстепенную страницу со второго слайда главной страницы, то зажатым будет «Умные гаджеты».

 

Хотите заказать себе такой же промо-сайт? Заполните форму на создание сайта или верстку и мы изготовим вам промо-сайт в течении двух недель по лучшей цене!