420873535

https://scrollmagic.io/

Это чудесное изобретение гугла называется Scroll anchoring. Чтобы отключить, добавьте в CSS:

body {
  overflow-anchor: none;
}

Иллюстратор существует, стопудов. Сам видел!
А туториал нужен про то, как нарисовать в иллюстраторе или где у него в меню файл→экспорт?

Попробуйте может inkscape.

Если именно по координатам, то там ничего сложного

<svg viewBox="5 5 50 50">
  <path d="M10 10 L10 20 L20 20 Z" fill="red"></path>
  <path d="M15 10 l10 0 l0 10 Z" fill="blue"></path>
  <path d="M10 25 h 7 v 7 Z" fill="#FACE8D"></path>
</svg>

вот так оно работает

viewBox - координаты верхнего левого и нижнего правого угла видимой части холста.
M - переместить курсор и координаты x и y
L - нарисовать линию, и тоже координаты.
Z - замкнуть фигуру (соединить последнюю точку с первой)
l - нарисовать линию, но не абсолютные координаты, а сдвиг относительно предыдущей точки
H - нарисовать линию по горизонтали, и координата
h - нарисовать линию по горизонтали, но вместо координаты сдвиг.
V и v - та-же фигня, но по вертикали
и так далее

Зачем выдумывать велосипед?
www.chartjs.org - Умеет обновлятся "на лету" и api довольно простое.
Там и примеры есть.

gsap это библиотека для анимации циферок. Не самая лучшая, не самая легкая, не самая бесплатная.

Лично меня заинтересовала https://animejs.com/

Что касается твоей задачи, не понятно в чем проблема? Тебе надо сверстать сначала все. Потом инициализируешь scrollmagic и добавляешь нужные блоки к сцене, указываешь когда и сколько их показывать. Если хочешь что-то делать с блоком, менять картинки например, то подписываешься на события от scrollmagic и делаешь что надо основываясь на значении прокрутки.

Самое приближенное, что я смог найти
А тут подробная статья, если постараться, то сможете добиться нужного эффекта

Можно спрайтами, у меня дыма готового нет, но есть свеча для примера:

стили сами напишите

<label class="form-control"> 
	<input class="form-control" type="file" name="data[file]" placeholder="Прикрепите файл" style="display: none;">
 	<button class="js-labelFile"> 
 		<span class="js-fileName">Прикрепить файл</span> 
 	</button> 
</label>

$(function(){
		$('input[type=file]').each(function() {
      var $input = $(this),
          $label = $input.next('.js-labelFile'),
          labelVal = $label.html();

      $input.hide();
      $input.on('change', function(element) {
          var fileName = '';
          if (element.target.value) fileName = element.target.value.split('\\').pop();
          fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
      });
    });
	});

SCSS и Sass по сути один препроцессор, но с разным синтаксисом, мне нравится Sass, юзал сам и SCSS, Sass, Less, Stylus. Less и SCSS синтаксисически похожи, мой совет тебе используй Sass

video::-webkit-media-controls {
  display:none !important;
}

Сам не пробовал, см. статью на цсс трикс: css-tricks.com/custom-controls-in-html5-video-full...

Короче говоря я во всем разобрался. Вот ссылка на гитхаб с моим шаблоном проекта.
https://github.com/KononovD/kononovD.github.io/tre...
(закидываем папку app, gulpfile и package к себе в проект, в коноле пишем npm i, потом ждем установки всего, после пишем gulp и все работает.)
П.с. в gulpfile есть комментарии, что бы было понятно что к чему и почему.
(ну, малоли, кому-то пригодиться)

всем спасибо за полезные советы, нашел вот простой, не громоздкий, самое главное(!), скрипт:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // код для мобильных устройств
  } else {
    // код для обычных устройств
}

Скрипт засунь в функцию.
Потом сравнивай ширину экрана, если больше 768 то вызывай эту функцию

Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:



Развлекайтесь.

Кастомизация ползунка средствами чистого CSS ограничена, но кое-что все-таки возможно:
https://css-tricks.com/styling-cross-browser-compa...