The glossary.js file is used to manage the visual “spotlight effect” experience on the glossary entries found in the glossary.html partial layout.
How it Works #
This functionality is nearly identical to the
js/tiles.js functionality – with the exception of the utilized class name, glossary-entry. This is so that you can more easily customize each experience on your own if you wish.
If the page has elements with the glossary-entry class, this script updates their background radial gradient values to mirror the position of the mouse.
The color of the spotlight effect is determined by css/colors.css, specifically:
- inside:
var(--primary-gradient-color) - outside:
var(--secondary-gradient-color)
Source Code #
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.glossary-entry');
const positions = { x: 50, y: 50 }; // Default to center
function animate() {
cards.forEach(card => {
const rect = card.getBoundingClientRect();
const mouseX = (positions.x - rect.left) / rect.width * 100;
const mouseY = (positions.y - rect.top) / rect.height * 100;
card.style.background = `radial-gradient(circle at ${mouseX}% ${mouseY}%, var(--primary-gradient-color), var(--secondary-gradient-color))`;
});
requestAnimationFrame(animate);
}
cards.forEach(card => {
card.addEventListener('mousemove', (e) => {
// Update gradient position
positions.x = e.clientX;
positions.y = e.clientY;
});
card.addEventListener('mouseover', () => {
card.style.transform = 'translateY(-10px) scale(1.05)';
card.style.boxShadow = '0 20px 30px #00000033';
});
card.addEventListener('mouseout', () => {
card.style.transform = 'translateY(0) scale(1.0)';
card.style.boxShadow = '';
});
});
animate();
});