joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

link hover effect

Browse source
This commit is contained in:
Joshua Seigler 2025-06-10 00:41:07 -04:00
parent 1559a3c68c
commit b91bb04c2e
3 changed files with 83 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/_includes/-footer.njk
View file

@ -19,3 +19,5 @@
<a href="https://unofficehours.com" rel="noopener">List</a> <a href="https://unofficehours.com" rel="noopener">List</a>
</section> </section>
</footer> </footer>
<div id="effects">
</div>

41
site/_includes/base.njk
View file

@ -1,6 +1,7 @@
--- ---
title: Joshua's Homepage title: Joshua's Homepage
--- ---
{%- set computedTitle = tag | capitalize if tag else title -%} {%- set computedTitle = tag | capitalize if tag else title -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -32,12 +33,50 @@ title: Joshua's Homepage
{% include "-footer.njk" %} {% include "-footer.njk" %}
</body> </body>
<script> <script>
function setScrollAmount() {
const body = document.documentElement || document.body; const body = document.documentElement || document.body;
function setScrollAmount() {
body.style.setProperty("--scrollLengthPx", body.scrollTop); body.style.setProperty("--scrollLengthPx", body.scrollTop);
} }
setScrollAmount(); setScrollAmount();
document.addEventListener("scroll", setScrollAmount); document.addEventListener("scroll", setScrollAmount);
document.addEventListener("resize", setScrollAmount); document.addEventListener("resize", setScrollAmount);
function rippleListener(el) {
return (evt) => {
const {
top,
right,
bottom,
left,
} = evt.target.getBoundingClientRect();
const effects = body.querySelector("#effects");
const newEffect = document.createElement("div");
newEffect.classList.add("effect-instance");
const padding = '10rem';
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`;
newEffect.style.width = `calc(${right - left}px + 2 * ${padding})`;
newEffect.style.height = `calc(${bottom - top}px + 2 * ${padding})`;
newEffect.style.borderRadius = `${Math.min(bottom - top, right - left) / 2}px`;
effects.appendChild(newEffect);
const reverser = () => {
newEffect.getAnimations().forEach(anim => {
anim.pause();
anim.updatePlaybackRate(5);
anim.reverse();
anim.addEventListener('finish', () => {
if (effects.contains(newEffect)) {
effects.removeChild(newEffect);
}
});
});
}
el.addEventListener('mouseleave', reverser);
el.addEventListener('blur', reverser);
}
}
Array.from(document.querySelectorAll('a[href],.nav-toggle-button')).forEach(el => {
el.addEventListener('mouseenter', rippleListener(el));
el.addEventListener('focus', rippleListener(el));
});
</script> </script>
</html> </html>

28
site/_includes/css/site.css
View file

File diff suppressed because one or more lines are too long