113 lines
3.2 KiB
JavaScript
113 lines
3.2 KiB
JavaScript
(function ($) {
|
|
"use strict";
|
|
|
|
// PRE LOADER
|
|
$(window).load(function () {
|
|
$(".preloader").fadeOut(1000); // set duration in brackets
|
|
});
|
|
|
|
// CUSTOM LINK
|
|
$(".custom-link").click(function () {
|
|
var el = $(this).attr("href");
|
|
var elWrapped = $(el);
|
|
var header_height = $(".navbar").height() + 10;
|
|
|
|
scrollToDiv(elWrapped, header_height);
|
|
return false;
|
|
|
|
function scrollToDiv(element, navheight) {
|
|
var offset = element.offset();
|
|
var offsetTop = offset.top;
|
|
var totalScroll = offsetTop - navheight;
|
|
|
|
$("body,html").animate(
|
|
{
|
|
scrollTop: totalScroll,
|
|
},
|
|
300
|
|
);
|
|
}
|
|
});
|
|
|
|
// Add navbar scroll effect
|
|
window.addEventListener('scroll', function() {
|
|
const navbar = document.querySelector('.navbar');
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
|
|
// Add animation on scroll
|
|
const animateOnScroll = function() {
|
|
const elements = document.querySelectorAll('.projects-thumb, .services-thumb, .contact-info');
|
|
|
|
elements.forEach(element => {
|
|
const elementPosition = element.getBoundingClientRect().top;
|
|
const screenPosition = window.innerHeight;
|
|
|
|
if(elementPosition < screenPosition) {
|
|
element.style.opacity = '1';
|
|
element.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
}
|
|
|
|
window.addEventListener('scroll', animateOnScroll);
|
|
window.addEventListener('load', animateOnScroll);
|
|
|
|
// Add smooth scroll for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add lightbox functionality
|
|
const lightbox = document.querySelector('.lightbox');
|
|
const lightboxImage = document.querySelector('.lightbox-image');
|
|
const lightboxClose = document.querySelector('.lightbox-close');
|
|
const projectImages = document.querySelectorAll('.popup-image');
|
|
|
|
projectImages.forEach(image => {
|
|
image.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const imgSrc = image.getAttribute('href');
|
|
const imgAlt = image.querySelector('img').getAttribute('alt');
|
|
|
|
lightboxImage.setAttribute('src', imgSrc);
|
|
lightboxImage.setAttribute('alt', imgAlt);
|
|
lightbox.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
});
|
|
});
|
|
|
|
lightboxClose.addEventListener('click', () => {
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
});
|
|
|
|
lightbox.addEventListener('click', (e) => {
|
|
if (e.target === lightbox) {
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
|
|
// Close lightbox with Escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
|
|
lightbox.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
});
|
|
})(window.jQuery);
|