BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Diskuze: Vykreslení čáry při scrollu

Aktivity (2)
Avatar
Vojta Korduliak:30. července 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. července 11:04
Avatar
Jiří Havelka:30. července 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. července 18:48
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:31. července 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. července 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.