idanoo/interesting.rocks
1
0
Fork 0
mirror of https://github.com/idanoo/interesting.rocks synced 2025-07-01 21:52:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: idanoo:3767986aed16cea549f0a92d5c030e8db004a7af
Branches Tags
idanoo:main
...
compare: idanoo:a2a56e66248e76fe8384c837be21b251411f80d2
Branches Tags
idanoo:main

2 commits
3767986aed ... a2a56e6624

Author SHA1 Message Date
Daniel Mason
a2a56e6624
Hold yerrr horses 2025-05-12 17:33:15 +12:00
Daniel Mason
cfe31620db
ROCKS 2025-05-12 17:00:47 +12:00
1 changed files with 56 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

66
index.html
View file

@ -24,10 +24,6 @@
margin: 0 0 50px 0;
}
/* .rotate {
animation: rotation 5s infinite linear;
} */
img {
margin-top: 5px;
}
@ -62,28 +58,59 @@
<h1>interesting.rocks</h1>
<div class="rockcontainer">
<div class="rockrow">
<img src="rock1.png" alt="rock" class="rotate" width="474" height="316">
<img src="rock2.png" alt="rock" class="rotate" width="474" height="369">
<img src="rock1.png" alt="rock" class="rotate zoomies" width="474" height="316">
<img src="rock2.png" alt="rock" class="rotate zoomies" width="474" height="369">
</div>
<div class="rockrow">
<img src="rock3.png" alt="rock" class="rotate">
<img src="rock4.png" alt="rock" class="rotate">
<img src="rock3.png" alt="rock" class="rotate zoomies" width="576" height="433">
<img src="rock4.png" alt="rock" class="rotate zoomies" width="577" height="433">
</div>
</div>
</main>
<script>
let w = 32;
let x = 10;
let y = 0;
let z = 1;
let colours = ['grey', 'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink'];
let boop;
let boopBg;
function h1Boop() {
if (z >= colours.length) {
z = 0;
}
$('h1').css('color', colours[z]);
z++;
}
function bgBoop() {
if (y >= colours.length) {
y = 0;
}
$('body').css('background-color', colours[y]);
y++;
}
function setSpeed() {
x = x/2;
if (x < 0.01) {
if (x < 0.5) {
clearInterval(boop);
$('.rockcontainer').css('animation', 'rotation 5s infinite linear');
$('.rotate').each(function(index , element) {
$(element).css('animation', 'rotation 5s infinite linear');
});
setTimeout(function() {
boopBg = setInterval(bgBoop, 500);
setTimeout(function() {
setInterval(h1Boop, 250);
}, 2500);
}, 2000);
return
}
@ -93,7 +120,26 @@
}
$(function() {
boop = setInterval(setSpeed, 500);
boop = setInterval(setSpeed, 2000);
setTimeout(function() {
setInterval(function() {
$('.rotate').each(function(index , element) {
w = w+1;
$('h1').css('font-size', w);
});
}, 1000);
}, 1000);
setTimeout(function() {
setInterval(function() {
$('.rotate').each(function(index , element) {
$(element).width($(element).width() + 5);
$(element).height($(element).height() + 5);
});
}, 200);
}, 10000);
$('.body').css('background-color', 'grey');
});
</script>
</body>