Dotaz: Bootstrap 4: jak vytvorit rotujici radialni paprsky na pozadi?

[zdenek2008]

Přílohy:

• sunburst_spinning.html (2278 bytů)
• sunburst_static.html (5553 bytů)

Na pozadi nejakeho div elementu v Bootstrapu 4 bych chtel mit rotujici radialni paprsky. Momentalne mam dva vzory: jeden vypada docela luxusne, prizpusobuje se velikosti konkretniho elementu, ale nerotuje. Ten druhy rotuje, ale ma velikost napevno a pri zmene nejakeho rozmeru ve zdrojaku se cely obrazec rozpadne. Navic mi neni uplne jasne jak ho pouzit jako pozadi. Potreboval bych jejich vlastnosti zkombinovat tak, aby rotoval, prizpusobil se velikosti rodicovskeho elementu a slouzil jako pozadi, cili aby se dalo neco umistit pred nej (grafika, text apod.). Kdyby mel i stinovani jako ten staticky vzor, tak to byla uz jen tresnicka na dortu, ale obesel bych se bez toho, stacily by "ploche" barvy. Oba zdrojaky ale maji jinou koncepci, tak nevim... Nemeli byste nekdo nejake napady nebo tipy? Kdyztak predem diky.

---

---

Odpovědi

[Odin1918]

Co misto toho pouzit bezici text nebo tancujiciho Jezise?

[debian+]

Co je za jednotku vw v tom static?

[zdenek2008]

Tak to by byla otazka spis pro autora zdrojaku.

[debian+]

https://css-tricks.com/fun-viewport-units/

[debian+]

Zas som sa nieco nove dozvedel.

[zdenek2008]

Příloha:

• slunicko.html (3820 bytů)

No, pokud to ma byt ciste jako CSS pozadi (a ne ruzne prekryte pseudoelementy jako v tech prilohach), muzete vyuzit toho, ze se do CSS da vkladat SVG a do SVG se da vkladat CSS.

Priklad tu: codepen.io/helb/pen/QzKxvx

[OldFrog {Ondra Nemecek}]

To je fajn, akorát to docela žere CPU. Firefox asi 40%, Chromium cca 10%.

[helb]

To bohuzel jo. Zkousel jsem misto SVG jeste repeating-conic-gradient (podporuje jen Chromium 70+) a zere to zhruba stejne – holt prohlizec tak jako tak porad dokola prekresluje dost velkou plochu.

[zdenek2008]

Diky, vyzkousim. Pokud by to melo nejak vyznamne brzdit browser, tak zase uplne za kazdou cenu to mit nemusim, jen se mi to libi coby dekorace. Diky za tip.

[helb]

Jeste se da misto CSS animace pouzit SMIL. Ale obavam se, ze to bude zrat skoro stejne.

Priklad tu: codepen.io/helb/pen/wRoxLb

A samotna SVGcka: codepen.io/helb/pen/maOGmg (vlevo SMIL, vpravo CSS, pro pouziti v background: url(…) je potreba je prohnat urlencodem… viz ten predchozi priklad)

Btw. zkusil jsem to otevrit i na pocitaci s Windows a nezere to temer nic, asi se tam umi prohlizece nejak lepe domluvit s grafickou kartou… :(

Nejmene narocne na vykon/baterii by bylo asi pouziti <canvas>u a requestAnimationFrame. Ale to je zas narocnejsi na implementaci.

[zdenek2008]

Paradni prace, smekam. Diky.

[zdenek2008]

Jeste bych dodal, ze tve reseni vypada luxusne, pekna prace. Diky.