Анимация на css?

Question

[Oleg_xex]

Нужно сделать анимацию при прокрутке страницы.Нужно чтобы skills набирались до 95%.
Вот макет:

Как сделать на чистом css?

Comments

[Сергей delphinpro]

Как сделать на чистом css?

Нужно чтобы skills набирались до 95%.

Может тогда поскромнее полоску css сделать. ну там процентов пятьдесят=))))

[kulaeff]

Сергей, по-моему даже 50% будет многовато.

[Ярослав Иванов]

Сергей, Сейчас ответит, что это его другу надо а он занят)))

[Сергей delphinpro]

Ярослав Иванов, =))
кстати, не в курсе, как они свои скиллы меряют? Много раз видел такие полоски на сайтах фрилансеров, даже студий, но вот нифига не пойму, что и чем они измеряют =)))

[Ярослав Иванов]

Сергей, С потолка берут) я раньше после прочтения книги или закрытия проекта накидывал себе 5-10%. Сейчас просто как теги сделал. Так как это уже не актуально да и в % не измерить)))

[Сергей Горячев]

Ярослав Иванов, Сергей, я бы себе даже 50% постеснялся поставить)))

[Сергей delphinpro]

Сергей Горячев, ну и зря )
Я бы себе по css процентов 200 не пожалел

[Сергей Горячев]

Сергей, ты ж не центризберком, чтобы оперировать процентами выше планки)))

[Сергей delphinpro]

Сергей Горячев, Хотя как посмотреть... Если измерять знание спецификации, то процент далеко не соточка. А если вероятность решения рандомной задачи любой сложности, то железная сотка =)

а что только цику можно что ли ? +))

[Сергей Горячев]

Сергей, почему-то мне кажется, что знание спецификации, как раз и не может быть больше 100.

[Сергей delphinpro]

Сергей Горячев, а если я фишку предложу группе обсуждения? фишки еще нет в спеке, но я её знаю =)

[Сергей Горячев]

Сергей, ну, если её нет, значит она вне границы процентов. Рассматривать можно как хак скорее, чем один из %...

Answer 1

[Ivan Bogachev]

Как сделать на чистом css?

Сергей говорит, что CSS не может отслеживать скролл и это действительно так. Его вариант решения задачи является общепринятым и я бы тоже использовал его. Но если вы хотите доказать, что у вас скилл CSS равен 95% - придется шаманить. Мысль следующая: если взять большой блок с кривым градиентом и аккуратно перекрыть его слоями, которые не будут скроллиться (position: sticky будет очень кстати), оставив небольшую видимую полоску, то можно получить занятный эффект зависимости содержимого полоски от этого самого скролла - codepen (будьте осторожны, проверено только в последних версиях хрома и ff). Понятно, что идея сырая, но если ее доработать, то можно будет запилить что-то похожее на вашу картинку.

Comments

[Сергей delphinpro]

>> доработать

примерно так https://codepen.io/anon/pen/rGqzYo?editors=1100 =)