Знающие люди, пожалуйста помогите разобраться, бьюсь 3 день) Не могу понять, что нужно исправить в скрипте или в svg для НОРМАЛЬНОГО запуска css анимации svg линии. У меня на странице используется скрипт который при скролле до нужного элемента запускает сss анимацию путем добавления дополнительного стиля (в основном стиле animation-play-state:paused; в допонительном меняется на animation-play-state:running;. Элементы двух типов: текст в див блоках и svg линии. Текст плавно появляется, линии рисуются. НО: текст анимируется КАК НАДО, проскролил до него анимация началась. А svg только на пиксел проскролишь и анимация запускается везде, в том числе и на частях страницы до которых еще крутить и крутить). Самое интересное что скрипт один и тот же, а старт анимации разный. Получается текст ждет пока прокрутишь до него, а svg пока просто начнешь скролить.
вот скрипт:
$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.p4ath_line_con2').each(function() {
var self = $(this),
height;
if (self.height() >= windowHeight) {
height = self.offset().top + windowHeight - 100;
} else {
height = self.offset().top + self.height();
}
if ($(document).scrollTop() + windowHeight >= height) {
self.addClass('an_con2')
}
});
});
});
вот svg:
<style> .p4ath_line_con2 {
stroke-dasharray: 510;
stroke-dashoffset:511;
animation-name:dash; animation-duration:10s; animation-timing-function:ease; animation-direction:normal; animation-fill-mode:
forwards; animation-iteration-count:1; animation-play-state:paused; animation-delay:3s;}
.p4ath_line_con2.an_con2 {
stroke-dasharray: 510;
stroke-dashoffset:511;
animation-name:line_con2; animation-duration:10s; animation-timing-function:ease; animation-direction:normal;
animation-fill-mode: forwards; animation-iteration-count:1; animation-play-state:running; animation-delay:3s;}
@keyframes line_con2 {
from {stroke-dashoffset: 511;}
to {stroke-dashoffset: 0;}
}</style>
<svg stroke-width="0.5" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" style="width:100%; height:25vh;" viewBox="0 0 82.7699
29.9645">
<path class="p4ath_line_con2" d="M0.113659 0c0,16.4834 13.3674,29.8508 29.8508,29.8508l52.8054 0"
stroke="darkorange" fill="none" stroke-width="0.5" vector-effect="non-scaling-stroke" stroke-linejoin="round"
stroke-linecap="round" marker-start="none" marker-end="none" stroke-miterlimit="79.8403193612775"></path>
</svg>
вот так сделал текст (скрипт тот же, добавляет стиль работает как надо, ждет пока до него прокрутят):
МОРСКИЕ КОНТЕЙНЕРЫ
CSS:
.size_con {position: relative; display:inline-block; height:auto; z-index:122; font: 14px 'open sans', sans-serif; font-weight:normal; text-align:center; color:darkorange; vertical-align:top; padding:0px 0px 0px 0px; animation-name:mor_con; animation-play-state:paused; opacity:0;}
.size_con.an_mor_con {animation-name:mor_con; animation-duration:3s; animation-timing-function:ease; animation-direction:normal; animation-fill-mode: forwards; animation-iteration-count:1; animation-play-state:running; animation-delay:0s;}
@keyframes mor_con {0%{opacity:0;} 70%{opacity:0;} 100% {opacity:1;}}
