Описание проекта
Необходимо разработать HTML+CSS+JS (или возможно другие кроссбраузерные решения) горизонтальный слайдер страниц электронного журнала. Для примера можно посмотреть любой журнал на портале ISSUU, но там используется flash, который мне не подходит.
Журнал состоит из jpg изображений 2048х1270px. Пролистывание горизонтальное, без эффекта переворачивания страницы, просто проезжает картинка справа на лево или обратно. Пролистывание осуществляется либо кнопками в виде стрелок слева и справа от страницы, либо скроллом курсора мышки с зажатой левой клавишей и аналогично пальцем на планшете/смартфоне. Так же снизу должно быть скрытое меню с мениатюрами всех страниц журнала, меню должно открываться на 1/4 часть экрана снизу и все непоместившиеся миниатюры страниц должны прокручиваться влево и вправо до первой и последней страницы соответственно. Меню с миниатюрами открывается небольшой кнопкой в правой нижней части экрана, для его отображения. Щелкнув на любую миниатюру левой клавишей или пальцем, происходит прокрутка страниц самого журнала до выбранной.
Вся страница на любом дисплее должна помещаться 100% полностью, если по горизонтали дисплей узкий или это планшет в портретном положении, то страница должна быть ровно по середине, а сверху и снизу будет чёрный фон, аналогично если дисплей широкий, то страница должна быть по середине, а слева и справа будут чёрные поля фона.
Любую страницу можно приблизить одиночным кликом мышки на определенно заданный процент или двумя пальцами на планшете/смартфоне до определенного заданного процента. Приближенную страницу можно рассматривать перетаскивая её по экрану зажав левую клавишу мыши или пальцем на планшете/смартфоне. При пролистывании на другую страницу, приближение сбрасывается.
На любых страницах должно быть можно разместить div, p, a, ul-li блок с контентом в виде графической или текстовой ссылки, слайдер изображений, вертикальный слайдер контента в div блоке, js анимация и т.п. При приближении страницы этот контент должен так же пропорционально увеличиваться и уменьшаться. На разных дисплеях контент внутри страницы не должен смещаться относительно заданных координат на странице.
Справа вверху должна распологаться кнопка-иконка, для открытия основного меню справой стороны экрана, поверх всего видимого контента на экране. В основном меню должен быть логотип, 3-6 пунктов самого меню, внизу иконки социальных сетей.
Подгрузка картинок и страниц при пролистывании журнала должна быть постепенной с опережением на две, если я к примеру смотрю страницу №3, то уже должна подгружаться страница №5. Всего планируется около 150-200 страниц.
Я сам пытался его реализовать, но нехватает времени разбираться во всех тонкостях js. Пример того, на чем я остановился за 4 дня моих разработок можно посмотреть здесь Предполагалось использовать js библиотеку hammer, но не хватает познаний, что бы всё это воссоздать в задуманном виде. Моя листалка основана на idangerous.swiper-2.0.min.js и movies-app.js
Мультиплатформенность - популярные современные браузеры для компьютеров, планшетов, смартфонов. Firefox Mozilla, Google Chrome, Safari, IE10+ без закачки дополнительных плагинов и т.п. как например с использованием adobe flash
Взаимодействие с контентом должно одинаково хорошо быть реализовано как для мышки, так и для плацев в случае планшетов и смартфонов.
Обязательное соблюдение всех требований в описании проекта, готов рассмотреть предложения по улучшению функционала.
Журнал состоит из jpg изображений 2048х1270px. Пролистывание горизонтальное, без эффекта переворачивания страницы, просто проезжает картинка справа на лево или обратно. Пролистывание осуществляется либо кнопками в виде стрелок слева и справа от страницы, либо скроллом курсора мышки с зажатой левой клавишей и аналогично пальцем на планшете/смартфоне. Так же снизу должно быть скрытое меню с мениатюрами всех страниц журнала, меню должно открываться на 1/4 часть экрана снизу и все непоместившиеся миниатюры страниц должны прокручиваться влево и вправо до первой и последней страницы соответственно. Меню с миниатюрами открывается небольшой кнопкой в правой нижней части экрана, для его отображения. Щелкнув на любую миниатюру левой клавишей или пальцем, происходит прокрутка страниц самого журнала до выбранной.
Вся страница на любом дисплее должна помещаться 100% полностью, если по горизонтали дисплей узкий или это планшет в портретном положении, то страница должна быть ровно по середине, а сверху и снизу будет чёрный фон, аналогично если дисплей широкий, то страница должна быть по середине, а слева и справа будут чёрные поля фона.
Любую страницу можно приблизить одиночным кликом мышки на определенно заданный процент или двумя пальцами на планшете/смартфоне до определенного заданного процента. Приближенную страницу можно рассматривать перетаскивая её по экрану зажав левую клавишу мыши или пальцем на планшете/смартфоне. При пролистывании на другую страницу, приближение сбрасывается.
На любых страницах должно быть можно разместить div, p, a, ul-li блок с контентом в виде графической или текстовой ссылки, слайдер изображений, вертикальный слайдер контента в div блоке, js анимация и т.п. При приближении страницы этот контент должен так же пропорционально увеличиваться и уменьшаться. На разных дисплеях контент внутри страницы не должен смещаться относительно заданных координат на странице.
Справа вверху должна распологаться кнопка-иконка, для открытия основного меню справой стороны экрана, поверх всего видимого контента на экране. В основном меню должен быть логотип, 3-6 пунктов самого меню, внизу иконки социальных сетей.
Подгрузка картинок и страниц при пролистывании журнала должна быть постепенной с опережением на две, если я к примеру смотрю страницу №3, то уже должна подгружаться страница №5. Всего планируется около 150-200 страниц.
Я сам пытался его реализовать, но нехватает времени разбираться во всех тонкостях js. Пример того, на чем я остановился за 4 дня моих разработок можно посмотреть здесь Предполагалось использовать js библиотеку hammer, но не хватает познаний, что бы всё это воссоздать в задуманном виде. Моя листалка основана на idangerous.swiper-2.0.min.js и movies-app.js
Мультиплатформенность - популярные современные браузеры для компьютеров, планшетов, смартфонов. Firefox Mozilla, Google Chrome, Safari, IE10+ без закачки дополнительных плагинов и т.п. как например с использованием adobe flash
Взаимодействие с контентом должно одинаково хорошо быть реализовано как для мышки, так и для плацев в случае планшетов и смартфонов.
Обязательное соблюдение всех требований в описании проекта, готов рассмотреть предложения по улучшению функционала.
Разработка для WEB Банковский перевод, Электронные деньги
