57 lines
2.3 KiB
JavaScript
57 lines
2.3 KiB
JavaScript
// Gentle animations on scroll for job cards
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const jobCards = document.querySelectorAll('.job-card');
|
|
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.animation = 'fadeInUp 0.5s ease-out forwards';
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
jobCards.forEach(card => {
|
|
card.style.opacity = '0'; // Start transparent
|
|
observer.observe(card);
|
|
});
|
|
});
|
|
|
|
// Add keyframes for the animation
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Toggle for the job search form
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const searchToggleBtn = document.getElementById('search-toggle-btn');
|
|
const jobSearchForm = document.getElementById('job-search-form');
|
|
|
|
if (searchToggleBtn && jobSearchForm) {
|
|
searchToggleBtn.addEventListener('click', function () {
|
|
jobSearchForm.classList.toggle('d-none');
|
|
// Optional: Change button text/icon
|
|
const isHidden = jobSearchForm.classList.contains('d-none');
|
|
if (isHidden) {
|
|
searchToggleBtn.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
|
|
Search Job Listings`;
|
|
} else {
|
|
searchToggleBtn.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
Close Search`;
|
|
}
|
|
});
|
|
}
|
|
}); |