Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анимация вертикальной линии напротив текста при сролле (https://javascript.ru/forum/dom-window/69080-animaciya-vertikalnojj-linii-naprotiv-teksta-pri-srolle.html)

mrtdiesel 28.05.2017 16:51

Анимация вертикальной линии напротив текста при сролле
 
Нужно как тут http://idzikovsky.ru/index.html#uslugi в разделе услуги
Ромбики и анимация линии при прокрутке между ними.
Уверен что просто, но я в js не понимаю. При наведении на элемент в инспекторе браузера - не вижу полосу, а то бы выковырил.
Подскажите как сделать или выковырить.

j0hnik 29.05.2017 01:29

Содрать просто!
Открываете в браузере панель вебмастера у меня в опере ctrl+shift+i
скролите и смотрите что включается в js, щелкаете на элемент смотрите стили. берете нужное и копируете себе на сайт! =)

mrtdiesel 29.05.2017 13:16

Можно по подробнее, куда смотреть в инспекторе что включается в js?
На элемент щелкнуть могу, хотя ромбик стилями не сложно нарисовать. Но на линию не могу щелкнуть.

рони 29.05.2017 13:52

mrtdiesel,
когда элемент в зоне видимости ему присваивается класс
анимации -- иначе класс снимается.
сделано на основе плагина waypoints

mrtdiesel 04.06.2017 11:20

рони,
Спасибо, я примерно так и представляю про появление и исчезание класса, но в инспекторе я не вижу его в видимой части.
Как нибудь я сделаю анимацию при скролле, уже приходилось.

Помогите пожалуйста просто вертикальную линию анимировать.

рони 04.06.2017 11:40

mrtdiesel,
вне зоны видимости
<div class="grpelem hideAnimation" id="u2161" animation="animate barDown d4"><!-- simple frame --></div>


в зоне видимости убрали/добавили классы
<div class="grpelem animate barDown d4 showAnimation" id="u2161" animation="animate barDown d4"><!-- simple frame --></div>


css
transition: all .5s ease;
из transform: scaleY(0); в transform: scaleY(1);
из opacity: 0; в opacity: 1;
вот и вся анимация


Часовой пояс GMT +3, время: 12:17.