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

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

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

Добрый день! В видео по дизайну в 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 можно использовать...

Новые блоги и статьи Все статьи Все блоги /
Образование и практика Igor3D 21.03.2025 Добрый день А вот каково качество/ эффективность ВУЗовского образования? Аналитическая геометрия изучается в первом семестре и считается довольно легким курсом, что вполне справедливо. Ну хорошо,. . .	Lazarus. Таблица с объединением ячеек. Massaraksh7 21.03.2025 Понадобилась представление на экране таблицы с объединёнными ячейками. И не одной, а штук триста, и все разные. На Delphi я использовал для этих целей TStringGrid, и то, кривовато получалось. А в. . .	Async/await в Swift: Асинхронное программирование в iOS mobDevWorks 20.03.2025 Асинхронное программирование долго было одной из самых сложных задач для разработчиков iOS. В течение многих лет мы сражались с замыканиями, диспетчеризацией очередей и обратными вызовами, чтобы. . .	Колмогоровская сложность: Приёмы упрощения кода ArchitectMsa 20.03.2025 Наверное, каждый программист хотя бы раз сталкивался с кодом, который напоминает запутанный лабиринт — чем дальше в него погружаешься, тем сложнее найти выход. И когда мы говорим о сложности кода, мы. . .	PostgreSQL в Kubernetes: Подготовка кластера и настройка Mr. Docker 20.03.2025 Когда доходит до контейнеризации баз данных и особенно таких требовательных к ресурсам системах как PostgreSQL, многие команды до сих пор колеблются, прежде чем перенести их в контейнерную. . .
C++26: Индексирование пакетов и метапрограммирование bytestream 20.03.2025 Эволюция C++ продолжается стремительными темпами – каждый новый стандарт приносит функциональность, о которой мы мечтали годами. Звучит слишком громко? Если вы когда-либо боролись с вариадическими. . .	Состояние гонки в C#: подводные камни многопоточного программирования UnmanagedCoder 20.03.2025 Что такое состояние гонки? Это ситуация, когда результат программы непредсказуемо меняется в зависимости от порядка выполнения потоков. Проще говоря, два или более потока пытаются одновременно. . .	Next.js для разработки React: преимущества серверного рендеринга Reangularity 20.03.2025 Next. js решает классическую проблему React-приложений: медленную первоначальную загрузку и плохую индексацию поисковиками. Вместо того чтобы заставлять браузер пользователя выполнять всю работу по. . .	JUnit или TestNG: Выбираем Java-фреймворк для тестирования Javaican 20.03.2025 История тестовых фреймворков в Java началась в конце 90-х, когда Кент Бек и Эрих Гамма разработали JUnit - инструмент, который перевернул представление разработчиков о модульном тестировании. JUnit. . .	Разбиваем монолит на два микросервиса и реализуем CI/CD ArchitectMsa 20.03.2025 Когда команда растет, а функциональность монолита расширяется, поддерживать и развивать такую систему становится все труднее. Разработчики начинают тратить много времени на разбор сложных. . .

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

@БузинВладимир 0 / 0 / 4 Регистрация: 21.08.2017 Сообщений: 206
	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 Сообщений: 206
	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

@DrType 6547 / 3615 / 1074 Регистрация: 07.09.2019 Сообщений: 5,867 Записей в блоге: 1
	18.04.2023, 10:18
	Сообщение от БузинВладимир Как выставлять прозрачность картинки в CSS и JS? Если речь о том как сделать прозрачный фон - то никак. А если прозрачность картинки в целом, то opacity можно использовать... 0

Опции темы