adrien/quatuor
adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: adrien:f012a8f74b8065bdd3091209af2c4edd9c59fe6c
Branches Tags
adrien:master
..
compare: adrien:b25ed692dbed48ca3d42eb4f276d60b72764e0cc
Branches Tags
adrien:master

2 Commits
f012a8f74b ... b25ed692db

Author SHA1 Message Date
adrien
b25ed692db level message transition 2023-04-22 01:00:57 +02:00
adrien
36528c129b das fine tuning 2023-04-22 01:00:42 +02:00
2 changed files with 11 additions and 6 deletions
Show Stats Expand all files Collapse all files

15
css/common.css
View File

@ -106,16 +106,21 @@ span {
} }
50% { 50% {
opacity: 100%; opacity: 100%;
transform: translateY(0); transform: translateY(0) scaleY(1);
line-height: var(--bs-body-line-height);
} }
to { to {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%) scaleY(0);
line-height: 0;
} }
} }
div.show-level-animation { div.show-level-animation {
animation: show-level-animation cubic-bezier(0.4, 0, 0.6, 1) 2s 1s; animation: show-level-animation;
animation-timing-function: (0.4, 0, 0.6, 1);
animation-duration: 2s;
animation-delay: 1s;
} }
@keyframes zoom-in-animation { @keyframes zoom-in-animation {
@ -167,12 +172,12 @@ div.show-level-animation {
#messagesSpan div.rotate-in-animation { #messagesSpan div.rotate-in-animation {
animation-name: rotate-in-animation; animation-name: rotate-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94); animation-timing-function: cubic-bezier(.25,.46,.45,.94);
animation-duration: 1.5s; animation-duration: 1s;
} }
#messagesSpan div.zoom-in-animation { #messagesSpan div.zoom-in-animation {
animation-name: zoom-in-animation; animation-name: zoom-in-animation;
animation-timing-function: cubic-bezier(.25,.46,.45,.94); animation-timing-function: cubic-bezier(.25,.46,.45,.94);
transform-origin:center; transform-origin:center;
animation-duration: 1.5s; animation-duration: 1s;
} }

2
index.html
View File

@ -83,7 +83,7 @@
</div> </div>
<div class="col-sm-3"> <div class="col-sm-3">
<output id="dasOutput" class="form-text form-text-sm w-100 m-auto text-center" for="dasInput">180 ms</output> <output id="dasOutput" class="form-text form-text-sm w-100 m-auto text-center" for="dasInput">180 ms</output>
<input name="das" id="dasInput" type="range" class="form-range h-100" value="180" min="100" max="500" step="10" oninput="dasOutput.value = value + ' ms'"> <input name="das" id="dasInput" type="range" class="form-range h-100" value="180" min="100" max="500" step="5" oninput="dasOutput.value = value + ' ms'">
</div> </div>
<label for="dasInput" class="col-sm-3 col-form-label" title="Delayed AutoShift : délai initial avant répétition">DAS</label> <label for="dasInput" class="col-sm-3 col-form-label" title="Delayed AutoShift : délai initial avant répétition">DAS</label>
</fieldset> </fieldset>