0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 1092 Просмотров
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Нужно анимировать 3 - 5 бумерангов, чтобы они крутились и летали по случайным траекториям внутри div в позиции fixed.

1. Бумеранги будут чуть разного размера
2. Скорость раскручивания у каждого, тоже своя
3. Скорость движения у бумерангов тоже разная

Просьба написать свою цену, заказчик уже выберет исполнителя с которым я свяжусь.

Заранее предупреждаю, что не я принимаю решению, я просто пилю сайт.

Анимацию эту планирую назначать как фон для сайта хостела «Бумеранг», вместо камней:

« Последнее редактирование: 17.09.2019, 09:12:55 от dm-krv »
*

beliyadm

  • Moderator
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Нужно сделать css/javascript анимацию
« Ответ #1 : 17.09.2019, 14:06:28 »
Что-то вроде вот такого извращения? https://dostavka-krym.com/traffic/tocrimea/23-grafik-dvizheniya-po-marshrutu-moskva-sevastopol ? ))))

От вас нужны будут картинки бумерангов (формата прозрачный png) и логика их движения, а там уже обсуждать финансы, нужно же ТЗ иметь перед глазами
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Cedars

  • Давно я тут
  • 585
  • 31 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #2 : 17.09.2019, 14:51:15 »
в качестве оффтопа: - бумеранги летающие по разным траекториям на сайте гостиницы - должны как то стимулировать потенциальных клиентов сделать свой выбор??

 *POPCORN*
*

beliyadm

  • Moderator
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Нужно сделать css/javascript анимацию
« Ответ #3 : 17.09.2019, 14:54:20 »
в качестве оффтопа: - бумеранги летающие по разным траекториям на сайте гостиницы - должны как то стимулировать потенциальных клиентов сделать свой выбор??

 *POPCORN*
Именно так, чтобы не дай будда клиент не спер гостиничные тапочки - сразу бумерангом прилетит, как и ездящие машинки самолётики и облачка на сайте доставки (клиент тогда все мозги выел, хочу, грит анимацию чтобы всё было, сказано сделано на коленке, но ведь убожество полное)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #4 : 17.09.2019, 14:58:40 »
Что-то вроде вот такого извращения? https://dostavka-krym.com/traffic/tocrimea/23-grafik-dvizheniya-po-marshrutu-moskva-sevastopol ? ))))

От вас нужны будут картинки бумерангов (формата прозрачный png) и логика их движения, а там уже обсуждать финансы, нужно же ТЗ иметь перед глазами

Картинки будут. Логика движения следующая.

1. Каждый бумеранг имеет свой размер, какие-то будут большие, какие-то меньше.
2. Каждый из них вращается со своей фиксированной угловой скоростью.
2. Каждый из них движется со своей фиксированной скоростью,  пока не наткнется на край экрана.
4. При достижении края экрана отскакивает в случайном направлении и продолжает движение.

В итоге это должно выглядеть как шарики для пинпонга в бесконечном движении, но вместо шариков бумеранги.

Что скажите по цене? Лично для меня сложновато, поэтому предпочту отдать на оутсорс. Если с вращением и перемещением я знаю, как их делать, то вот отскакиванием беда, надо прикручивать JavaScript, что геморойно.
« Последнее редактирование: 17.09.2019, 15:08:28 от dm-krv »
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #5 : 17.09.2019, 15:03:11 »
в качестве оффтопа: - бумеранги летающие по разным траекториям на сайте гостиницы - должны как то стимулировать потенциальных клиентов сделать свой выбор??

 *POPCORN*

Бумеранги будут летать за контейнером с контентом, сам контейнер имеет прозрачность 90%, соответственно бумеранги будут едва просвечивать и просмотру контента мешать не будут от слова никак.

Само размещение именно бумерангов связано с брендовой составляющей, надо чтобы фон был в тему сайту, но если вдруг у вас есть какие-то более любопытные идеи, то поделитесь  ^-^

Я потом покажу эту тему заказчику.
*

beliyadm

  • Moderator
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Нужно сделать css/javascript анимацию
« Ответ #6 : 17.09.2019, 15:05:27 »
Просто отскок от стены (если объект типа плоский мяч без вращения вокруг своей оси) еще можно не очень сложно реализовать по заданным координатам, но если объект нелинейный (в плане угловатый) и еще и вращается - соблюсти анимацию в данном случае будет очень и очень проблемно.

Долго дорого охуенно. Вам оно нужно? Могу быть неправ, но бюджетно так сделать не выйдет, тут уже нормальная математика работает.

Сделать можно, но я даже не представляю сколько это будет стоить в рамках этого ТЗ, чтобы моделировать правильную анимацию вращения при отскоках в заданных пределах + слежение за объектом (сразу говорю - в JS я не особо силен, но мне кажется что это далеко не тривиальная задача разработчиков сайтов)
« Последнее редактирование: 17.09.2019, 15:09:07 от beliyadm »
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #7 : 17.09.2019, 15:11:05 »
Просто отскок от стены (если объект типа плоский мяч без вращения вокруг своей оси) еще можно не очень сложно реализовать по заданным координатам, но если объект нелинейный (в плане угловатый) и еще и вращается - соблюсти анимацию в данном случае будет очень и очень проблемно.

Долго дорого охуенно. Вам оно нужно? Могу быть неправ, но бюджетно так сделать не выйдет, тут уже нормальная математика работает.

Сделать можно, но я даже не представляю сколько это будет стоить в рамках этого ТЗ, чтобы моделировать правильную анимацию вращения при отскоках в заданных пределах (сразу говорю - в JS я не особо силен, но мне кажется что это далеко не тривиальная задача разработчиков сайтов)

Правильный отскок и не нужен. Достаточно просто изменения направления движения при достижении края и пофиг, что бумеранг в некоторых случаях не будет до конца касаться краев, отскакивая еще до касания. Нужен просто фон из летающих туда-сюда бумерангов, чтобы дешево и сердито)

Я это вижу примерно так. Обернуть каждый из бумерангов в блок, картинки заставить вращаться стилями, а в плане движений уже работать с блоками, положение которых вполне можно отслеживать ява скриптом не сильно напрягаясь с кодингом. Возможно даже в интернете уже есть реализации отскоков для случая с шариками например, но даже если так, все равно понадобится все собрать вместе и заставить работать как нужно.
« Последнее редактирование: 17.09.2019, 15:19:06 от dm-krv »
*

passer

  • Завсегдатай
  • 1013
  • 75 / 3
Re: Нужно сделать css/javascript анимацию
« Ответ #8 : 17.09.2019, 15:21:32 »
Думаю canvas облегчит дело, но сам не взялся бы. Слаб в js.
*

beliyadm

  • Moderator
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Нужно сделать css/javascript анимацию
« Ответ #9 : 17.09.2019, 15:26:30 »
Ну тогда как вам моя реализация машинок и самолетика? Настроить движение по траектории несложно, справа там солнышко вращается с облачками по своей логике.
Принцип такой же вроде как и вы хотите? А там чистый CSS анимация (не считая кнопки перезагрузки по окончанию анимации запуск заново)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #10 : 17.09.2019, 15:53:30 »
Ну тогда как вам моя реализация машинок и самолетика? Настроить движение по траектории несложно, справа там солнышко вращается с облачками по своей логике.
Принцип такой же вроде как и вы хотите? А там чистый CSS анимация (не считая кнопки перезагрузки по окончанию анимации запуск заново)

Предлагаете повторяющуюся анимацию по фиксированной траектории? Как бы я это и сам могу, нужно именно по случайным траекториям.
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #11 : 17.09.2019, 15:55:02 »
Думаю canvas облегчит дело, но сам не взялся бы. Слаб в js.

Очень облегчит, если не найду исполнителя, обязательно попробую, классная штука)
*

beliyadm

  • Moderator
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Нужно сделать css/javascript анимацию
« Ответ #12 : 17.09.2019, 15:57:54 »
Предлагаете повторяющуюся анимацию по фиксированной траектории? Как бы я это и сам могу, нужно именно по случайным траекториям.
Случайности не случайны, как говорил мастер Угвей

Единственно что можно сделать достаточно просто - забить в массив десяток траекторий и запускать их через JS по кругу, сделав так, чтобы каждая предыдущая анимация закончилась в месте начала следующей.
Но мне кажется это уже мало относится к верстке и программингу сайта и вам нужно искать спецов именно по этим направлениям.

Очень облегчит, если не найду исполнителя, обязательно попробую, классная штука)
А канвас без JS никуда, штука то классная, но требует знаний.
И мне кажется что вся изначальная идея достаточно тупа, для продаж этот эффект не нужен, стоить будет дорого, накой?
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

dm-krv

  • Завсегдатай
  • 1028
  • 28 / 0
Re: Нужно сделать css/javascript анимацию
« Ответ #13 : 17.09.2019, 16:04:31 »
Случайности не случайны, как говорил мастер Угвей

Единственно что можно сделать достаточно просто - забить в массив десяток траекторий и запускать их через JS по кругу, сделав так, чтобы каждая предыдущая анимация закончилась в месте начала следующей.
Но мне кажется это уже мало относится к верстке и программингу сайта и вам нужно искать спецов именно по этим направлениям.
А канвас без JS никуда, штука то классная, но требует знаний.
И мне кажется что вся изначальная идея достаточно тупа, для продаж этот эффект не нужен, стоить будет дорого, накой?

Может оно и так. Я поэтому и не хочу сам браться, так как это займет меня надолго, а время слишком ценный ресурс, чтобы тратить его зря.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться