Перенос дизайна из Figma в Bootstrap и jQuery, скрипты карусели при вращении колеса мыши

@БузинВладимир · Регистрация: 21.08.2017

Студворк — интернет-сервис помощи студентам

Добрый день! В видео по дизайну в Figma я видел, как с помощью After Effects к проекту приделывали анимацию, когда сначала все элементы всплывают со дна на свои позиции, а потом при прокрутке колеса мыши надпись "Масла" меняется на "Присадки", одновременно меняется картинка и информация в левом углу, причем на втором слайде картинка движется. Там все элементы преобразоваывали в PNG, рисовали отдельно каждый кадр, выставляли таймлайны и прозрачность, но я думаю обойтись без Adobe, потому что в свете текущих событий достать лицензию без Visa и Mastercard сплошной гемор, а пиратки я боюсь качать после того, что случилось год назад:

Возврат денег у ведущего курсов из-за невозможности предоставить лицензионный софт и взлома аккаунтов в соцсетях

Пробовал сделать простую анимацию в Movie Maker, а потом писал примитивную карусель на чистом скрипте:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Карусель</title>
<script type="text/javascript">
  var total_pics_num = 4; // колличество изображений
  var interval = 5000; // задержка между изображениями
  var time_out = 1; // задержка смены изображений
  var i = 0;
  var timeout;
  var opacity = 100;
  function fade_to_next() {
    opacity--;
    var k = i + 1;
    var image_now = 'image_' + i;
    if (i == total_pics_num) k = 1;
    var image_next = 'image_' + k;
    document.getElementById(image_now).style.opacity = opacity/100;
    document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
    document.getElementById(image_next).style.opacity = (100-opacity)/100;
    document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
    timeout = setTimeout("fade_to_next()",time_out);
    if (opacity==1) {
      opacity = 100;
      clearTimeout(timeout);
    }
  }
  setInterval (
    function() {
      i++;
      if (i > total_pics_num) i=1;
      fade_to_next();
    }, interval
  );
</script>
  </head>
  <body>
<div>
  <img src='Масла.png' id="image_1" style="position: absolute;" />
  <img src='Присадки.png' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>
  </body>
</html>

Но думаю пойти дальше, и у меня возник ряд вопросов.
Как перенести дизайн шрифтов и кнопок из Figma в Bootstrap и jQuery? Как средствами CSS и JS сделать наложение картинки на текст? Меня учили как раз в CSS прописывать шрифты из Google Fonts, а там нет Gothem Pro... Как подтянуть этот шрифт?
Тут надо к картинке, стикеру, большой надписи и тексту в углу прикручивать отдельные скрипты с каруселью и вторая картинка там, где присадки, должна двигаться и быть GIF.
Имею тег body, в котором нужно задать у фона чёрный или тёмно-серый цвет, у текста - белый и отступы сверху, снизу, слева и справа.
У надписи "yudaev.oil" слева относительно body прописать параметры:

XML
1
2
align = left
position = top

Ссылку "оставить заявку" подчеркнуть и прописать относительно body:

XML
1
2
align = right
position = top

Текст слева снизу:

XML
1
2
align = left
position = bottom

Троицу круглых кнопок "Авто", "Мото", "Гидро" обернуть в отдельный блок div и у этого блока прописать:

XML
1
2
align = right
position = bottom

Группу из четырех кнопок меню "Масла", "Смазки", "Дилерам", "Контакты" обернуть в отдельный блок div и у этого блока прописать:

XML
1
2
align = center
position = top

У большой надписи прописать:

XML
1
2
align = center
position = middle

Картинку и стикер обернуть в отдельный блок div и у этого блока прописать относительно body:

XML
1
2
align = center
position = middle

У стикера прописать относительно div:

XML
1
2
align = left
position = top

Картинка находится поверх надписи. Как средствами Bootstrap и jQuery сделать наложение картинки на текст Difference? Подпись надо отдельно преобразовать в png и с расположением заморочиться, как задать позицию, не знаю. Белая кнопка "Выбрать масло" находится под большой надписью и лежит поверх картинки. Как задать расположение, тоже не знаю. Как подтянуть в CSS шрифт Gothem Pro, если его нет в Google Fonts? Как в Bootstrap и jQuery сделать скругленные кнопки с белой обводкой? Скругление было 100. слева и справа отступы 30, сверху и снизу - 20, расстояние между ними 20. У пунктов меню вверху отступы 50. Отступы в body слева, справа, сверху и снизу 40. При открытии сайта каждый элемент со дна всплывает на свою позицию. Для картинки, стикера, большой надписи и информации в левом углу в jQuery прописать уникальную анимацию перехода. При прокрутке колеса мыши вниз с помощью события OnMouseWheelDown большая надпись, картинка, стикер и информация в левом углу меняются из масел на присадки, еще надо заморочиться найти вторую картинку, чтобы она была GIF с анимацией и без фона. При прокрутке вверх с помощью OnMouseWheelUp все меняется обратно на масла. Там ещё при нажатии на кнопку "оставить заявку" через OnClick должна по скрипту всплыть форма с электронным адресом, ФИО, комментарием и кнопкой "Отправить".
Пиратки Adobe боюсь ставить, опасаясь угона соцсетей и карт... Разбираться с таймлайнами и прозрачностью и отрисовывать каждый кадр отдельно тоже муторно... Максимум, могу сделать в Movie Maker... Как сделать эту карусель посредством Bootstrap и jQuery? Все напрочь позабывал, нужно повторить...

@БузинВладимир · 17.04.2023, 17:04 **[ТС]**

Стикеры здесь.

@БузинВладимир · 17.04.2023, 21:01 **[ТС]**

Цвет в body 161616

Добавлено через 3 часа 25 минут
У надписи "yudaev.oil" слева шрифт Gotham Pro размером 24 с начертанием Regular и расстоянием между буквами -2%.
У надписи "оставить заявку" все то же самое, но это подчеркнутая ссылка.
У круглых кнопок радиус скругления 100, слева и справа отступы 30, сверху и снизу - 20, расстояние между ними 20, шрифт Gotham Pro размером 14 с начертанием Light и расстоянием между буквами -2%, у трех кнопок в углу белая обводка, белый текст, кнопка под большой надписью белая, текст цветом 181818.
В группе из четырех кнопок меню "Масла", "Смазки", "Дилерам", "Контакты" отступ между кнопками 50, шрифт Gotham Pro размером 14 с начертанием Light и расстоянием между буквами -2%.
Информация слева в нижнем углу шрифтом Gotham Pro размером 16 с начертанием Regular, расстоянием между строками 133.5% и расстоянием между буквами -2%. Длина блока div 536, высота - 68. Текст в три строки.
У большой надписи в центре шрифт Gotham Pro размером 160 с начертанием Regular и расстоянием между буквами -1.5%.
Знает ли CSS шрифт Gotham Pro и откуда его туда подтягивать? Как прописать стили для круглых кнопок, сделать наложение картинки на текст difference и написать карусели с разной анимацией перехода у большой надписи, картинки, стикера и информации слева внизу? Можно ли здесь вообще обойтись без фреймворков? Много подзабыл и мучает вопрос, оправдано ли использование фреймворков для наложения картинки на текст, скругления и обводки кнопок и анимации перехода при прокрутке мыши?

Добавлено через 20 минут
Нужны ли здесь фреймворки или можно без них?

@БузинВладимир · 18.04.2023, 10:12 **[ТС]**

Короче, тут не все так просто... В body объявим header, в котором пропишем таблицу на всю длину экрана с заглавием, четырьмя пунктами меню и ссылкой "оставить заявку", а выравнивать будем уже относительно ячеек таблицы...
Потом объявим main, где будет большая надпись и картинка. Но вот вопрос: как в CSS и JS сделать наложение Difference?
И, наконец, сделаем Footer, где опять же создадим таблицу на всю длину экрана и будем ровнять уже относительно ячеек.

Добавлено через 49 минут
Как вариант, думал в main двигатель фоном сделать и чтобы по скрипту менялся фон, тогда текст наложится без проблем, но неудобно будет ставить стикер в углу картинки...

Добавлено через 6 минут
Тут все равно без Фотошопа не обойтись... Однозначно в этом редакторе крепить стикер к двигателю gif, а потом ставить отредактированную картинку фоном в main, и текст без проблем наложится, но как в CSS и JS сделать такой эффект difference?

Добавлено через 5 минут
Если ставить картинку и стикер как div, немалая вероятность, что большая надпись и белая кнопка сползут...

Добавлено через 1 час 0 минут
Как выставлять прозрачность картинки в CSS и JS?

@DrType · 18.04.2023, 10:18

Сообщение от БузинВладимир

Как выставлять прозрачность картинки в CSS и JS?

Если речь о том как сделать прозрачный фон - то никак. А если прозрачность картинки в целом, то opacity можно использовать...

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@БузинВладимир 0 / 0 / 4 Регистрация: 21.08.2017 Сообщений: 208
	17.04.2023, 17:04 [ТС]
	Стикеры здесь. Миниатюры 0

@БузинВладимир 0 / 0 / 4 Регистрация: 21.08.2017 Сообщений: 208
	17.04.2023, 21:01 [ТС]
	Цвет в body 161616 Добавлено через 3 часа 25 минут У надписи "yudaev.oil" слева шрифт Gotham Pro размером 24 с начертанием Regular и расстоянием между буквами -2%. У надписи "оставить заявку" все то же самое, но это подчеркнутая ссылка. У круглых кнопок радиус скругления 100, слева и справа отступы 30, сверху и снизу - 20, расстояние между ними 20, шрифт Gotham Pro размером 14 с начертанием Light и расстоянием между буквами -2%, у трех кнопок в углу белая обводка, белый текст, кнопка под большой надписью белая, текст цветом 181818. В группе из четырех кнопок меню "Масла", "Смазки", "Дилерам", "Контакты" отступ между кнопками 50, шрифт Gotham Pro размером 14 с начертанием Light и расстоянием между буквами -2%. Информация слева в нижнем углу шрифтом Gotham Pro размером 16 с начертанием Regular, расстоянием между строками 133.5% и расстоянием между буквами -2%. Длина блока div 536, высота - 68. Текст в три строки. У большой надписи в центре шрифт Gotham Pro размером 160 с начертанием Regular и расстоянием между буквами -1.5%. Знает ли CSS шрифт Gotham Pro и откуда его туда подтягивать? Как прописать стили для круглых кнопок, сделать наложение картинки на текст difference и написать карусели с разной анимацией перехода у большой надписи, картинки, стикера и информации слева внизу? Можно ли здесь вообще обойтись без фреймворков? Много подзабыл и мучает вопрос, оправдано ли использование фреймворков для наложения картинки на текст, скругления и обводки кнопок и анимации перехода при прокрутке мыши? Добавлено через 20 минут Нужны ли здесь фреймворки или можно без них? 0

@БузинВладимир 0 / 0 / 4 Регистрация: 21.08.2017 Сообщений: 208
	18.04.2023, 10:12 [ТС]
	Короче, тут не все так просто... В body объявим header, в котором пропишем таблицу на всю длину экрана с заглавием, четырьмя пунктами меню и ссылкой "оставить заявку", а выравнивать будем уже относительно ячеек таблицы... Потом объявим main, где будет большая надпись и картинка. Но вот вопрос: как в CSS и JS сделать наложение Difference? И, наконец, сделаем Footer, где опять же создадим таблицу на всю длину экрана и будем ровнять уже относительно ячеек. Добавлено через 49 минут Как вариант, думал в main двигатель фоном сделать и чтобы по скрипту менялся фон, тогда текст наложится без проблем, но неудобно будет ставить стикер в углу картинки... Добавлено через 6 минут Тут все равно без Фотошопа не обойтись... Однозначно в этом редакторе крепить стикер к двигателю gif, а потом ставить отредактированную картинку фоном в main, и текст без проблем наложится, но как в CSS и JS сделать такой эффект difference? Добавлено через 5 минут Если ставить картинку и стикер как div, немалая вероятность, что большая надпись и белая кнопка сползут... Добавлено через 1 час 0 минут Как выставлять прозрачность картинки в CSS и JS? 0