81 lines
No EOL
2.5 KiB
HTML
81 lines
No EOL
2.5 KiB
HTML
<div class="background-container" id="bg-container">
|
|
<img id="background-thumb" alt="Background" class="background-image">
|
|
<img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
|
|
<div id="cursor-circle"></div>
|
|
<script>
|
|
const thumbImg = document.getElementById('background-thumb');
|
|
const fullImg = document.getElementById('background-full');
|
|
const imageName = 'Apophysis_071008-64.webp';
|
|
const thumbPath = `/backgrounds/thumbs/${imageName}`;
|
|
const fullPath = `/backgrounds/${imageName}`;
|
|
|
|
thumbImg.src = thumbPath;
|
|
|
|
setTimeout(() => {
|
|
const preloadImg = new Image();
|
|
preloadImg.onload = () => {
|
|
fullImg.src = fullPath;
|
|
fullImg.classList.add('loaded');
|
|
setTimeout(() => thumbImg.remove(), 2000);
|
|
};
|
|
preloadImg.onerror = () => {
|
|
fullImg.src = fullPath;
|
|
fullImg.classList.add('loaded');
|
|
};
|
|
preloadImg.src = fullPath;
|
|
}, 800);
|
|
|
|
const container = document.getElementById('bg-container');
|
|
const circle = document.getElementById('cursor-circle');
|
|
let hoverTimer = null;
|
|
let revealTimer = null;
|
|
let isRevealed = false;
|
|
|
|
container.addEventListener('mousemove', (e) => {
|
|
if (isRevealed) return;
|
|
|
|
circle.style.left = e.clientX + 'px';
|
|
circle.style.top = e.clientY + 'px';
|
|
|
|
if (!hoverTimer) {
|
|
hoverTimer = setTimeout(() => {
|
|
circle.classList.add('active');
|
|
revealTimer = setTimeout(() => {
|
|
circle.classList.remove('active');
|
|
circle.classList.add('fade-out');
|
|
fullImg.classList.add('unblurred');
|
|
isRevealed = true;
|
|
}, 4000);
|
|
}, 1000);
|
|
}
|
|
});
|
|
|
|
const resetEffect = () => {
|
|
clearTimeout(hoverTimer);
|
|
clearTimeout(revealTimer);
|
|
hoverTimer = null;
|
|
revealTimer = null;
|
|
circle.classList.remove('active', 'fade-out');
|
|
fullImg.classList.remove('unblurred');
|
|
isRevealed = false;
|
|
};
|
|
|
|
container.addEventListener('mouseleave', resetEffect);
|
|
window.addEventListener('mouseout', (e) => {
|
|
if (!e.relatedTarget || e.relatedTarget.nodeName === 'HTML') {
|
|
resetEffect();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
<article class="prose max-w-full dark:prose-invert glass">
|
|
{{ with .Title }}
|
|
<header>
|
|
<h1>{{ . | emojify }}</h1>
|
|
</header>
|
|
{{ end }}
|
|
<section>{{ .Content | emojify }}</section>
|
|
</article>
|
|
<section>
|
|
{{ partial "recent-articles.html" . }}
|
|
</section> |