|
|
|
@ -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, |
|
|
|
|