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

73
another_page.html
View file

@ -3,7 +3,7 @@
Oh good, the last page got really crowded,
ok, back to the nonsense!
</p>
<div style="width: 98%;">
<div>
<h1>
Links are stupid
</h1>
@ -26,7 +26,7 @@
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
<p>
Boy this page looks blend only with text,
and KDE keeps crashing on my laptop...
and KDE keeps crashing on my laptop(used the )...
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
@ -44,31 +44,32 @@
<br>
I will try it tho
</p>
</div>
<div style="margin:auto;height: 360px;">
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
<p>
Please enjoy Molly's picture as I figure how to get the scroll data...
</p>
<div class="borderless" id="cat_par2" style="visibility: hidden;">
<hr>
<div class="borderless" style="margin:auto;height: 360px;">
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
<p>
Taadaaa!
<br>
That wasn't hard enough.
<br>
But things to note here, both cats are using `style="float:right;"`
(with the sliding one also being invisible until the animation appears)
and the animation used is with the `animate` method(and a lot of trial and error)
<br><br>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
Please enjoy Molly's picture as I figure how to get the scroll data...
</p>
<div class="borderless" id="cat_par2" style="visibility: hidden;">
<p>
Taadaaa!
<br>
That wasn't hard enough.
<br>
But things to note here, both cats are using `style="float:right;"`
(with the sliding one also being invisible until the animation appears)
and the animation used is with the `animate` method(and a lot of trial and error)
<br><br>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
</p>
</div>
</div>
</div>
</div>
<br>
<div>
<br>
<hr/>
<br>
<p>
Anyway, some questions arise while im doing this, like
<br><br>
@ -98,6 +99,7 @@
Because Like,
with html(and css) only, you are getting something that is ONLY drawing instrctions(and animations?),
but it is all visuals(or should be), instructions on how to paint,
<br>
so if i decide to make a css-less browser(like <a href="https://metamuffin.org">metamuffin</a> did),
then everything should still work(but look like shit), which is awesome.
<br>
@ -108,21 +110,20 @@
<br>
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system,
some bad things may happen
</p>
</div>
<script>
var needToAnimateImage = true;
document.body.onscroll = onBodyScroll;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";
img.animate([
{ transform: "translateX(400px)" },
<script>
var needToAnimateImage = true;
document.body.onscroll = onBodyScroll;
function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage) {
needToAnimateImage = false;
let img = document.getElementById("animatedImage");
img.style.visibility = "inherit";
img.animate([
{ transform: "translateX(400px)" },
{ transform: "translateX(0px)"},
], {
duration: 2000,