Как позиционировать svg?

Question

[orsodev]

Как круг переместить на линию, чтобы движение проходило по ней а не рядом?
https://codepen.io/MikD/pen/NWWNzyo

Answer 1

[origami1024]

Вота, пофиксил твои круги, нарисованные через path,

хехехе

ну ты и извращенец

У тебя два верхних path с названиями oval и oval2 съезжали на 80 точек вниз
Изспользовал transform="translate(0,-80)" в двух этих путях

https://codepen.io/origami1024/pen/PooNdGz

правда вот эти овал 3-12 вообще не показываются, они и должны быть невидимыми? Если принцип с транслэйтом понятен, сам уже доделай, ато мне нужно идти петь караоке срочно(

Comments

[orsodev]

Спасибо.
Они видимые, там opacity просто 0.1-0.5

[orsodev]

Большое спасибо,
есть еще один вопрос.
https://codepen.io/MikD/pen/BaaKqrq
как сделать чтобы движение точки начиналось когда весь блок будет видно на экране и можно видеть как движется точка

[origami1024]

orsodev, Привет. Оформи песочницу, чтобы там были левые секции добавляющие высоту, чтобы твоя проблема там была и оставалось только ее решить. Задай отдельный вопрос, если хочешь решения побыстрее

[orsodev]

origami1024, сверху будет слайдер(вместо него сейчас картинка)
https://codepen.io/MikD/pen/BaaKqrq

[origami1024]

orsodev,

var scrollY = window.scrollY - 800 || window.pageYOffset;

800 - подбираешь примерно - расстояние от верха страницы до этого блока с овалами
https://codepen.io/origami1024/pen/oNNLBbp

[orsodev]

origami1024,
сверху уже нормально, но после второй картинки точку уже не видно, нужно увеличить скорость движения точки или расстояние которое проходит за одну прокрутку ролика на мышке

[orsodev]

origami1024,
https://youtu.be/MQUueFx_BCw

[origami1024]

orsodev,

var scrollY = window.scrollY - 350 || window.pageYOffset;

вместо 800 подбери другое значение, например 350
https://codepen.io/origami1024/pen/oNNLBbp

[orsodev]

origami1024,
добавил еще блок снизу, и отступы которые должны быть
все равно не получается подобрать
https://codepen.io/MikD/pen/gOOMgeJ

[origami1024]

orsodev,
вот еще умножил вот этот dist на 1.3, походу это увеличивает дистанцию между точками
var dist = pathLen * scrollY / maxScrollY *1.3;
https://codepen.io/origami1024/pen/YzzWNbg

[orsodev]

Теперь все работает как надо. Большое спасибо за помочь
У меня есть еще несколько вопросов открытых, может и там сможешь помочь
Как сделать такой слайдер через slick?
Какой выбрать слайдер с видео на заднем фоне?

Answer 2

[RAX7]

Comments

[orsodev]

Большое спасибо,
есть еще один вопрос.
https://codepen.io/MikD/pen/BaaKqrq
как сделать чтобы движение точки начиналось когда весь блок будет видно на экране и можно видеть как движется точка