Zadejte hledaný výraz...
Jakub Glos
Webtrh.cz
Vývoj webových stránek na WordPressu a proklientský přístup pro freelancery
Třídenní infromacemi nabitý prezenční + online kurz v Praze od Webtrhu pouze za 2 871 Kč
Více informací

Konfigurator, kde se meni barva casti produktu

franta.hosek
verified
rating uzivatele
29. 3. 2021 13:07:56
Ahoj,
dokazal by mi prosim nekdo rict, jaky termin/frazi mam Googlit nebo hledat ve chvili, kdy bych si rad udelal konfigurator, kde se meni barvy urcite vrstvy, atd. a potrebuju neco jako tutorial?
Jde mi o to, ze mam treba nejaky vychozi obrazek auta, pak zvolim barvu, takze se to prekresli. Pak je tam treba barva disku u kol, takze jen cast obrazku, kdy se zase zmeni dana barva.
Asi se to nedela tak, ze kazda ta cast jen nejake PNG, co se dynamicky nacita?
Navedete me prosim? Dekuji moc.
29. 3. 2021 13:07:56
https://webtrh.cz/diskuse/konfigurator-kde-se-meni-barva-casti-produktu/#reply1481225
TomasX
verified
rating uzivatele
(4 hodnocení)
29. 3. 2021 13:30:03
Osobně bych hledal něco jako "javascript recoloring image", "javascript css blending", "javascript image change color".
Cest jak toho docílit je celá řada. Jeden z návodů je třeba tady https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/, používá pro mě asi nejpřímočařejší cestu, nejprve si z obrázku vezme masku částí, které chce přebarvovat, poté v prohlížeči mění barvu téhle vrstvy a přes css vlastnost mix-blend-mode: multiply (lze volit i jiný móde, záleží v jakých barvách bude tvůj podkladový obrázek) jí prolne s původním obrázkem (podobně se to dá dělat i rychle ve photoshopu), mix-blend-mode je poměrně široce dostupný v prohlížečích - https://caniuse.com/?search=mix-blend-mode, ale musíš si sám stanovit, kdo je tvoje cílovka a jakým prohlížeči to chceš podporovat, případně pak lze najít nějaký javascript polyfill.
29. 3. 2021 13:30:03
https://webtrh.cz/diskuse/konfigurator-kde-se-meni-barva-casti-produktu/#reply1481224
crs
verified
rating uzivatele
(1 hodnocení)
23. 4. 2021 12:04:19
Například tento konfigurátor - http://www.printed.cz/shop/set-full-mode
dává pod sebe několik PNGček s průhledností. Řídí to JavaScript,
který dané PNG přidá na základě zvolených vstupních políček.
Pro obecnější a parametričtější výběr barvy bych si dokázal představit
mít jako jednu z vrstev PNGčko s jednou vybranou maximálně sytou primární barvou
a na ni aplikovat css filtr hue-rotate (https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=hue-rotate(90deg) )
23. 4. 2021 12:04:19
https://webtrh.cz/diskuse/konfigurator-kde-se-meni-barva-casti-produktu/#reply1481223
Pro odpověď se přihlašte.
Přihlásit