Как сделать такой пунктир и не засорить код мусором?

Question

[xonar]

Здравствуйте. Нашёл пример на одном сайте, где пунктирная линия реализована через множество div'oв. Как можно реализовать такую линию, чтоб ещё и анимацию к ней можно было прикрепить, но без многочисленных дивов в разметке. И желательно, чтоб при добавление нового пункта, пунктирная линия бы автоматически увеличилась.

Сайт с демо, имеется ввиду блок со скроллом - клац

Comments

[Rustam Bainazarov]

Градиент.

[xonar]

Рустам Байназаров, Но анимацию не прикрутить к нему. Точнее её можно прикрутить, но элементы будут не по порядку переливаться. Будет вся линия одновременно пропадать и появляться.

@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

[Rustam Bainazarov]

xonar, а погоди. Я не видел примера сайта.

Я-то думал, тебе надо такое:

[Rustam Bainazarov]

xonar, ну тогда можешь так сделать, если фон позволяет:


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

Если нужно прямо как там — без разметки тебе не обойтись.

[xonar]

Рустам Байназаров, Спасибо практически то что нужно. Можете в виде ответа оставить свой вариант, выберу его решением.

Answer 1

[Rustam Bainazarov]

Ну тогда можешь так сделать, если фон позволяет:


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

Если нужно прямо как на сайте — без разметки тебе не обойтись.

Более простой вариант анимации именно линии делается так, например:


В последнем примере анимирование не через background-position, потому что такой метод не работает с направлением градиента to bottom.

Comments

[Brad9aga]

кароч смысла нету ничего делать, тут уже все сделано

[Rustam Bainazarov]

Brad9aga, батя в хате

Answer 2

[Andrej Sharapov]

там же есть все.

<div class="dashed-line"></div>
CSS:

.dashed-line {
  animation: height 4s cubic-bezier(1.0,2.0,0,1.0) 1000ms forwards;
}

@keyframes height {
0% {
    height: 0px;
}
100% {
    height: 215px;
}
}

Comments

[xonar]

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

[xonar]

Как избавиться от этого?

[leni_m]

border-left: 1px dashed lightblue;
сделает такую линию на левой границе блока, однако такой анимации как на демо вы не добьётесь, из за того что черточки ведут себя по разному отдельно друг от друга, поэтому и сделана через множество div.

[xonar]

leni_m, Ну в этом плане я знаю. Но, блин и засорять не хочу разметку множеством дивов.

[Andrej Sharapov]

xonar, можно добиться через бордер, сложной анимацией

Answer 3

[Brad9aga]

Comments

[xonar]

Этот вариант уже получше, но анимация которую приведу ниже не будет работать как на демо. Будет пропадать вся линия и появляться вся линия, а не плавно переливаться.

@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

[Brad9aga]

xonar, с анимацией сами, моя задача была показать смысл

[xonar]

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

[Rustam Bainazarov]

Ну коли ты мне под каждым ответом пишешь, то и я напишу. Лучше сделать так:

[Brad9aga]

Рустам Байназаров, я тож потом подумал так сделать, но это было в дороге по делам,почти так же но не так
чуть позже покажу