121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
var stage = 0
|
|
var a = ["..", ".", "", ".", "..", "..."]
|
|
|
|
$(document).ready(function () {
|
|
upform = document.getElementById("fileupload")
|
|
uplabel = document.getElementById("filelabel")
|
|
upline = document.getElementById("formline")
|
|
upbtn = document.getElementById("upload")
|
|
if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
|
|
var height1 = $("#eins").height ();
|
|
var height2 = $("#zwei").height ();
|
|
if (height1 < 300) {height1 += 550};
|
|
console.log (height1, height2);
|
|
$("#fileselect").change(function() {
|
|
uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
|
|
changeFile ()
|
|
});
|
|
$(window).scroll(function () {
|
|
var pos = $(this).scrollTop ();
|
|
if (stage ==1 && pos-200 >= height2) { moveBlobs ("225vh", 600, 2)}
|
|
else if (stage == 2 && pos < height2 ) { moveBlobs ("95vh", 1000, 1)}
|
|
else if (stage == 0 && pos+600 >= height1){ moveBlobs ("95vh", 1000, 1)}
|
|
else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
|
|
})
|
|
}
|
|
)
|
|
|
|
function moveBlobs (t, r, to) {
|
|
var dur = 0.4
|
|
if (stage < to) {
|
|
$("#blobs").css ({
|
|
'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-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,
|
|
'right': r + 'px',
|
|
'animation': '',});
|
|
$("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
|
|
$("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
|
|
$("#red").css ({ 'animation': 'appear 0.4s 0.15s ease-in' })
|
|
stage = to;
|
|
}, (dur*1000)-10)
|
|
|
|
setTimeout (function () {
|
|
$("#green").css ({ 'animation': '' })
|
|
$("#blue").css ({ 'animation': '' })
|
|
$("#red").css ({ 'animation': '' })
|
|
stage = to;
|
|
}, (dur*2000)-1)
|
|
}
|
|
|
|
function changeFile (){
|
|
$("#filelabel").css ({
|
|
'font-family': 'League Spartan',
|
|
'font-size': '2.5vw'
|
|
})
|
|
$("#upload").css ({
|
|
'color': 'inherit',
|
|
'cursor': 'pointer'
|
|
})
|
|
upbtn.removeAttribute("disabled")
|
|
}
|
|
|
|
function ButtonPress () {
|
|
upbtn.setAttribute ('disabled', 'disabled')
|
|
uplabel.setAttribute('hidden', 'hidden')
|
|
upline.setAttribute('hidden', 'hidden')
|
|
document.body.style.cursor = "progress"
|
|
$("#fileupload").css ({
|
|
'cursor': 'not-allowed',
|
|
'animation': 'text-in-out 1s'
|
|
})
|
|
$("#upload").css ({
|
|
'cursor': 'not-allowed',
|
|
})
|
|
setTimeout (function () {
|
|
upbtn.value = "Verarbeite..."
|
|
$('#upload').css ({'padding-top': '3vw'})
|
|
}, 500)
|
|
setTimeout (function() {
|
|
$("#fileupload").css ({
|
|
'animation': 'border-in-out 2s infinite'
|
|
})
|
|
}, 1000)
|
|
setTimeout (function () {
|
|
textLoop (0)
|
|
}, 200)
|
|
}
|
|
|
|
function textLoop (i){
|
|
setTimeout (function (){
|
|
upbtn.value = "Verarbeite" + a[i]
|
|
if (i<5) { textLoop (++i)}
|
|
else { textLoop (0)}
|
|
}, 2000)
|
|
} |