/
/
Example Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="empty"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<div id="image-container"></div>
<p>Nothing to see here...</p>
<!-- Project -->
<script src="main.js"></script>
</body>
</html>Example Css code
body {
font-size: 15pt;
}
.empty{
margin: 100vh;
}
#image-container {
visibility: hidden;
width: 100%;
height:100px;
border: 1px solid red;
margin-bottom: 1rem;
}
.visible{
visibility: visible !important;
}Example JS code
console.log(window.innerHeight);
let conts = document.querySelectorAll('#image-container');
const nums = [];
for (let c of conts) {
const rect = c.getBoundingClientRect();
const p = document.createElement('p');
p.textContent = 'deltaBottomLine: ' + (rect.top - window.innerHeight);
c.appendChild(p);
nums.push(p);
}
document.addEventListener('scroll', () => {
for (let i = 0; i < conts.length; i++) {
const rect = conts[i].getBoundingClientRect();
const delta = rect.top - window.innerHeight;
nums[i].textContent = 'deltaBottomLine: ' + delta;
console.log(delta)
if (delta < -150) {
conts[i].classList.add('visible');
}
}
});
Wednesday, December 11, 2024
New test twst
Test uopoooooo
Ptolemy and Al-Sûfi
The star γ Geminorum was rated third magnitude by Ptolemy and Al-Sûfi, or equal to δ Geminorum....
