Complete website optimization: Color scheme standardization and hero page enhancement
- STANDARDIZED COLOR SCHEMES: Unified all service pages to use consistent purple theme (#6d28d9) - Removed theme-specific body classes from automation-flows.html and agentic-ai.html - Removed inline CSS color overrides from machine-learning.html, generative-ai.html, and data-analysis.html - Updated 15+ instances of hardcoded border colors to use rgba(var(--primary-color-rgb), 0.3) - Updated 5+ hover effects to use rgba(var(--primary-color-rgb), 0.4) for consistent glow colors - All service pages now maintain visual consistency with the main website - ENHANCED HERO PAGE: Improved data node scattering for better organic distribution - Repositioned core service nodes (ML, AI, Analytics, Automation) for natural scatter pattern - Enhanced industry nodes positioning with organic right-side distribution - Improved strategic nodes placement across right quadrant for better visual balance - Added varied animation delays and floating patterns for different node groups - Implemented micro-positioning adjustments for more natural appearance - Created size variations and rotation effects for enhanced organic feel - NEW FEATURES ADDED: - Enhanced CSS animations with varied floating patterns - Improved node interaction effects with staggered hover animations - Better responsive design for mobile devices - New documentation files for color standardization completion - TECHNICAL IMPROVEMENTS: - Updated hero-animation.css with enhanced organic scatter positioning - Maintained all existing functionality while improving visual aesthetics - Ensured cross-browser compatibility and mobile responsiveness
This commit is contained in:
289
js/page-specific.js
Normal file
289
js/page-specific.js
Normal file
@@ -0,0 +1,289 @@
|
||||
/**
|
||||
* Page-specific animations and effects for Gyannetra Website
|
||||
* Handles unique interactions for different sections and pages
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Detect current page
|
||||
const currentPath = window.location.pathname;
|
||||
const pageName = currentPath.split('/').pop() || 'index.html';
|
||||
|
||||
// Initialize common elements
|
||||
initCommonElements();
|
||||
|
||||
// Initialize page-specific effects
|
||||
switch (pageName) {
|
||||
case 'index.html':
|
||||
initHomePage();
|
||||
break;
|
||||
case 'about.html':
|
||||
initAboutPage();
|
||||
break;
|
||||
case 'contact.html':
|
||||
initContactPage();
|
||||
break;
|
||||
default:
|
||||
// Check if it's a service page
|
||||
if (currentPath.includes('/Services/')) {
|
||||
initServicePage();
|
||||
}
|
||||
// Check if it's an industry page
|
||||
else if (currentPath.includes('/Industries/')) {
|
||||
initIndustryPage();
|
||||
}
|
||||
// Check if it's an education page
|
||||
else if (currentPath.includes('/Education/')) {
|
||||
initEducationPage();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize elements common to all pages
|
||||
function initCommonElements() {
|
||||
// Initialize header scroll effect
|
||||
initHeaderScroll();
|
||||
|
||||
// Initialize footer animations
|
||||
initFooterAnimations();
|
||||
|
||||
// Initialize section entrance animations
|
||||
initSectionAnimations();
|
||||
}
|
||||
|
||||
// Header animation on scroll
|
||||
function initHeaderScroll() {
|
||||
const header = document.querySelector('.site-header');
|
||||
if (!header) return;
|
||||
|
||||
let lastScrollY = 0;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
// Add shadow and background when scrolling down
|
||||
if (scrollY > 20) {
|
||||
header.classList.add('header-scrolled');
|
||||
} else {
|
||||
header.classList.remove('header-scrolled');
|
||||
}
|
||||
|
||||
// Hide header when scrolling down quickly, show when scrolling up
|
||||
if (scrollY > lastScrollY + 50) {
|
||||
header.classList.add('header-hidden');
|
||||
} else if (scrollY < lastScrollY - 10) {
|
||||
header.classList.remove('header-hidden');
|
||||
}
|
||||
|
||||
lastScrollY = scrollY;
|
||||
});
|
||||
}
|
||||
|
||||
// Homepage specific animations
|
||||
function initHomePage() {
|
||||
// Initialize expertise item animations
|
||||
initExpertiseItems();
|
||||
|
||||
// Initialize tech section parallax
|
||||
initTechParallax();
|
||||
}
|
||||
|
||||
// Expertise items hover and click effects
|
||||
function initExpertiseItems() {
|
||||
const expItems = document.querySelectorAll('.exp-item');
|
||||
|
||||
expItems.forEach(item => {
|
||||
// Add hover effect
|
||||
item.addEventListener('mouseenter', function() {
|
||||
this.classList.add('exp-hover');
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
this.classList.remove('exp-hover');
|
||||
});
|
||||
|
||||
// Add click animation
|
||||
item.addEventListener('click', function() {
|
||||
this.classList.add('exp-click');
|
||||
|
||||
setTimeout(() => {
|
||||
this.classList.remove('exp-click');
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
|
||||
// Add staggered entrance animation
|
||||
expItems.forEach((item, index) => {
|
||||
// Set staggered animation delay
|
||||
item.style.animationDelay = `${index * 0.15}s`;
|
||||
|
||||
// Add animation class
|
||||
item.classList.add('animate-entrance');
|
||||
});
|
||||
}
|
||||
|
||||
// Tech section parallax effect
|
||||
function initTechParallax() {
|
||||
const techSection = document.getElementById('technologies');
|
||||
if (!techSection) return;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
// Get section position
|
||||
const rect = techSection.getBoundingClientRect();
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Check if section is in viewport
|
||||
if (rect.top < viewportHeight && rect.bottom > 0) {
|
||||
// Calculate percentage scrolled through the section
|
||||
const scrollPercentage = 1 - Math.max(0, Math.min(1, rect.bottom / (rect.height + viewportHeight)));
|
||||
|
||||
// Apply parallax effect to tech icons
|
||||
const techItems = document.querySelectorAll('.tech-icon-container');
|
||||
techItems.forEach((item, index) => {
|
||||
const offsetFactor = (index % 3 - 1) * 20; // Different offset for each item
|
||||
const translateY = scrollPercentage * offsetFactor;
|
||||
item.style.transform = `translateY(${translateY}px)`;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// About page specific animations
|
||||
function initAboutPage() {
|
||||
// Team member hover effects
|
||||
const teamMembers = document.querySelectorAll('.team-member');
|
||||
if (teamMembers.length > 0) {
|
||||
teamMembers.forEach(member => {
|
||||
member.addEventListener('mouseenter', function() {
|
||||
this.classList.add('member-hover');
|
||||
});
|
||||
|
||||
member.addEventListener('mouseleave', function() {
|
||||
this.classList.remove('member-hover');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Contact page specific animations
|
||||
function initContactPage() {
|
||||
// Form input effects
|
||||
const formInputs = document.querySelectorAll('input, textarea');
|
||||
if (formInputs.length > 0) {
|
||||
formInputs.forEach(input => {
|
||||
// Add focus effect
|
||||
input.addEventListener('focus', function() {
|
||||
this.parentElement.classList.add('input-focused');
|
||||
});
|
||||
|
||||
input.addEventListener('blur', function() {
|
||||
if (!this.value) {
|
||||
this.parentElement.classList.remove('input-focused');
|
||||
}
|
||||
});
|
||||
|
||||
// Check for pre-filled inputs
|
||||
if (input.value) {
|
||||
input.parentElement.classList.add('input-focused');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Service page specific animations
|
||||
function initServicePage() {
|
||||
// Service cards animation
|
||||
const serviceCards = document.querySelectorAll('.service-card');
|
||||
if (serviceCards.length > 0) {
|
||||
serviceCards.forEach((card, index) => {
|
||||
// Add staggered animation
|
||||
card.style.animationDelay = `${index * 0.15}s`;
|
||||
card.classList.add('animate-slide-up');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Industry page specific animations
|
||||
function initIndustryPage() {
|
||||
// Case study hover effects
|
||||
const caseStudies = document.querySelectorAll('.case-study');
|
||||
if (caseStudies.length > 0) {
|
||||
caseStudies.forEach(study => {
|
||||
study.addEventListener('mouseenter', function() {
|
||||
this.classList.add('case-hover');
|
||||
});
|
||||
|
||||
study.addEventListener('mouseleave', function() {
|
||||
this.classList.remove('case-hover');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Education page specific animations
|
||||
function initEducationPage() {
|
||||
// Course card effects
|
||||
const courseCards = document.querySelectorAll('.course-card');
|
||||
if (courseCards.length > 0) {
|
||||
courseCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
this.classList.toggle('card-expanded');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Section entrance animations
|
||||
function initSectionAnimations() {
|
||||
const sections = document.querySelectorAll('section');
|
||||
|
||||
// Create intersection observer
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('section-visible');
|
||||
|
||||
// Animate children with delay
|
||||
const children = entry.target.querySelectorAll('.animate-on-visible');
|
||||
children.forEach((child, index) => {
|
||||
child.style.animationDelay = `${index * 0.1}s`;
|
||||
child.classList.add('element-visible');
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -10% 0px'
|
||||
});
|
||||
|
||||
// Observe all sections
|
||||
sections.forEach(section => {
|
||||
observer.observe(section);
|
||||
section.classList.add('section-hidden');
|
||||
});
|
||||
}
|
||||
|
||||
// Footer animations
|
||||
function initFooterAnimations() {
|
||||
const footer = document.querySelector('.site-footer');
|
||||
if (!footer) return;
|
||||
|
||||
// Create intersection observer for footer
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
footer.classList.add('footer-visible');
|
||||
|
||||
// Staggered animation for footer columns
|
||||
const columns = footer.querySelectorAll('.footer-col');
|
||||
columns.forEach((col, index) => {
|
||||
col.style.animationDelay = `${index * 0.15}s`;
|
||||
col.classList.add('col-visible');
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.2
|
||||
});
|
||||
|
||||
observer.observe(footer);
|
||||
}
|
||||
Reference in New Issue
Block a user