inkletblot/solomonlai.ng
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better demo animation

Browse Source
This commit is contained in:
Solomon Laing 2025-04-11 16:26:02 +09:30
parent 4678bace66
commit cd878fffb8
4 changed files with 84 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
main.js → cards.js
View File

72
demo.js Normal file
View File

@ -0,0 +1,72 @@
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
const fragment = document.createDocumentFragment();
const grid = [17, 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';
fragment.appendChild(div);
}
staggerVisualizerEl.appendChild(fragment);
const staggersAnimation = anime.createTimeline({
easing: 'easeInOutSine',
delay: anime.stagger(50),
loop: true,
autoplay: false
});
staggersAnimation
.add('.part', {
x: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'x' }),
y: anime.stagger('-.1rem', { grid: grid, from: 'center', axis: 'y' }),
duration: 200,
scale: .5,
esae: 'outQuad',
delay: anime.stagger(200, { grid: grid, from: 'center' })
})
.add('.part', {
x: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'x' }),
y: anime.stagger('.2rem', { grid: grid, from: 'center', axis: 'y' }),
duration: 300,
ease: anime.createSpring(),
delay: anime.stagger(250, { grid: grid, from: 'center' })
})
.add('.part', {
translateX: () => anime.utils.random(-8, 8),
translateY: () => anime.utils.random(-1, 1, 2),
delay: anime.stagger(50, { from: 'last' })
})
.add('.part', {
translateX: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'x' }),
translateY: anime.stagger('.25rem', { grid: grid, from: 'center', axis: 'y' }),
rotate: 0,
scaleX: 2.5,
scaleY: .25,
delay: anime.stagger(100, { from: 'center' })
})
.add('.part', {
rotate: anime.stagger([90, 0], { grid: grid, from: 'center' }),
delay: anime.stagger(200, { grid: grid, from: 'center' })
})
.add('.part', {
translateX: 0,
translateY: 0,
scale: .5,
scaleX: 1,
rotate: 180,
duration: 1000,
delay: anime.stagger(500, { grid: grid, from: 'center' })
})
.add('.part', {
scaleX: 1,
scaleY: 1,
scale: 1,
delay: anime.stagger(150, { grid: grid, from: 'center' })
});
staggersAnimation.play()

103
index.html
View File

@ -92,7 +92,7 @@
<p class="contact">@inkletblot pretty much everywhere</p>
</div>
</div>
<div class="col">
<div class="col center">
<div class="stagger-visualizer"></div>
</div>
</div>
@ -104,106 +104,9 @@
</div>
</footer>
<!-- <h2> -->
<!-- <span>H</span> -->
<!-- <span>E</span> -->
<!-- <span>L</span> -->
<!-- <span>L</span> -->
<!-- <span>O</span> -->
<!-- <span>&nbsp;</span> -->
<!-- <span>W</span> -->
<!-- <span>O</span> -->
<!-- <span>R</span> -->
<!-- <span>L</span> -->
<!-- <span>D</span> -->
<!-- </h2> -->
<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.0/lib/anime.iife.min.js"></script>
<script>
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
const fragment = document.createDocumentFragment();
const grid = [17, 17];
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';
fragment.appendChild(div);
}
staggerVisualizerEl.appendChild(fragment);
const staggersAnimation = anime.createTimeline({
targets: '.stagger-visualizer .part',
easing: 'easeInOutSine',
delay: anime.stagger(50),
loop: true,
autoplay: false
});
staggersAnimation
.add({
translateX: [
{value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'x'})},
{value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'x'})}
],
translateY: [
{value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'y'})},
{value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'y'})}
],
duration: 1000,
scale: .5,
delay: anime.stagger(100, {grid: grid, from: 'center'})
});
staggersAnimation
.add({
translateX: () => anime.random(-10, 10),
translateY: () => anime.random(-10, 10),
delay: anime.stagger(8, {from: 'last'})
});
staggersAnimation
.add({
translateX: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'x'}),
translateY: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'y'}),
rotate: 0,
scaleX: 2.5,
scaleY: .25,
delay: anime.stagger(4, {from: 'center'})
});
staggersAnimation
.add({
rotate: anime.stagger([90, 0], {grid: grid, from: 'center'}),
delay: anime.stagger(50, {grid: grid, from: 'center'})
});
staggersAnimation
.add({
translateX: 0,
translateY: 0,
scale: .5,
scaleX: 1,
rotate: 180,
duration: 1000,
delay: anime.stagger(100, {grid: grid, from: 'center'})
});
staggersAnimation
.add({
scaleY: 1,
scale: 1,
delay: anime.stagger(20, {grid: grid, from: 'center'})
});
staggersAnimation.play()
</script>
<script src="main.js"></script>
<script src="cards.js"></script>
<script src="demo.js"></script>
</body>
</html>

14
style.css
View File

@ -63,6 +63,11 @@ img {
padding-top: .5rem;
}
.center {
display: flex;
justify-content: center;
}
.cards {
display: flex;
gap: 1rem;
@ -120,13 +125,12 @@ a:visited {
justify-content: center;
align-items: center;
width: 17rem;
height: 17rem;
height: 6rem;
}
.stagger-visualizer div {
/*position: absolute;*/
.part {
width: 1rem;
height: 1rem;
border: 1px solid #FFF;
background-color: #FFF;
border: 1px solid #d7d6d4;
background-color: #d7d6d4;
}