Слайдер на сайт с перелистыванием сертификатов как в книжках

HTML та CSS верстання, Javascript та Typescript — неправильно зазначені категорії?

1698 UAH

Нужен слайдер на сайт высотой 600px шириной на всю ширину экрана.

1. Слайдер должен быть по вертикали на весь экран 600px (высота)

2. В слайдере по центру аккуратно сложенная стопка листов сертификатов (сертификат высотой 600px) слева от сертификатов стопка перевернутых листов (перевернутые листы имеют ненавящивая текстуру бумажных листов). Между стопками есть пространство 20-100px как буде красивее

3. Перелистывание происходит как реалистичное перелистывание листа с правого верхнего угла (сертификата) и лист кладется в стопку перевернутых листов. Перелистывание должно быть красивым и реалистичным с тенями если надо.

4. По ширине слайдер на всю ширину, но весь оби стопки листов помещается в 1024px. и должны хорошо выглядеть на разрешении шириной 1366px и шириной 1920px

5. Когда мышка попадает на слайдер, то от движения мышки по горизонтали сертификаты начинают перелистываться. двигаешь вправо сертификаты возвращаются назад в стопку, двигаешь влево, сертификаты переворачиваются в стопку перевернутых. От малейшего движения мышки сертификаты плавно в зависимости от скрости движения мышки начинают перелистываться в ту или иную сторону и если человек остановит движение мышки, то сертификат останавливает процесс перелистывания в том положении в котором он остановился (и сертификат зависает в полу перевёрнутом положении). Полное пролистывание всех сертификатов происходит, когда человек проводит мышью с одного края своего экрана в другой край своего экрана (т.е. пока он ведёт мышкой от правого края экрана в левый край экрана у него по очереди перелистываются все сертификаты и последний перекладывается у левого края экрана). Когда перелистнулся последний сертификат у нас по центру ничего не остается. А когда мыш у правого края экрана у нас слева нет стопки перевернутых сертификатов.

6. Слайдер мы будем использовать на одной стране в нескольких местах с разными фотографиями. + еще на других страницах тоже слайдер будет использоваться с другими фотографиями (то есть должна быть возможность легко копировать слайдер в разные части сайта с разными фотографиями, и размещать несколько слайдеров с разными фотографиями на одной странице)

7. Должна быть возможность разместить разное количество фотографий в слайдере (чтобы он легко адаптировался под разное количество фотографий и распределял перелистывание по ширине экрана)

8. Внизу слайдера у нас полоса на всю ширину экрана (если невозможно, то шириной 1024px по центру) и высотой 5px и разбита на количество сертификатов в слайдере и красным заливается тот сектор, сертификат которого у нас активен.

9. CMS у нас mod-x revo

10. Сайт трубы5.рф

11. Шаблон у нас на bootstrap

https://wireframe.cc/63BVq9

Оновлення #1 від 6 березня 2017

в 1м пункте опечатка не нужны слова "на весь экран" Итоговый 1й пункт: 1 . Слайдер должен быть по вертикали 600px (высота)

Оновлення #2 від 10 березня 2017

дизайн - https://www.screencast.com/t/nb7ndzPHCmZ В момент перелистывания - https://www.screencast.com/t/jLrsEv3A Я так понимаю тут можно все реализовать на css + javascript В момент старта скину файл дизайна на ai с тенями

Оновлення #3 від 10 березня 2017

Адаптацию под мобильные и планшеты делать не надо, на них мы слайдер отключим.

Оновлення #4 від 10 березня 2017

Пример перелистывания http://www.turnjs.com/# только нужно не от нажатия а от движения мыши + обязательно учесть чтобы у каждого сертификата был момент когда он полностью читаем и ничто не мешает его отображению

Ставки 3 Відхилені 4 Обговорення 3

Test Test

0 0

Проєкти -
Оцінка -
Рейтинг 161

Бюджет: 10000 RUB Термін: 8 днів

Обращайтесь!

Вячеслав Фесенко

136 4

Проєкти 136
Оцінка 5.0
Рейтинг 3 742

Бюджет: 4000 RUB Термін: 5 днів

Добрый день.
Готов обсудить и начать работать.
Пишите в личку, скайп или вайбер.
skype: karmakillersl
viber/tel: +38 050 928 69 18
e-mail: [email protected]