paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fonts + seite 3

Browse Source
This commit is contained in:
Paul Martin
2023-11-10 15:41:41 +01:00
parent 765dc77f0a
commit bdf410665f
6 changed files with 222 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
blob-animation.js
View File

@ -1,31 +1,56 @@
var stage = 0
$(document).ready(function () {
var height1 = $("#eins").height ();
var height2 = $("#zwei").height ();
console.log (height1, height2);
$(window).scroll(function () {
var pos = $(this).scrollTop ();
console.log (pos);
if (pos+600 >= height1 && stage == 0){ moveBlobs (1000, 1000, 1)}
else if (stage == 1 && pos < 400){ moveBlobs (0,0,0) }
if (stage ==1 && pos-200 >= height2) { console.log ( moveBlobs (2050, 600, 2))}
else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
else if (stage == 1 && pos < height1-450){ moveBlobs (0,0,0) }
})
}
)
function moveBlobs (t, r, to) {
var dur = 0.7
var dur = 0.4
if (stage < to) {
$("#blobs").css ({
'animation': 'move-down-'+ to + ' ease-in-out '+dur+ 's'
'animation': 'move-down-' + to +' ease-out '+dur+ 's'
})
$("#green").css ({
'animation': 'green-move-down-'+ to + ' ease-in '+dur+ 's'
})
$("#red").css ({
'animation': 'red-move-down-'+ to + ' ease-in '+dur+ 's'
})
$("#blue").css ({
'animation': 'blue-move-down-'+ to + ' ease-in '+dur+ 's'
})
}
else {
$("#blobs").css ({
'animation': 'move-down-'+(to+1)+' ease-in-out '+dur+'s reverse'
'animation': 'move-down-' +(to+1)+ ' ease-out '+dur+'s reverse'
})
$("#green").css ({
'animation': 'green-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
})
$("#red").css ({
'animation': 'red-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
})
$("#blue").css ({
'animation': 'blue-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
})
}
setTimeout (function () {$("#blobs").css ({
'top': t + 'px',
'right': r + 'px',
'animation': '0',});
setTimeout (function () {
$("#blobs").css ({
'top': t + 'px',
'right': r + 'px',
'animation': '',});
$("#green").css ({ 'animation': '' })
$("#blue").css ({ 'animation': '' })
$("#red").css ({ 'animation': '' })
stage = to;
}, (dur*1000)-1)
}