chore: cleaned up files
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
800b2864a6
commit
79708b08b8
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
Solomons\ Website.pdf
|
||||
|
||||
demos/
|
||||
10421
Solomons Website.pdf
10421
Solomons Website.pdf
File diff suppressed because it is too large
Load Diff
@ -1,72 +0,0 @@
|
||||
// Version 1: More random and chaotic
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [12, 6];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
div.dataset.index = i;
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
// Chaotic burst outward with per-element randomness
|
||||
.add('.part', {
|
||||
translateX: (el) => anime.utils.random(-15, 15),
|
||||
translateY: (el) => anime.utils.random(-15, 15),
|
||||
rotate: (el) => anime.utils.random(-180, 180),
|
||||
scale: (el) => anime.utils.random(0.3, 0.8),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(30, { grid: grid, from: 'center' })
|
||||
}, 0)
|
||||
// Floating upward with wave effect
|
||||
.add('.part', {
|
||||
translateY: (el, i) => -anime.utils.random(2, 8),
|
||||
rotate: (el) => anime.utils.random(-45, 45),
|
||||
duration: 1200,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 20 + anime.utils.random(-100, 100)
|
||||
}, '-=400')
|
||||
// Scattered tumble
|
||||
.add('.part', {
|
||||
translateX: (el) => anime.utils.random(-20, 20),
|
||||
translateY: (el) => anime.utils.random(-20, 20),
|
||||
rotate: (el) => anime.utils.random(-360, 360),
|
||||
scale: (el) => anime.utils.random(0.5, 1.2),
|
||||
duration: 1000,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: anime.stagger(40, { grid: grid, from: 'random' })
|
||||
})
|
||||
// Converge back with randomized paths
|
||||
.add('.part', {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
rotate: (el) => anime.utils.random(0, 360),
|
||||
scale: 1,
|
||||
duration: 1200,
|
||||
easing: 'easeOutElastic',
|
||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
||||
})
|
||||
// Gentle pulse
|
||||
.add('.part', {
|
||||
scale: (el) => anime.utils.random(0.9, 1.1),
|
||||
opacity: (el) => anime.utils.random(0.5, 1),
|
||||
duration: 600,
|
||||
easing: 'easeInOutSine',
|
||||
delay: anime.stagger(30)
|
||||
}, '-=200');
|
||||
|
||||
staggersAnimation.play();
|
||||
@ -1,72 +0,0 @@
|
||||
// Version 2: Fluid and organic with floating effect
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [12, 6];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
div.dataset.index = i;
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
// Initial expansion with gentle stagger
|
||||
.add('.part', {
|
||||
translateX: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'x' }),
|
||||
translateY: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'y' }),
|
||||
scale: anime.stagger([0.7, 1.1], { grid: grid, from: 'center' }),
|
||||
duration: 1000,
|
||||
easing: 'easeOutElastic',
|
||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
||||
}, 0)
|
||||
// Floating wave motion
|
||||
.add('.part', {
|
||||
translateY: (el, i) => anime.utils.random(-5, 5),
|
||||
rotate: (el) => anime.utils.random(-30, 30),
|
||||
opacity: [(el) => anime.utils.random(0.6, 0.8), 1],
|
||||
duration: 2000,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 30 + anime.utils.random(0, 300)
|
||||
}, '-=500')
|
||||
// Gentle compression and expansion
|
||||
.add('.part', {
|
||||
scaleX: (el) => anime.utils.random(0.9, 1.05),
|
||||
scaleY: (el) => anime.utils.random(0.9, 1.05),
|
||||
duration: 1200,
|
||||
easing: 'easeInOutSine',
|
||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
||||
}, '-=1000')
|
||||
// Slow drift
|
||||
.add('.part', {
|
||||
translateX: (el) => anime.utils.random(-3, 3),
|
||||
translateY: (el) => anime.utils.random(-3, 3),
|
||||
rotate: (el, i) => i % 2 === 0 ? 8 : -8,
|
||||
duration: 1500,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: (el, i) => i * 25
|
||||
})
|
||||
// Return to rest gently
|
||||
.add('.part', {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 1500,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: anime.stagger(35, { grid: grid, from: 'center' })
|
||||
});
|
||||
|
||||
staggersAnimation.play();
|
||||
@ -1,72 +0,0 @@
|
||||
// Version 3: Balanced - chaotic bursts with organic flow
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [12, 6];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
div.dataset.index = i;
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
// Burst outward
|
||||
.add('.part', {
|
||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
||||
scale: 0.5,
|
||||
duration: 300,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
||||
}, 0)
|
||||
// Spring outward further with randomness
|
||||
.add('.part', {
|
||||
translateX: (el, i) => anime.utils.random(-8, 8),
|
||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
||||
scale: (el) => anime.utils.random(0.7, 1.2),
|
||||
rotate: (el) => anime.utils.random(-90, 90),
|
||||
duration: 600,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(100, { grid: grid, from: 'center' })
|
||||
})
|
||||
// Floating phase - organic motion
|
||||
.add('.part', {
|
||||
translateY: (el, i) => anime.utils.random(-4, 4),
|
||||
rotate: (el, i) => anime.utils.random(-45, 45),
|
||||
duration: 1400,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 25 + anime.utils.random(-150, 150)
|
||||
})
|
||||
// Swirl inward
|
||||
.add('.part', {
|
||||
translateX: (el, i) => anime.utils.random(-10, 10),
|
||||
translateY: (el, i) => anime.utils.random(-10, 10),
|
||||
rotate: (el) => anime.utils.random(-180, 180),
|
||||
duration: 800,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
||||
})
|
||||
// Converge smoothly
|
||||
.add('.part', {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
rotate: (el) => anime.utils.random(0, 360),
|
||||
scale: 1,
|
||||
duration: 1000,
|
||||
easing: 'easeOutExpo',
|
||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
||||
});
|
||||
|
||||
staggersAnimation.play();
|
||||
@ -1,125 +0,0 @@
|
||||
// Version 4: Extended Loop with Smooth Transitions
|
||||
// Creates a much longer animation cycle that loops smoothly without harsh resets
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [12, 6];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
div.dataset.index = i;
|
||||
fragment.appendChild(div);
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
// Extended animation cycle - 20 seconds total, much longer so loop is less jarring
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
// Initial expansion phase
|
||||
.add('.part', {
|
||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
||||
scale: 0.5,
|
||||
duration: 300,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
||||
}, 0)
|
||||
|
||||
// Chaotic burst phase
|
||||
.add('.part', {
|
||||
translateX: (el, i) => anime.utils.random(-10, 10),
|
||||
translateY: (el, i) => anime.utils.random(-10, 10),
|
||||
scale: (el) => anime.utils.random(0.7, 1.3),
|
||||
rotate: (el) => anime.utils.random(-120, 120),
|
||||
duration: 800,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(80, { grid: grid, from: 'center' })
|
||||
})
|
||||
|
||||
// Floating drift phase 1
|
||||
.add('.part', {
|
||||
translateY: (el, i) => anime.utils.random(-6, 6),
|
||||
rotate: (el) => anime.utils.random(-60, 60),
|
||||
duration: 2000,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 20 + anime.utils.random(-200, 200)
|
||||
})
|
||||
|
||||
// Gentle swirl inward
|
||||
.add('.part', {
|
||||
translateX: (el, i) => anime.utils.random(-5, 5),
|
||||
translateY: (el, i) => anime.utils.random(-5, 5),
|
||||
rotate: (el) => anime.utils.random(-45, 45),
|
||||
duration: 1500,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
||||
})
|
||||
|
||||
// Floating drift phase 2 - different direction
|
||||
.add('.part', {
|
||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
||||
rotate: (el) => anime.utils.random(-30, 30),
|
||||
duration: 2200,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 22 + anime.utils.random(-150, 150)
|
||||
})
|
||||
|
||||
// Slow convergence
|
||||
.add('.part', {
|
||||
translateX: (el) => anime.utils.random(-2, 2),
|
||||
translateY: (el) => anime.utils.random(-2, 2),
|
||||
rotate: (el) => anime.utils.random(-15, 15),
|
||||
duration: 1800,
|
||||
easing: 'easeInOutQuad',
|
||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
||||
})
|
||||
|
||||
// Gentle return to center with subtle movement
|
||||
.add('.part', {
|
||||
translateX: (el) => {
|
||||
const index = parseInt(el.dataset.index);
|
||||
return anime.utils.random(-1, 1);
|
||||
},
|
||||
translateY: (el) => {
|
||||
const index = parseInt(el.dataset.index);
|
||||
return anime.utils.random(-1, 1);
|
||||
},
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 2500,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(50, { grid: grid, from: 'center' })
|
||||
})
|
||||
|
||||
// Long rest phase with breathing effect
|
||||
.add('.part', {
|
||||
scale: (el) => anime.utils.random(0.95, 1.05),
|
||||
opacity: (el) => anime.utils.random(0.8, 1),
|
||||
duration: 3000,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 15
|
||||
})
|
||||
|
||||
// Return to perfect rest
|
||||
.add('.part', {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
rotate: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
duration: 1500,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
||||
});
|
||||
|
||||
staggersAnimation.play();
|
||||
@ -1,136 +0,0 @@
|
||||
// Version 4: Gaussian Noise Overlay - Perpetual organic motion
|
||||
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
|
||||
const fragment = document.createDocumentFragment();
|
||||
const grid = [12, 6];
|
||||
const col = grid[0];
|
||||
const row = grid[1];
|
||||
const numberOfElements = col * row;
|
||||
|
||||
// Store element data for continuous noise animation
|
||||
const elementData = [];
|
||||
|
||||
for (let i = 0; i < numberOfElements; i++) {
|
||||
let div = document.createElement('div');
|
||||
div.className = 'part';
|
||||
div.dataset.index = i;
|
||||
fragment.appendChild(div);
|
||||
|
||||
// Store random animation parameters for each element
|
||||
elementData.push({
|
||||
element: div,
|
||||
index: i,
|
||||
// Random frequencies for sine wave oscillations
|
||||
freqX: anime.utils.random(0.0008, 0.0012),
|
||||
freqY: anime.utils.random(0.0006, 0.0010),
|
||||
freqRot: anime.utils.random(0.0004, 0.0009),
|
||||
freqOpacity: anime.utils.random(0.0005, 0.0008),
|
||||
// Random amplitudes for movement
|
||||
ampX: anime.utils.random(3, 8),
|
||||
ampY: anime.utils.random(3, 8),
|
||||
ampRot: anime.utils.random(10, 25),
|
||||
// Phase offsets so they don't all move together
|
||||
phaseX: anime.utils.random(0, Math.PI * 2),
|
||||
phaseY: anime.utils.random(0, Math.PI * 2),
|
||||
phaseRot: anime.utils.random(0, Math.PI * 2),
|
||||
phaseOpacity: anime.utils.random(0, Math.PI * 2),
|
||||
});
|
||||
}
|
||||
|
||||
staggerVisualizerEl.appendChild(fragment);
|
||||
|
||||
// Initial burst animation
|
||||
const staggersAnimation = anime.createTimeline({
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
autoplay: false
|
||||
});
|
||||
|
||||
staggersAnimation
|
||||
// Burst outward
|
||||
.add('.part', {
|
||||
translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
|
||||
translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
|
||||
scale: 0.5,
|
||||
duration: 300,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(60, { grid: grid, from: 'center' })
|
||||
}, 0)
|
||||
// Spring outward further with randomness
|
||||
.add('.part', {
|
||||
translateX: (el, i) => anime.utils.random(-8, 8),
|
||||
translateY: (el, i) => anime.utils.random(-8, 8),
|
||||
scale: (el) => anime.utils.random(0.7, 1.2),
|
||||
rotate: (el) => anime.utils.random(-90, 90),
|
||||
duration: 600,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(100, { grid: grid, from: 'center' })
|
||||
})
|
||||
// Floating phase - long duration
|
||||
.add('.part', {
|
||||
translateY: (el, i) => anime.utils.random(-4, 4),
|
||||
rotate: (el, i) => anime.utils.random(-45, 45),
|
||||
duration: 4000,
|
||||
easing: 'easeInOutSine',
|
||||
delay: (el, i) => i * 25 + anime.utils.random(-150, 150)
|
||||
})
|
||||
// Gentle convergence
|
||||
.add('.part', {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
rotate: (el) => anime.utils.random(0, 360),
|
||||
scale: 1,
|
||||
duration: 2000,
|
||||
easing: 'easeOutQuad',
|
||||
delay: anime.stagger(40, { grid: grid, from: 'center' })
|
||||
})
|
||||
// Rest phase
|
||||
.add('.part', {
|
||||
opacity: 1,
|
||||
duration: 6000,
|
||||
delay: 0
|
||||
}, '-=1000');
|
||||
|
||||
staggersAnimation.play();
|
||||
|
||||
// Continuous Gaussian noise animation - using requestAnimationFrame
|
||||
let startTime = Date.now();
|
||||
|
||||
const applyNoise = () => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
|
||||
elementData.forEach((data) => {
|
||||
// Multi-layered sine waves create Gaussian-like noise
|
||||
const noiseX = Math.sin(elapsed * data.freqX + data.phaseX) * data.ampX +
|
||||
Math.sin(elapsed * data.freqX * 0.3 + data.phaseX) * data.ampX * 0.3;
|
||||
|
||||
const noiseY = Math.sin(elapsed * data.freqY + data.phaseY) * data.ampY +
|
||||
Math.sin(elapsed * data.freqY * 0.4 + data.phaseY) * data.ampY * 0.4;
|
||||
|
||||
const noiseRot = Math.sin(elapsed * data.freqRot + data.phaseRot) * data.ampRot +
|
||||
Math.sin(elapsed * data.freqRot * 0.5 + data.phaseRot) * data.ampRot * 0.2;
|
||||
|
||||
// Smooth opacity breathing
|
||||
const opacityVariation = Math.sin(elapsed * data.freqOpacity + data.phaseOpacity) * 0.12 + 0.88;
|
||||
|
||||
// Apply noise to element
|
||||
data.element.style.filter = `opacity(${opacityVariation})`;
|
||||
|
||||
// Get current computed transform and add noise
|
||||
// This is applied on top of anime's transforms
|
||||
const currentTransform = window.getComputedStyle(data.element).transform;
|
||||
const matrix = currentTransform.match(/matrix.*\((.+)\)/)[1].split(', ');
|
||||
const currentX = parseFloat(matrix[4]) || 0;
|
||||
const currentY = parseFloat(matrix[5]) || 0;
|
||||
|
||||
data.element.style.setProperty('--noise-x', `${noiseX}px`);
|
||||
data.element.style.setProperty('--noise-y', `${noiseY}px`);
|
||||
data.element.style.setProperty('--noise-rot', `${noiseRot}deg`);
|
||||
});
|
||||
|
||||
requestAnimationFrame(applyNoise);
|
||||
};
|
||||
|
||||
// Start noise animation after a brief delay to let anime init
|
||||
setTimeout(() => {
|
||||
applyNoise();
|
||||
}, 100);
|
||||
Loading…
Reference in New Issue
Block a user