Much more button gen stuff
This commit is contained in:
Dan
parent
bdee635df0
commit
79a7557ea5
9 changed files with 1574 additions and 545 deletions
|
|
@ -121,6 +121,62 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Text Line 1 Animation</span>
|
||||
<span class="toggle-icon">−</span>
|
||||
</h3>
|
||||
<div class="control-group-content">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-text-wave" />
|
||||
<span>Wave Animation</span>
|
||||
</label>
|
||||
<div id="wave-controls" style="display: none">
|
||||
<label for="wave-amplitude"
|
||||
>Amplitude: <span id="wave-amplitude-value">3</span>px</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="wave-amplitude"
|
||||
min="0"
|
||||
max="10"
|
||||
value="3"
|
||||
step="0.5"
|
||||
/>
|
||||
|
||||
<label for="wave-speed"
|
||||
>Speed: <span id="wave-speed-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="wave-speed"
|
||||
min="0.5"
|
||||
max="3"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-text-rainbow" />
|
||||
<span>Rainbow Text</span>
|
||||
</label>
|
||||
<div id="rainbow-text-controls" style="display: none">
|
||||
<label for="text-rainbow-speed"
|
||||
>Speed: <span id="text-rainbow-speed-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="text-rainbow-speed"
|
||||
min="0.5"
|
||||
max="5"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Text Line 2</span>
|
||||
|
|
@ -219,6 +275,62 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Text Line 2 Animation</span>
|
||||
<span class="toggle-icon">−</span>
|
||||
</h3>
|
||||
<div class="control-group-content">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-text-wave2" />
|
||||
<span>Wave Animation</span>
|
||||
</label>
|
||||
<div id="wave-controls2" style="display: none">
|
||||
<label for="wave-amplitude2"
|
||||
>Amplitude: <span id="wave-amplitude2-value">3</span>px</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="wave-amplitude2"
|
||||
min="0"
|
||||
max="10"
|
||||
value="3"
|
||||
step="0.5"
|
||||
/>
|
||||
|
||||
<label for="wave-speed2"
|
||||
>Speed: <span id="wave-speed2-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="wave-speed2"
|
||||
min="0.5"
|
||||
max="3"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-text-rainbow2" />
|
||||
<span>Rainbow Text</span>
|
||||
</label>
|
||||
<div id="rainbow-text2-controls" style="display: none">
|
||||
<label for="text-rainbow-speed2"
|
||||
>Speed: <span id="text-rainbow-speed2-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="text-rainbow-speed2"
|
||||
min="0.5"
|
||||
max="5"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Background</span>
|
||||
|
|
@ -287,6 +399,37 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Background Animation</span>
|
||||
<span class="toggle-icon">−</span>
|
||||
</h3>
|
||||
<div class="control-group-content">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-bg-rainbow" />
|
||||
<span>Rainbow Flash</span>
|
||||
</label>
|
||||
<div id="rainbow-bg-controls" style="display: none">
|
||||
<label for="rainbow-speed"
|
||||
>Speed: <span id="rainbow-speed-value">0.5</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="rainbow-speed"
|
||||
min="0.1"
|
||||
max="3"
|
||||
value="0.5"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-bg-rainbow-gradient" />
|
||||
<span>Rainbow Gradient</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Border</span>
|
||||
|
|
@ -310,6 +453,155 @@
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<h3 class="control-group-header">
|
||||
<span>Special Effects</span>
|
||||
<span class="toggle-icon">−</span>
|
||||
</h3>
|
||||
<div class="control-group-content">
|
||||
<p class="info-text">
|
||||
Almost all animations should stack, so pick as many as you want.
|
||||
</p>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-glitch" />
|
||||
<span>Glitch Effect</span>
|
||||
</label>
|
||||
<div id="glitch-controls" style="display: none">
|
||||
<label for="glitch-intensity"
|
||||
>Intensity: <span id="glitch-intensity-value">3</span></label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="glitch-intensity"
|
||||
min="1"
|
||||
max="10"
|
||||
value="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-pulse" />
|
||||
<span>Pulse Effect</span>
|
||||
</label>
|
||||
<div id="pulse-controls" style="display: none">
|
||||
<label for="pulse-scale"
|
||||
>Scale: <span id="pulse-scale-value">1.1</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="pulse-scale"
|
||||
min="1.0"
|
||||
max="1.3"
|
||||
value="1.1"
|
||||
step="0.05"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-shimmer" />
|
||||
<span>Shimmer Effect</span>
|
||||
</label>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-scanline" />
|
||||
<span>Scanline Effect</span>
|
||||
</label>
|
||||
<div id="scanline-controls" style="display: none">
|
||||
<label for="scanline-intensity"
|
||||
>Intensity: <span id="scanline-intensity-value">0.3</span></label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="scanline-intensity"
|
||||
min="0.1"
|
||||
max="1"
|
||||
value="0.3"
|
||||
step="0.1"
|
||||
/>
|
||||
|
||||
<label for="scanline-speed"
|
||||
>Speed: <span id="scanline-speed-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="scanline-speed"
|
||||
min="0.5"
|
||||
max="3"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-rgb-split" />
|
||||
<span>RGB Split Effect</span>
|
||||
</label>
|
||||
<div id="rgb-split-controls" style="display: none">
|
||||
<label for="rgb-split-intensity"
|
||||
>Intensity: <span id="rgb-split-intensity-value">2</span>px</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="rgb-split-intensity"
|
||||
min="1"
|
||||
max="5"
|
||||
value="2"
|
||||
step="0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-noise" />
|
||||
<span>Noise Effect</span>
|
||||
</label>
|
||||
<div id="noise-controls" style="display: none">
|
||||
<label for="noise-intensity"
|
||||
>Intensity: <span id="noise-intensity-value">0.1</span></label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="noise-intensity"
|
||||
min="0.05"
|
||||
max="0.5"
|
||||
value="0.1"
|
||||
step="0.05"
|
||||
/>
|
||||
</div>
|
||||
{{/*
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" id="animate-rotate" />
|
||||
<span>Rotate Effect</span>
|
||||
</label>
|
||||
<div id="rotate-controls" style="display: none">
|
||||
<label for="rotate-angle"
|
||||
>Max Angle: <span id="rotate-angle-value">5</span>°</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="rotate-angle"
|
||||
min="2"
|
||||
max="15"
|
||||
value="5"
|
||||
step="1"
|
||||
/>
|
||||
|
||||
<label for="rotate-speed"
|
||||
>Speed: <span id="rotate-speed-value">1.0</span>x</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
id="rotate-speed"
|
||||
min="0.5"
|
||||
max="3"
|
||||
value="1.0"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
*/}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue