FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:30.7.2020 11:04

Ahoj,
snažím se udělat udělat timeline, jejíž spojující čáry se budou vykreslovat při scrollování. Nějaký tip jak to udělat přes výšku, aniž bych musel použít SVG?

Zkusil jsem:

$(window).scroll(function(){
    if (line1.offsetHeight < (distFirts - 62)) {
        var scrollAmount = $(window).scrollTop();
        var documentHeight = $(window).height();

        var scrollPercent = (scrollAmount / documentHeight) * 1000;

        $(".line1").css({
            height: scrollPercent + 'px'
        });

    }
});

Zkoušel jsem toto, ale při rychlejším scrollu se čára zastaví za svým limitem.
btw proměnná distFirst je vzdálenost mezi dvěma itemy nebo maximální výška čáry.

 
Odpovědět
30.7.2020 11:04
Avatar
Jiří Havelka
Člen
Avatar
Jiří Havelka:30.7.2020 18:48

Zkusil bych míslo neustálého prodlužocání téhož čarového elementu pokaždé přidat další čarový element.

 
Nahoru Odpovědět
30.7.2020 18:48
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31.7.2020 10:09
  1. kdyz posilas neco do px, tak ti tam schazi Math.floor.
  2. Nemam absolutne tuseni, ceho se snazis dosahnout. Zkus pridat treba obrazky pro jednotlive situace. Malovani funguje i na win10 :) A ty obrazky popis, co jsi udelal, kde a co se melo stat a co se stalo. Pripadne, jak je to spravne.
  3. Mozna by byl lepsi jednoduchy fungujici priklad, treba na jsfiddle.net. Takhle jsi dal kus kodu, ktery bez niceho dalsiho nedava prilis smysl a ted babo rad :)

4.
Ten kod by mel podle vseho vzit a = window.odrolo­vano_zhora, b = window.vyska_okna a tyto dve hodnoty podelit.
"při rychlejším scrollu se čára zastaví za svým limitem."
To znamena co? Co je limit cary? To je nejaky pojem, co sis definoval ve sve hlave a dokud jej neobjasnis, tak nedava smysl. Jaka cisla nabyva A a B za normalnich okolnosti a jaka pri rychlem scrolovani? Jestli se to tyka tech cisel.

5.
Proc kontrolujes line1.offsetHeight < (distFirts - 62)?

$(".line1").css({
    height: scrollPercent + 'px'
});

Jestli to spravne chapu, tak vysku toho prvku nastavujes jen a pouze ty. Nebylo by tedy programove casove uspornejsi si udelat js promenou a do ni ukladat, nez pokazde zjistovat offset? Ja bych to resil nejak takto:

cara = {};
cara.height = 0;
cara.height_max = distFirts - 62;
if (cara.height < cara.height_max ) {...
cara.height =  Math.floor(scrollPercent);
cara.height =  cara.height<cara.height_max ? cara.height : cara.height_max;
        $(".line1").css({
            height: cara.height + 'px'
        });

No, a ted je otazka, co chces docilit? Podle kodu, kdyz bude odscrolovano prilis dolu, kod prestane fungovat a neni tam kod, aby znovu fungoval. Cili to ifko tam spis nema byt, protoze to resim tim dalsim kodem:

cara = {};
cara.height = 0;
cara.height_max = distFirts - 62;
...
cara.height =  Math.floor(scrollPercent);
cara.height =  cara.height<cara.height_max ? cara.height : cara.height_max; // orizne do 0-maximum
        $(".line1").css({
            height: cara.height + 'px'
        });

Neni mi uplne jasne, co chces docilit.
%odscrolovani = scrollAmount / documentHeight
% vykreslena do cary o delce 100 px = Math.floor(%od­scrolovani * 100)
Ja prave nechapu to s tim zastavenim na nejakem maximu, nebo, co to je.

 
Nahoru Odpovědět
31.7.2020 10:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.