Update corporate training workflow and animation improvements
- Replace 'Innovate with us' with 'Assessment of current skillset' in corporate training workflow - Adjust tech cards animation speed (5s to 8s duration) - Reduce testimonials section spacing and container height - Add hover pause functionality for tech and testimonial marquees - Various layout and animation optimizations
This commit is contained in:
@@ -73,8 +73,8 @@ function initScrollEffects() {
|
||||
|
||||
// Animate elements when they enter viewport
|
||||
function initScrollAnimations() {
|
||||
// Exclude hero content from scroll animations to prevent layout shifts
|
||||
const animatedElements = document.querySelectorAll('.exp-item, .section-heading, .btn-primary:not(#hero .btn-primary)');
|
||||
// Exclude hero content and all purple buttons from scroll animations to prevent layout shifts
|
||||
const animatedElements = document.querySelectorAll('.exp-item, .section-heading');
|
||||
|
||||
// Ensure hero content is always visible and stable
|
||||
const heroContent = document.querySelector('#hero .hero-content');
|
||||
|
||||
@@ -1,23 +1,45 @@
|
||||
// Tech Cards Animation Enhancement
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Tech marquee script loaded');
|
||||
|
||||
const techCardsContainer = document.querySelector('.tech-cards-container');
|
||||
const techCardsTrack = document.querySelector('.tech-cards-track');
|
||||
const techCards = document.querySelectorAll('.tech-card');
|
||||
|
||||
// No animation delay or dancing effects
|
||||
techCards.forEach((card) => {
|
||||
// Just add basic hover interaction
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = '';
|
||||
});
|
||||
});
|
||||
// Add 3D tilt effect on mouse move for each tech card
|
||||
techCards.forEach(card => {
|
||||
console.log('Tech cards found:', techCards.length);
|
||||
console.log('Tech track found:', techCardsTrack);
|
||||
|
||||
// Add comprehensive hover functionality for individual tech cards
|
||||
techCards.forEach((card, index) => {
|
||||
console.log(`Setting up card ${index}`);
|
||||
const iconWrapper = card.querySelector('.tech-icon-wrapper');
|
||||
// Mouse enter - pause animation and lift card
|
||||
card.addEventListener('mouseenter', function(e) {
|
||||
console.log('Tech card hover detected');
|
||||
e.stopPropagation(); // Prevent event bubbling
|
||||
this.style.transform = 'translateY(-10px)';
|
||||
if (techCardsTrack) {
|
||||
techCardsTrack.classList.add('paused');
|
||||
console.log('Tech animation paused via CSS class');
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse leave - resume animation and reset card
|
||||
card.addEventListener('mouseleave', function(e) {
|
||||
console.log('Tech card hover ended');
|
||||
e.stopPropagation(); // Prevent event bubbling
|
||||
this.style.transform = '';
|
||||
if (techCardsTrack) {
|
||||
techCardsTrack.classList.remove('paused');
|
||||
console.log('Tech animation resumed via CSS class');
|
||||
}
|
||||
// Reset icon wrapper transform when leaving
|
||||
if (iconWrapper) {
|
||||
iconWrapper.style.transform = '';
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse move - 3D tilt effect (only if icon wrapper exists)
|
||||
if (iconWrapper) {
|
||||
card.addEventListener('mousemove', function(e) {
|
||||
const rect = iconWrapper.getBoundingClientRect();
|
||||
@@ -32,38 +54,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
iconWrapper.style.transform = `perspective(500px) rotateX(${tiltY}deg) rotateY(${-tiltX}deg) scale3d(1.1, 1.1, 1.1)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
iconWrapper.style.transform = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add a parallax effect to create depth in the tech cards container
|
||||
window.addEventListener('mousemove', function(e) {
|
||||
if (techCardsContainer) {
|
||||
const depth = 20;
|
||||
const moveX = (e.clientX - window.innerWidth / 2) / depth;
|
||||
const moveY = (e.clientY - window.innerHeight / 2) / depth;
|
||||
|
||||
// Limit the movement for a subtler effect
|
||||
const maxMove = 5;
|
||||
const limitedMoveX = Math.max(-maxMove, Math.min(maxMove, moveX));
|
||||
const limitedMoveY = Math.max(-maxMove, Math.min(maxMove, moveY));
|
||||
|
||||
techCardsContainer.style.transform = `translate(${limitedMoveX}px, ${limitedMoveY}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// Add entrance animation for the tech cards container
|
||||
// Add entrance animation for the tech cards container (opacity only)
|
||||
if (techCardsContainer) {
|
||||
techCardsContainer.style.opacity = '0';
|
||||
techCardsContainer.style.transform = 'translateY(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
techCardsContainer.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
|
||||
techCardsContainer.style.transition = 'opacity 0.8s ease-out';
|
||||
techCardsContainer.style.opacity = '1';
|
||||
techCardsContainer.style.transform = 'translateY(0)';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
58
js/testimonials-marquee.js
Normal file
58
js/testimonials-marquee.js
Normal file
@@ -0,0 +1,58 @@
|
||||
// Testimonials Animation Enhancement
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('Testimonials marquee script loaded');
|
||||
|
||||
const testimonialsContainer = document.querySelector('.testimonials-track-container');
|
||||
const testimonialsTrack = document.querySelector('.testimonials-track');
|
||||
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
||||
|
||||
console.log('Testimonial cards found:', testimonialCards.length);
|
||||
console.log('Testimonials track found:', testimonialsTrack);
|
||||
|
||||
// Add hover pause functionality for individual testimonial cards
|
||||
testimonialCards.forEach((card, index) => {
|
||||
console.log(`Setting up testimonial card ${index}`);
|
||||
// Pause animation when hovering over individual cards
|
||||
card.addEventListener('mouseenter', function(e) {
|
||||
console.log('Testimonial card hover detected');
|
||||
e.stopPropagation(); // Prevent event bubbling
|
||||
if (testimonialsTrack) {
|
||||
testimonialsTrack.classList.add('paused');
|
||||
console.log('Testimonials animation paused via CSS class');
|
||||
}
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function(e) {
|
||||
console.log('Testimonial card hover ended');
|
||||
e.stopPropagation(); // Prevent event bubbling
|
||||
if (testimonialsTrack) {
|
||||
testimonialsTrack.classList.remove('paused');
|
||||
console.log('Testimonials animation resumed via CSS class');
|
||||
}
|
||||
});
|
||||
});
|
||||
// Also pause when hovering over the container
|
||||
if (testimonialsContainer) {
|
||||
testimonialsContainer.addEventListener('mouseenter', function() {
|
||||
if (testimonialsTrack) {
|
||||
testimonialsTrack.classList.add('paused');
|
||||
}
|
||||
});
|
||||
|
||||
testimonialsContainer.addEventListener('mouseleave', function() {
|
||||
if (testimonialsTrack) {
|
||||
testimonialsTrack.classList.remove('paused');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add entrance animation for the testimonials container (opacity only)
|
||||
if (testimonialsContainer) {
|
||||
testimonialsContainer.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
testimonialsContainer.style.transition = 'opacity 0.8s ease-out';
|
||||
testimonialsContainer.style.opacity = '1';
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user