Cześć!,
Uczę się javascripta i zrobiłem animację, która moim zdaniem jest fajna i ładna, lecz chciałbym dodać do niej jeszcze 2 rzeczy ale niestety nie wiem jak to zrobić.
Mianowicie pierwszą rzeczą jest to żeby pomiędzy tymi liniami był biały kolor a na zewnątrz był kolor czarny. Nie wiem czy muszę dodać do tego jakiś path po środku czy mogę jakoś ułożyć diva w taki sposób by był idealnie dopasowany.
Efekt który chciałbym uzyskać (na tym zdjęciu nie widać tych niebieskich lin tak dokładnie):
2 rzeczą którą nie wiem jak zrobić jest to by animacja była wykonywana dopiero wtedy gdy użytkownik widzi to, a nie wcześniej i gdy nie widzi również by stała na efekcie końcowym. Również chciałbym to lekko przyspieszyć bo nie da się przeskrolować do końca tak by animacja była zrobiona.
HTML:
<section style="height: 150vh; background-color: black;">
<div id="svg-container2">
<svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
<path id="my-path-2" class="path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
</svg>
</div>
<svg viewBox="0 0 1440 320">
<path id="my-path" class="path-" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
</svg>
</section>
CSS:
svg {
width: 100%;
height: 30%;
z-index: -1;
}
path {
stroke: #0099ff;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
fill: none;
}
JS:
const path1 = document.querySelector("#my-path");
const pathLength1 = path1.getTotalLength();
path1.style.strokeDasharray = pathLength1;
path1.style.strokeDashoffset = pathLength1;
const path2 = document.querySelector("#my-path-2");
const pathLength2 = path2.getTotalLength();
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;
window.addEventListener("scroll", () => {
const scrollTop = window.pageYOffset;
const scrollHeight = document.body.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / scrollHeight;
const drawLength1 = pathLength1 * scrollFraction;
path1.style.strokeDashoffset = pathLength1 - drawLength1;
let drawLength2 = pathLength2 * scrollFraction;
let offset2 = pathLength2 - drawLength2;
if (scrollFraction === 1) {
offset2 = pathLength2 - 1;
}
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = offset2;
if (drawLength2 <= 0) {
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;
}
});
Z góry dziękuje za pomoc <3!
