```html
document.addEventListener('DOMContentLoaded', function() {
// CREATE THE CUSTOM CURSOR
const cursor = document.createElement('div');
cursor.id = 'custom-cursor';
document.body.appendChild(cursor);
// MAKE CURSOR FOLLOW MOUSE
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// MAKE CURSOR GROW ON HOVER
const clickableThings = 'a, button, .portfolio-item, .gallery-grid-item, [data-animation-role="image"]';
document.addEventListener('mouseover', (e) => {
if (e.target.closest(clickableThings)) {
cursor.classList.add('hover');
}
});
document.addEventListener('mouseout', (e) => {
if (e.target.closest(clickableThings)) {
cursor.classList.remove('hover');
}
});
// SCROLL ANIMATIONS FOR PORTFOLIO
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 100);
}
});
}, {
threshold: 0.2,
rootMargin: '0px 0px -100px 0px'
});
// FIND ALL PORTFOLIO ITEMS
const portfolioItems = document.querySelectorAll('.gallery-grid-item, .portfolio-item, .grid-item');
portfolioItems.forEach(item => {
// Start invisible and below
item.style.opacity = '0';
item.style.transform = 'translateY(50px)';
item.style.transition = 'all 0.6s ease';
// Watch for scrolling
observer.observe(item);
});
});
