12. únor 2021
Návod na vlastní design pro kolo štěstí
Postup pro vytvoření kola štěstí s vlastním HTML a CSS kódem
HTML a CSS pro kolo štěstí
Základní HTML layout
<main class="mlctr-underlayer ml-v-2" role="ml" style="background-color:rgba(0, 0, 0, 0.65)">
<form onsubmit="return mailocator.action.do('subscribe')">
<div class="mlctr-wheel mlctr-flex" style="width: 600px">
...
</div>
</form>
</main>
vložte základní kostru přesně v níže uvedeném pořadí tagů. Toto pořadí tagů je povinné.
<main> představuje vrstvu pozadí s nastavenou průhledností<form> pro odeslání dat do Mailocatoru akcí subscribe<div class="mlctr-wheel ... výchozí element definující typ kampaně pomocí třídy .mlctr-wheel a s výchozí šířkouZákladní CSS
@import url('https://www.cdn-ml.net/css/mailocator-v2.1.css');
/* background */
.mlctr-underlayer { position:fixed; z-index:99999; width: 100%; height: 100%; top:0px; left:0px; right:0px; bottom:0px;) }
/* campaign */
.mlctr-wheel {
position: relative;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow:hidden;
}
vložte doporučenou sadu stylů pro kampaně v Mailocatoru, verzi
vynechání této sady může ovlivnit chování animací, responzivity a způsobit nežádoucí chování nebo zobrazení
přidejte nutné minimum stylů pro vykreslení vycentrovaného elementu určeného pro zobrazení obsahu okna, tedy alespoň pro
mailocator-v2.1.css nebo novějšívynechání této sady může ovlivnit chování animací, responzivity a způsobit nežádoucí chování nebo zobrazení
přidejte nutné minimum stylů pro vykreslení vycentrovaného elementu určeného pro zobrazení obsahu okna, tedy alespoň pro
.mlctr-underlayer a .mlctr-wheelVložení vlastního kola
Grafika a formát
Pro přípravu kola grafikem doporučujeme vytvořit defaultní kolo rozdělené na požadovaný počet segmentů, stáhnout si SVG zdroj a předat grafikovi k dalším úpravám.
Kolo musí mít vždy stejnou výšku a šířku, případné stíny a další designové prvky je třeba vložit jako separátní elementy s vlastním pozicováním.
Striktně doporučujeme kolo připravit ve vektorovém formátu SVG, ale je možné využít i rastrové formáty JPG nebo PNG.
Kolo musí mít vždy stejnou výšku a šířku, případné stíny a další designové prvky je třeba vložit jako separátní elementy s vlastním pozicováním.
Striktně doporučujeme kolo připravit ve vektorovém formátu SVG, ale je možné využít i rastrové formáty JPG nebo PNG.
Způsob vložení
Kolo lze vložit buď jako obrázek pomocí tagu
Kolo můžete umístit na libovolné místo, excentricky, částečně skryté nebo jiným způsobem.
Kolo nevyžaduje žádné povinné stylování.
Vložení jako obrázek:
Vložení SVG na přímo:
<IMG> nebo jako XML zdroj v tagu <SVG>.Kolo můžete umístit na libovolné místo, excentricky, částečně skryté nebo jiným způsobem.
Kolo nevyžaduje žádné povinné stylování.
Vložení jako obrázek:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" width="500" height="500" data-pointer_deg="0">Vložení SVG na přímo:
<svg id="mlctr_wheel" width="500" height="500" data-pointer_deg="0" viewBox="20 20 460 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> ... </svg>Označení kola
Kolo musí být označené atributem
Příklad:
id="mlctr_wheel" Příklad:
<img src="https://example.com/my-wheel.svg" id="mlctr_wheel" ...<svg id="mlctr_wheel" ... Nastavení ukazatele výhry
Ukazatel výhry může být v libovolném tvaru a můžete jej umístit kdekoli po obvodu kola. Aby došlo ke správnému ukázání výhry, je třeba Mailocatoru říct, kde se ukazatel nachází. Nastavení je třeba provést pomocí atributu
pokud je ukazatel umístěn na 3 hodinách (vpravo uprostřed), jde o výchozí pozici a atribut není třeba nastavovat nebo nastavit na 0
pokud je ukazatel umístěn nahoře na 12 hodinách (nahoře uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
pokud je ukazatel umístěn dole na 6 hodinách (dole uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
pokud je ukazatel umístěn dole na 9 hodinách (vlevo uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
Tímto způsobem můžete umístit pozici ukazatele kamkoli, pouze musíte uvést dopočítanou pozici ve stupních.
Příklad:
data-pointer_deg na obrázku kola, kam zapíšete číslo s počtem stupňů, které se liší od výchozí pozice, která se nachází na 3 hodinách resp. 90 stupních.pokud je ukazatel umístěn na 3 hodinách (vpravo uprostřed), jde o výchozí pozici a atribut není třeba nastavovat nebo nastavit na 0
pokud je ukazatel umístěn nahoře na 12 hodinách (nahoře uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
-90 stupňů: data-pointer_deg="-90"pokud je ukazatel umístěn dole na 6 hodinách (dole uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
90 stupňů: data-pointer_deg="90"pokud je ukazatel umístěn dole na 9 hodinách (vlevo uprostřed), nastavte počet stupňů relativně k výchozí pozici, tedy
180 stupňů: data-pointer_deg="180"Tímto způsobem můžete umístit pozici ukazatele kamkoli, pouze musíte uvést dopočítanou pozici ve stupních.
Příklad:
<img src="https://example.com/my-wheel.svg" data-pointer_deg="90" ...<svg id="mlctr_wheel" data-pointer_deg="90" ...