2022-03-25 11:08:07 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>
|
|
|
|
|
Links are stupid
|
|
|
|
|
</title>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
|
|
|
|
|
</head>
|
|
|
|
|
<body onscroll="onBodyScroll()">
|
|
|
|
|
Oh good, the last page got really crowded,
|
|
|
|
|
ok, back to the nonsense!
|
|
|
|
|
<h1>
|
|
|
|
|
Links are stupid
|
|
|
|
|
</h1>
|
|
|
|
|
<h3>
|
|
|
|
|
"hErE's WhY"
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
So, if you want a hyper link in your site,
|
|
|
|
|
you need to use the <a> tag, but you have a <link>
|
|
|
|
|
tag, which links to another file(to import it, which indeed is useful),
|
|
|
|
|
but like, it could have a more "correct" name, and if you want to get a hyper link
|
|
|
|
|
you need to use the <a> tag.
|
|
|
|
|
<br>
|
|
|
|
|
And, I'm not saying you need to remove/replace the link, but like,
|
|
|
|
|
instead of <a> do something like <hyper>
|
|
|
|
|
or <hyperlink> or even <hlink>
|
|
|
|
|
(the last one might be confusing since it looks a lot like link,
|
|
|
|
|
but it is still better than fucking <a>)
|
|
|
|
|
</p>
|
|
|
|
|
<div style="width:60%; 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...
|
|
|
|
|
<br>
|
|
|
|
|
(in case you were wondering this div is "width:60%; margin:auto"
|
|
|
|
|
with some color values)
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
Any cool stuff I can try to make? Maybe an animated image
|
|
|
|
|
which flies in when you scroll down enough?
|
|
|
|
|
<br>
|
|
|
|
|
Sounds kinda stupid, and I hate it when websites makes scrolling
|
|
|
|
|
"digital"(by digital I mean it has discrete states, which I know everything
|
|
|
|
|
in computers are in discrete states since you cannot have the infinity in
|
|
|
|
|
a computer because reasons, but like, you get the point, its like having
|
|
|
|
|
a couple of stupid sites stitched on top of each other, which just sucks)
|
|
|
|
|
<br>
|
|
|
|
|
I will try it tho
|
|
|
|
|
</p>
|
|
|
|
|
<div style="margin:auto;height: 350px;">
|
2022-03-25 11:23:13 +00:00
|
|
|
<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;">
|
2022-03-25 11:08:07 +00:00
|
|
|
<div style="width: 50%; margin:auto;">
|
|
|
|
|
<p>
|
2022-03-25 11:23:13 +00:00
|
|
|
Please enjoy Molly's picture as I figure how to get the scroll data...
|
2022-03-25 11:08:07 +00:00
|
|
|
</p>
|
|
|
|
|
<div 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)
|
|
|
|
|
</p>
|
2022-03-25 11:23:13 +00:00
|
|
|
<p>
|
|
|
|
|
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
|
|
|
|
|
</p>
|
2022-03-25 11:08:07 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
Anyway, some questions arise while im doing this, like
|
|
|
|
|
<br><br>
|
|
|
|
|
<b>Should websites be interactive at all?</b>
|
|
|
|
|
<br><br>
|
|
|
|
|
Of course they should, it's more fun that way!
|
|
|
|
|
<br><br>
|
|
|
|
|
<b>But just how much interactivity should we have...</b>
|
|
|
|
|
<br><br>
|
|
|
|
|
Forms and Such? Must(for needed websites)
|
|
|
|
|
<br>
|
|
|
|
|
Animations? Sure, it's fun, but dont push it.
|
|
|
|
|
<br>
|
|
|
|
|
Games? If you embed a game in your browser that is actually cool,
|
|
|
|
|
tho you prob shouldn't do it with javascript, or at least javascript shouldn't
|
|
|
|
|
support it, if we had solutions like the old ass flash player.
|
|
|
|
|
<br><br>
|
|
|
|
|
<i>"bUt FlAsH pLaYeR SuX(tm)"</i>
|
|
|
|
|
<br><br>
|
|
|
|
|
I said <b>like</b>...
|
|
|
|
|
And something is approaching, called wasm, or web assmbly.
|
|
|
|
|
<br>
|
|
|
|
|
But that brings another question to mind
|
|
|
|
|
<br><br>
|
|
|
|
|
<b>How far should we push our browsers?</b>
|
|
|
|
|
<br><br>
|
|
|
|
|
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,
|
|
|
|
|
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>
|
|
|
|
|
If i dont "trust" CSS i can just disable it.
|
|
|
|
|
<br>
|
|
|
|
|
But with JavaScript, it is a fully blown scripting language(a shitty one but still),
|
|
|
|
|
people made countless things with js, from fully featured web games, to a bloody backend system(why?).
|
|
|
|
|
<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>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
var needToAnimateImage = true;
|
|
|
|
|
function onBodyScroll() {
|
|
|
|
|
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
|
|
|
|
|
if (needToAnimateImage && scrollPercent > 0.99) {
|
|
|
|
|
needToAnimateImage = false;
|
|
|
|
|
let img = document.getElementById("animatedImage");
|
|
|
|
|
img.style.visibility = "inherit";
|
|
|
|
|
img.animate([
|
|
|
|
|
{ transform: "translateX(400px)" },
|
|
|
|
|
{ transform: "translateX(0px)"},
|
|
|
|
|
], {
|
|
|
|
|
duration: 2000,
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
setInterval(function() { document.getElementById("cat_par2").style.visibility = "inherit"; }, 2000);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2022-03-25 11:23:13 +00:00
|
|
|
</html>
|
