RustyStriker/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

1 box multiple splitters(who will win?)

Browse source
This commit is contained in:
RustyStriker 2022-07-25 15:06:05 +03:00
parent 835e5fdbac
commit 4048905896
9 changed files with 74 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

36
old_index.html
View file

@ -34,20 +34,17 @@
A button
</p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<div id="appearing-div" style="visibility: hidden;">
<p>
<hr/>
<p id="appearing-div" style="visibility: hidden;">
As you can see, clicking that button changes the background.
<br>
But something to note here, while you set colors usually using "#012345"
when you retrieve those colors using js, it gives you a string
like "rgb(1, 35, 69)" instead, which i find dumb and annoying...
</p>
<p>
<br><br>
Also, i made this part appear only after you clicked the button,
because i can!
</p>
<p>
<br><br>
Another thing to note here, is that even tho some stuff
might have 2 options(technically) and could be used as a bool,
since CSS and everything, you have multiple values for them,
@ -56,29 +53,26 @@
(i use inherit because you might never know if the parent is visible
or not and we are trying to not cause weird bugs on our first day)
</p>
</div>
<div id="rangeDiv">
<p>
<hr/>
<p id="rangeDiv">
Now imma make a slider, which may or may not do something extre
<br>
Only one way to find out!
</p>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
</div>
<div id="animated">
<p>
And now, I will attempt to animate this div
<hr/>
<p id="animated">
And now, I will attempt to animate this paragraph
</p>
<button onclick="animateDiv()">Start the show please</button>
</div>
<div id="keyframeAnimated">
<p>
<button onclick="animateP()">Start the show please</button>
<hr/>
<p id="keyframeAnimated">
The last animation was made using the `setInterval` and `clearInterval`
built in function,
but this one will use the `animate` built in function
(I really hope it works well)
</p>
<button onclick="animateDivAgain()">I hope this is better</button>
<button onclick="animatePAgain()">I hope this is better</button>
<p>
This is indeed MUCH MUCH better. BUT, it is experimental
and not supported on everything or something
@ -119,7 +113,7 @@
div.style.color = "rgba(255, 150, 150, " + value + ")";
}
var divAnimationId = null;
function animateDiv() {
function animateP() {
clearInterval(divAnimationId);
let div = document.getElementById("animated");
let dir = -0.1;
@ -138,7 +132,7 @@
}
divAnimationId = setInterval(frame, 25);
}
function animateDivAgain() {
function animatePAgain() {
let div = document.getElementById("keyframeAnimated");
div.animate([
{ color: "rgba(255,150,150, 1.0"},