Задача
Новый современный дизайн для сайте smartcontraception.ru, который посвящен лекраственному препарату для умной женской контрацепции производства Bayer Healthcare LLC был закончен в феврале 2016. Из особенностей данного сайта стоит отметить его адаптивность для всех устройств, сложную анимацию объектов, и удобство просмотра контента в один экран по высоте. Натяжку верстки на движок сайта осуществляли другие разработчики, так как политика компании Байер не позволяет проводить все работы по проекту в одной компании. В дальнейшем сайт будет работать на Team CMS.
Краткое ТЗ
Главная страница
- Главная страница представляет из себя ТРИ СЛАЙДА.
Переход от одного слайда к другому осуществляется ползунком. - При переключении состояния ползунка меняется большая картинка. А так же меняется заголовок у ползунка «Насыщенная жизнь», «Умные гаджеты» и «Ты и Фолаты»
- И становятся активными определенные картинки, соответствующие состоянию СЛАЙДА. Нужно реализовать плавный переход от слайда к слайду с эффектом выезжающих полей для заголовка и появлением текста.
- При бездействии пользователя более чем 5 секунд, происходит автоматический передвижение ползунка в следующее состояние. Данный процесс нужно зациклить. Т.е. переход по слайдам осуществляется в следующем порядке 1-2-3-1-2-3…
- При наведении на подсвеченную (активную) картинку, она должна иметь эффект плавного увеличения на 10%.
- Ссылки в подвале сайта. При наведении должно пропадать подчеркивание и менять цвет на голубой. Берем цвет с кнопки «ГИНЕКОЛОГ ONLINE».
- Ссылки соц. сетей, тоже должны менять цвет при наведении на голубой как в пункте №6.
- Кнопка «ГИНЕКОЛОГ ONLINE» при нажатии имеет эффект зажатой кнопки.
- Страница должна масштабироваться под любое разрешение экрана с условием отображения во весь экран без появления вертикального или горизонтального скрола.
Т.е. высота и ширина 100%. - Обеспечить плавный переход от слайда к слайду пункт №3.
Главная страница (Адаптивная версия)
- Адаптивная верстка для отображения сайта на мобильных устройствах (смартфоны и планшеты).
- Функционал и эффекты перехода постараться сохранить с desktop версии сайта.
- Так же обеспечить автоматический переход от слайда к слайду в случае бездействия пользователя в течении 5 секунд.
Второстепенная страница
Страница представляет из себя лендинг пэйдж.
При пролистывании страницы, в зависимости от принадлежности контента в последовательности переключается ползунок в меню слева.
Меню слева статично по отношению к контенту страницы.
- Логотип SMART является ссылкой на главную страницу.
- Появляется вертикальное меню слева, которое закреплено по высоте и не прокручивается вместе с контентом находящимся в правой части экрана (картинки). Содержащее три ползунка. И ссылки по сайту ведущие на типовые страницы.
А так же ссылки на соц. сети. И Гинеколог online.
Для адаптивной версии меню должно иметь возможность скрыть. - Страница должна отображаться во весь экран при любом разрешении экрана. 100% по ширине. Высота страница обусловлена набором отображаемых картинок соответствующей зажатым ползункам. Масштабируется в результате набора картинок.
- Функционал ползунков следующий:
- Насыщенная жизнь
- Умные гаджеты
- Ты и фолаты
При заходе на страницу отображается зажатым ползунок соответствующий переходу с главной страницы. Т.е. если мы перешли на второстепенную страницу с слайда №1 главной страницы, то зажатым будет ползунок «Насыщенная жизнь».
Соответственно если зашли на второстепенную страницу со второго слайда главной страницы, то зажатым будет «Умные гаджеты».
.jpg)
