|
|
| Line 430: |
Line 430: |
| | $("#tip5").css("transform","translate(0,"+((cycircle+deviceheight+3*linelength+2*circleradius)-3*heightexplanation)+"px)"); | | $("#tip5").css("transform","translate(0,"+((cycircle+deviceheight+3*linelength+2*circleradius)-3*heightexplanation)+"px)"); |
| | | | |
| − | var animatinoCounter = 0; //This counter saves the number of animation that have already been triggered. If an animation is not triggering, check if the counter-count is done propertly.
| |
| − | var accu = 0;
| |
| − |
| |
| − | $(window).on("scroll",checkPosition); //Checks on every scroll whether a certain animation should be triggered or not.
| |
| − |
| |
| − | var finalshrink = parseInt(circleradius*0.15); //This variable is here so the shrink function doesn't have to evaluate parseIn(etc) every single time.
| |
| − |
| |
| − | var triggerleftLine = parseInt(circleradius); //This variable is responsible for timely triggering the appearence of the left tips. The reason it's circleratidus is simply due to the the way x2 from the first tooltip-line is positioned (circleradius left from canvas start).
| |
| − |
| |
| − | var startMovement = false; //This variable is the responsible for triggering the first moveCircleY. It's declared here so it is within scoope of all functions.
| |
| − |
| |
| − | var triggerrightLine = parseInt(canvaswidth*0.5-circleradius); //This variable is responsible for timely triggering the appearence of right tips. The reason it's canvaswidth*etc is simply due to the way the intended lenght of the line was calculated.
| |
| − |
| |
| − | var endstep1 = parseInt(cycircle+linelength+circleradius+0.1*deviceheight); //This variable tells the first set of animations where they should end.
| |
| − | var endstep2 = parseInt(endstep1+0.25*deviceheight); //This variable tells the second set of animations where they should end.
| |
| − | var endstep3 = parseInt(endstep2+0.30*deviceheight);
| |
| − |
| |
| − | var endstep4 = parseInt(endstep3+0.25*deviceheight);
| |
| − |
| |
| − | var endstep5 = parseInt(endstep4 +linelength +0.1*deviceheight);
| |
| − |
| |
| − | var endstep6 = parseInt(endstep5 + linelength + circleradius);
| |
| − |
| |
| − | function checkPosition(){
| |
| − | var yOffSet = window.pageYOffset;
| |
| − | if(animatinoCounter == 0 && yOffSet > 0){ //First animation-round: circle shrinks, first tip appears and circle moves to inside the device
| |
| − | animatinoCounter = 1;
| |
| − | var id = setInterval(function(){
| |
| − | shrink("sample",id,finalshrink);
| |
| − | startMovement = $("#sample").attr("r") == finalshrink; //After every call of shrink, startMovement is refreshed to check if the trigger condition is already met.
| |
| − | },50); //The shrinking is triggered immediatly after scrolling down.
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | var id2 = setInterval(function(){
| |
| − | if(startMovement){
| |
| − | moveCircleY("sample",id2,endstep1);
| |
| − | moveCircleY("pulse",id2,endstep1);
| |
| − | }
| |
| − | },10); //Once the shrinking is done, both the sample and pulse start moving down.
| |
| − |
| |
| − | var id32 = setInterval(function(){
| |
| − | if(startMovement){
| |
| − | accu++;
| |
| − | pulse("pulse",accu,id32,20,$("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth)); //$("#sample").attr("cy") == endstep3
| |
| − |
| |
| − | }
| |
| − | },50); //After the shrinkage is done, the pulsing starts. Doesn't end.
| |
| − |
| |
| − | appear("tooltip-circle1");
| |
| − | var id3 = setInterval(function(){
| |
| − | extendLineLeft("tooltip-line1",(triggerleftLine-3),id3);
| |
| − | if($("#tooltip-line1").attr("x1") == triggerleftLine){
| |
| − | appear("tip1");
| |
| − |
| |
| − | };
| |
| − | },10);
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 4 && yOffSet > 100 ){ //Second round of animation: circle turns white, goes down and second tip appears
| |
| − | animatinoCounter = 5;
| |
| − | var id = setInterval(function(){
| |
| − | moveCircleY("sample",id,endstep2);
| |
| − | if($("#sample").attr("cy") >= (cycircle+circleradius+linelength+0.20*deviceheight));{
| |
| − | clearcolor("sample");
| |
| − | }
| |
| − | },10);
| |
| − |
| |
| − | var id2 = setInterval(function(){
| |
| − | moveCircleY("pulse",id2,endstep2);
| |
| − | if($("#pulse").attr("cy") >- (cycircle+circleradius+linelength+0.20*deviceheight));{
| |
| − | clearcolor("pulse");
| |
| − | }
| |
| − | },10);
| |
| − |
| |
| − | appear("tooltip-circle2");
| |
| − | var id3 = setInterval(function(){
| |
| − | extendLineRight("tooltip-line2",triggerrightLine+4,id3);
| |
| − | if($("#tooltip-line2").attr("x2") == (triggerrightLine+4)){
| |
| − | appear("tip2");
| |
| − |
| |
| − | };
| |
| − | },10);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 7 && yOffSet > 200){ //Third round of animations: Third tip appears and circle past the mid point and stips 3/4 of the device length
| |
| − | animatinoCounter = 8;
| |
| − | var id = setInterval(function(){
| |
| − | var id22;
| |
| − | moveCircleY("sample",id,endstep3);
| |
| − | },10);
| |
| − |
| |
| − | var id2 = setInterval(function(){
| |
| − | moveCircleY("pulse",id2,endstep3);
| |
| − | },10);
| |
| − |
| |
| − | appear("tooltip-circle3");
| |
| − | var id3 = setInterval(function(){
| |
| − | extendLineLeft("tooltip-line3",(triggerleftLine-3),id3);
| |
| − | if($("#tooltip-line3").attr("x1") == triggerleftLine){
| |
| − | appear("tip3");
| |
| − |
| |
| − | };
| |
| − | },10);
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 10 && yOffSet > 300){ //Fourth round of animations: circle divides into three and goes down. Fourth tip appears
| |
| − | animatinoCounter = 11;
| |
| − | $("#sample2").removeClass("invisible");
| |
| − | $("#sample2").addClass("visible");
| |
| − | $("#pulse2").removeClass("invisible");
| |
| − |
| |
| − |
| |
| − | $("#sample3").addClass("visible");
| |
| − | $("#sample3").removeClass("invisible");
| |
| − | $("#pulse3").removeClass("invisible");
| |
| − |
| |
| − |
| |
| − |
| |
| − | var id = setInterval(function(){
| |
| − | moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
| |
| − | moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth),false);
| |
| − | moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
| |
| − | moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth),true);
| |
| − |
| |
| − |
| |
| − | },50);
| |
| − |
| |
| − | var hola = false
| |
| − | var id2 = setInterval(function(){
| |
| − | if( $("#sample3").attr("cx") == parseInt(canvaswidth*0.5+0.3*devicewidth) && (hola || (accu % 20) - 1 == 0 ) ){
| |
| − | hola = true;
| |
| − | moveCircleY("sample",id2,endstep4);
| |
| − | moveCircleY("pulse",id2,endstep4);
| |
| − | moveCircleY("sample2",id2,endstep4);
| |
| − | moveCircleY("pulse2",id2,endstep4);
| |
| − | moveCircleY("sample3",id2,endstep4);
| |
| − | moveCircleY("pulse3",id2,endstep4);
| |
| − | }
| |
| − | },10);
| |
| − | var adios = false;
| |
| − | var id3= setInterval(function(){
| |
| − | if($("#sample3").attr("cx") >= parseInt(canvaswidth*0.5+0.3*devicewidth) && (adios || (accu % 20) - 1 == 0 )){
| |
| − | adios =true ;
| |
| − |
| |
| − | accu++;
| |
| − | pulse("pulse",accu,id3,20,false);
| |
| − | pulse("pulse2",accu, id3,20,false);
| |
| − | pulse("pulse3",accu, id3,20,false);
| |
| − | }
| |
| − | },50);
| |
| − |
| |
| − | appear("tooltip-circle4");
| |
| − | var id3 = setInterval(function(){
| |
| − | extendLineRight("tooltip-line4",triggerrightLine+4,id3);
| |
| − | if($("#tooltip-line4").attr("x2") == (triggerrightLine+4)){
| |
| − | appear("tip4");
| |
| − |
| |
| − | };
| |
| − | },10);
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − | if(animatinoCounter ==17 && yOffSet > 300){ //Fifth round of animations:
| |
| − | animatinoCounter = 22;
| |
| − |
| |
| − | var id = setInterval(function(){
| |
| − | moveCircleY("sample",id,endstep5);
| |
| − | moveCircleY("pulse",id,endstep5);
| |
| − | moveCircleY("sample2",id,endstep5);
| |
| − | moveCircleY("pulse2",id,endstep5);
| |
| − | moveCircleY("sample3",id,endstep5);
| |
| − | moveCircleY("pulse3",id,endstep5);
| |
| − | },10);
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 28 && yOffSet > 300){
| |
| − | animatinoCounter = 29;
| |
| − | var id = setInterval(function(){
| |
| − | moveCircleX("sample2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
| |
| − | moveCircleX("pulse2",id,parseInt(canvaswidth*0.5-0.3*devicewidth-linelengthHor+linewidth),false);
| |
| − | moveCircleX("sample3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
| |
| − | moveCircleX("pulse3",id,parseInt(canvaswidth*0.5+0.3*devicewidth+linelengthHor-linewidth),true);
| |
| − | },10);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 33 && yOffSet >300){
| |
| − | animatinoCounter = 34;
| |
| − | var id = setInterval(function(){
| |
| − | moveCircleY("sample",id,endstep6);
| |
| − | moveCircleY("pulse",id,endstep6);
| |
| − | moveCircleY("sample2",id,endstep6);
| |
| − | moveCircleY("pulse2",id,endstep6);
| |
| − | moveCircleY("sample3",id,endstep6);
| |
| − | moveCircleY("pulse3",id,endstep6);
| |
| − | },10);
| |
| − | }
| |
| − |
| |
| − | if(animatinoCounter == 40 && yOffSet > 300){
| |
| − | animatinoCounter = 41;
| |
| − | var id = setInterval(function(){
| |
| − | expandNegative("sample2",id,parseInt(circleradius)+2);
| |
| − | },50);
| |
| − |
| |
| − | var id2 = setInterval(function(){
| |
| − | if(animatinoCounter == 42){
| |
| − | expandPositive("sample",id2,parseInt(circleradius)+2);
| |
| − | }
| |
| − | },50);
| |
| − |
| |
| − | var id3 = setInterval(function(){
| |
| − | if(animatinoCounter == 43){
| |
| − | expandNegative("sample3",id3,parseInt(circleradius)+2);
| |
| − | }
| |
| − | },50);
| |
| − | appear("tooltip-circle5");
| |
| − | var id4 = setInterval(function(){
| |
| − | extendLineLeft("tooltip-line5",parseInt(0.33*canvaswidth),id4);
| |
| − | if($("#tooltip-line5").attr("x1") == parseInt(0.36*canvaswidth)){
| |
| − | appear("tip5");
| |
| − |
| |
| − | };
| |
| − | },10);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| | </script> | | </script> |
| | </html> | | </html> |
