Доработка HTML страницы для плавного и красивого свайпа на мобильных

5 000 руб. за проект • наличный расчёт, безналичный расчёт, электронные деньги
31 июля 2016, 05:26 • 1 отклик • 63 просмотра
см видео в аттаче, внизу исходное описание, и вот 2 попытки реализации, сделанные другими фрилансерами:

https://avs099.github.io/v1/
https://avs099.github.io/v2/

Мне нужно это довести до ума. Мне нужен программист, который сможет заинтегрировать нужные плагины, настроить их, если не получается хорошо - найти другие. И всё это он будет тестировать на своем телефоне - iphone или какой-нибудь свежий андроид.

Основная цель - плавное перелистывание - свайп - как фотки в родном приложении Camera, или же вот так - https://css-tricks.com/the-javascript-behind-touch...

перелистывать надо как вправо/влево (ответы), так и вверх/вниз (от вопроса к ответам).

Мне визуально нравится вот эта вот карусель - http://kenwheeler.github.io/slick/ - или вот эта вот неплоха - http://idangero.us/swiper/. Т.е. эффект перелистывания должен быть следующим:

1. Идти за пальцем - могу двигать туда/сюда.
2. Когда листаю вверх/вниз - от вопроса к ответам - я не хочу видеть, как вопрос уходит ВНИЗ (т.е. как обычно происходит, когда первый слайд тянут вниз - что бы открыть -1), или же ответы вверх.
3. горизонтальные свайпы (вопросы или ответы) должны быть закольцованны - 1->2->3->1...
4. Когда открываю страницу - оказываюсь на экране 1-ого вопроса. Вправо-влево свайпаю - перехожу на другие вопросы. Веду вниз - оказываюсь на экране ответов для ВЫБРАННОГО вопроса. Их могу вправо-влево свайпать - но когда поднимаюсь вверх - я должен оказаться на исходном вопросе.

как только это будет сделано - нужно довести до ума "голосование" вот тут -https://avs099.github.io/ :

1. при тапе на heatmap часть под пальцем как бы увеличивается (что-то вроде эффекта зума), и водя пальцем туда-сюда, я вижу где я сейчас нахожусь, в какой части спектра (красный - желтый - зеленый). Отпустив палец, выбранное положение должно как-то зафиксироваться - может, какую-нибудь жирную полоску там поставить, или рамку, или как-то так.
2. Пока вожу вправо-влево по спектру, сам слайд, понятное дело, двигаться не может.

Ну вот вроде бы и всё. Т.е. надо безукоризненно работающую страничку, в духе "родного" приложения. Гладкость переходов, нормальная отработка при развороте телефона.

Никакого бекенда тут нет и не нужно - все на HTML / jquery, всё захардкожено.


и ниже описание основого проекта, то, с чего начиналось:


Основная идея такова. Есть статья на каком-нибудь новостном сайте - например, на cnn.com. В этой статье есть кнопка «Что вы думаете о XXXX?». Пользователь нажимает и попадает на нашу страничку, которую надо сделать, с этим вопросом. Смотрите видео - свайпами пользователь переходит от вопроса к ответам, пролистывает разные ответы. Для ответа есть возможность согласиться с ними или нет (через тапы на heatmap внизу), и в конце концов можно даже добавить свой ответ по тапу на (!). В этом случае должен появиться textbox + кнопки Add My Answer и Cancel. По нажатию Add - красиво свернуть, и показать либо новый вопрос, либо попап "Thank you" (пусть в настройках это как-то можно сделать).


Для этого мне и нужен человек, который много верстал под мобильные, что бы основные моменты/стандарты UI были уже на автомате. Например, важно как-то показать, что есть много ответов - для этого, может, показывать полупрозрачные стрелочки справа/слева, как в галерее? А как это стандартно делается в iOS? И так далее.

Анимации должны быть плавные и красивые. Там в видео есть анимация текста - может, её тоже приделать? Но если это будет смотреться криво, но не надо..

Тап на спектр внизу - тоже хитро - надо как-то это дело обыгрывать, что бы случайное нажатие не вызвало "голосования". Т.е. юзер должен жать какую-то долю секунды? в этот момент, может точка нажатия должна "набухать" от нуля к кругу какого-то радиуса? Тут надо смотреть, придумывать. После голосования, наверное, неплохо бы оставить какую-то метку, что бы было потом видно. Это уже на JS надо делать, что бы юзер мог пройти по всем ответам, проголосовать, вернуться назад, добавить свой ответ, снять голос с какого-то вопроса.

Насчет перехода между ответами - мне нужен плавный переход, похожий на то, как в видео идет переход от вопроса к ответу - т.е. пользователь тащит ответ вправо/влево и видит сразу часть другого ответа. Как просмотр картинок в родном приложении iOS эффект. Это обязательно.

Еще раз, это должно быть responsive и работать одинаково хорошо на таблете и на телефоне. Я лично буду тестить на iPhone 5, iPad 2, nexus.
Файлы