88 lines
3.6 KiB
JavaScript
88 lines
3.6 KiB
JavaScript
// Network Animation Effect
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check if we're on the mindmap page
|
|
const mindmapContainer = document.getElementById('mindmap-container');
|
|
if (!mindmapContainer) return;
|
|
|
|
// Add enhanced animations for links and nodes
|
|
setTimeout(function() {
|
|
// Get all SVG links (connections between nodes)
|
|
const links = document.querySelectorAll('.link');
|
|
const nodes = document.querySelectorAll('.node');
|
|
|
|
// Add animation to links
|
|
links.forEach(link => {
|
|
// Create random animation duration between 15 and 30 seconds
|
|
const duration = 15 + Math.random() * 15;
|
|
link.style.animation = `dash ${duration}s linear infinite`;
|
|
link.style.strokeDasharray = '5, 5';
|
|
|
|
// Add pulse effect on hover
|
|
link.addEventListener('mouseover', function() {
|
|
this.classList.add('highlighted');
|
|
this.style.animation = 'dash 5s linear infinite';
|
|
});
|
|
|
|
link.addEventListener('mouseout', function() {
|
|
this.classList.remove('highlighted');
|
|
this.style.animation = `dash ${duration}s linear infinite`;
|
|
});
|
|
});
|
|
|
|
// Add effects to nodes
|
|
nodes.forEach(node => {
|
|
node.addEventListener('mouseover', function() {
|
|
this.querySelector('circle').style.filter = 'drop-shadow(0 0 15px rgba(179, 143, 255, 0.8))';
|
|
|
|
// Highlight connected links
|
|
const nodeId = this.getAttribute('data-id') || this.id;
|
|
links.forEach(link => {
|
|
const source = link.getAttribute('data-source');
|
|
const target = link.getAttribute('data-target');
|
|
|
|
if (source === nodeId || target === nodeId) {
|
|
link.classList.add('highlighted');
|
|
link.style.animation = 'dash 5s linear infinite';
|
|
}
|
|
});
|
|
});
|
|
|
|
node.addEventListener('mouseout', function() {
|
|
this.querySelector('circle').style.filter = 'drop-shadow(0 0 8px rgba(179, 143, 255, 0.5))';
|
|
|
|
// Remove highlight from connected links
|
|
const nodeId = this.getAttribute('data-id') || this.id;
|
|
links.forEach(link => {
|
|
const source = link.getAttribute('data-source');
|
|
const target = link.getAttribute('data-target');
|
|
|
|
if (source === nodeId || target === nodeId) {
|
|
link.classList.remove('highlighted');
|
|
const duration = 15 + Math.random() * 15;
|
|
link.style.animation = `dash ${duration}s linear infinite`;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}, 1000); // Wait for the mindmap to be fully loaded
|
|
|
|
// Add network background effect
|
|
const networkBackground = document.createElement('div');
|
|
networkBackground.className = 'network-background';
|
|
networkBackground.style.cssText = `
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(179, 143, 255, 0.05);
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0.15;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
animation: pulse 10s ease-in-out infinite alternate;
|
|
`;
|
|
|
|
mindmapContainer.appendChild(networkBackground);
|
|
});
|