Додайте свій проект безкоштовно і почніть отримувати пропозиції від фрілансерів-виконавців вже через хвилини після публікації!
4000 ₽

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

минув час актуальності


Нужен слайдер на сайт высотой 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 березня о 16:19
в 1м пункте опечатка не нужны слова "на весь экран"
Итоговый 1й пункт:
1 . Слайдер должен быть по вертикали 600px (высота)

Оновлення #2 від 10 березня о 13:36
дизайн - https://www.screencast.com/t/nb7ndzPHCmZ
В момент перелистывания - https://www.screencast.com/t/jLrsEv3A
Я так понимаю тут можно все реализовать на css + javascript

В момент старта скину файл дизайна на ai с тенями

Оновлення #3 від 10 березня о 16:05
Адаптацию под мобильные и планшеты делать не надо, на них мы слайдер отключим.

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


  1. ставка прихована фрілансером
  2. ставка прихована фрілансером
  3. 8 днів10000 ₽
    Test Test
     236 

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

    Україна Київ | 8 березня о 16:39 |
  1. 5 днів4000 ₽
    Артем Клоксов
     1261   29   0

    Пишите.

    Росія Росія | 6 березня о 16:13 |
  2. 3 дні4000 ₴
    Марина Глоба
     155 

    Есть опыт в подобном задании. Примеры работ в ЛС отправлю
    Скайп meriworld1989

    Україна Миколаїв | 6 березня о 16:13 |
  3. 1 день2000 ₴
    Андрей Христодулов
     366 

    Если интересует реализую обычный анимированный адаптивный слайдер
    100грн

    Україна Київ | 6 березня о 16:33 |
  4. 5 днів4000 ₽
    Вячеслав Фесенко
     853   15   0

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

    Україна Київ | 7 березня о 14:00 |

Замовник
Проект опублікований
6 березня о 16:09
212 переглядів
Місцеположення виконавця
Україна Україна
Поділитися