https://creamandsugaricecream.com/js/canvas_custom.js

1 var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation, pause = false, scrollPX =10, scrollSunPX = 80;
2	   
3	   $( document ).ready(function() {		
4			
5			var pageHeight = $(window).height();
6			
7			if (pageHeight < 640){
8				var diffHeight = (640 - pageHeight) / 2;
9				var marginTop = $("#animation_container").css('margin-top').replace('px','');
10				var finalMarginTop = eval(marginTop) - diffHeight - 5;
11				$("#animation_container").css('margin-top', finalMarginTop + 'px');
12			}
13			
14			if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
15			{
16			
17				var mobileCssRules = '<style>.girl-animation{bottom: 39px; top: inherit !important;}.hm-section-four .girlboy-group{top: inherit!important; bottom: 92px; margin: 0;}.hm-section-four .bottom-section{top: inherit !important; bottom: -9px; line-height: 1; margin: 0; height: auto;}.fd-logo-section{float:left;}.hm-section-four .girlboy-group{line-height: 1; margin: 0; float: left; top: inherit !important; bottom: 76px;}</style>';
18				
19				$('html > head').append(mobileCssRules);
20						
21			}else{
22
23				$.scrollify({
24						section : "panelscroll",
25						sectionName : "section-name",
26						interstitialSection : "",
27						easing: "easeOutExpo",
28						scrollSpeed: 1100,
29						offset : 0,
30						scrollbars: true,
31						standardScrollElements: "",
32						setHeights: true,
33						overflowScroll: true,
34						updateHash: true,
35						touchScroll:true,
36						before:function() {},
37						after:function() {},
38						afterResize:function() {},
39						afterRender:function() {}
40					});
41
42				$(function() {
43					$.scrollify({
44						section : ".panelscroll",
45					});
46				});
47			}
48			
49			if(eval($('#section3').css("min-height").replace('px','')) > $(window).height()){
50				$('#section3').css({ "height": $('#section3').css("min-height") });
51			}			
52			else{
53				$('#section3').css({ "height": $(window).height() + 'px' });
54			}
55		});
56	   
57		$(window).scroll(function() {
58		
59			if ($(document).scrollTop() > scrollPX) {
60				$('.sun-animation ').css('top',scrollSunPX +'px');
61				scrollPX+= 50;				
62				scrollSunPX--;
63			}else{
64				$('.sun-animation ').css('top',scrollSunPX +'px');
65				scrollPX-= 50;
66				scrollSunPX++;
67			}
68		
69			if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
70				var boyOffsetTop = $('.girlboy-group').offset().top;
71				var girlOffsetTop = $('#animation_container').offset().top;
72				var bottomOffsetTop = $('.copyright').offset().top;
73				
74				var boyHeight = $('.girlboy-group')[0].clientHeight;
75				var girlHeight = $('#animation_container')[0].clientHeight;
76			   
77				var pageHeight = $(window).height();
78			    var diff = girlHeight - boyHeight;
79			    var diffOffset = boyOffsetTop - girlOffsetTop;			
80				
81			   if(diffOffset <= diff + 50 && pause == false){
82					pause = true;
83				   init();
84			   }
85			   else if(pause){				
86					pause = false;
87					init();				
88			   }			   
89			}
90			else{
91			   if($(window).scrollTop() + $(window).height() == $(document).height() && pause == false) {
92				   pause = true;
93				   init();
94			   }
95			   else if(pause){				
96					pause = false;
97					init();				
98			   }
99		   }
100		});
101
102
103function init() {	
104	canvas = document.getElementById("canvas");
105	anim_container = document.getElementById("animation_container");
106	dom_overlay_container = document.getElementById("dom_overlay_container");
107	images = images||{};
108	ss = ss||{};
109	var loader = new createjs.LoadQueue(false);
110	loader.addEventListener("fileload", handleFileLoad);
111	loader.addEventListener("complete", handleComplete);
112	loader.loadManifest(lib.properties.manifest);
113}
114function handleFileLoad(evt) {	
115	if (evt.item.type == "image") { images[evt.item.id] = evt.result; }	
116}
117function handleComplete(evt) {
118	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
119	var queue = evt.target;
120	var ssMetadata = lib.ssMetadata;
121	for(i=0; i<ssMetadata.length; i++) {
122		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
123	}
124	exportRoot = new lib.girl_balloon();
125	stage = new createjs.Stage(canvas);
126	stage.addChild(exportRoot);	
127	//Registers the "tick" event listener.
128	fnStartAnimation = function() {
129		createjs.Ticker.setFPS(lib.properties.fps);
130		createjs.Ticker.addEventListener("tick", stage);
131	}	    

132	//Code to support hidpi screens and responsive scaling.
133	function makeResponsive(isResp, respDim, isScale, scaleType) {		
134		var lastW, lastH, lastS=1;		
135		window.addEventListener('resize', resizeCanvas);		
136		resizeCanvas();		
137		function resizeCanvas() {			
138			var w = lib.properties.width, h = lib.properties.height;			
139			var iw = window.innerWidth, ih=window.innerHeight;			
140			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
141			if(isResp) {                
142				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
143					sRatio = lastS;                
144				}				
145				else if(!isScale) {					
146					if(iw<w || ih<h)						
147						sRatio = Math.min(xRatio, yRatio);				
148				}				
149				else if(scaleType==1) {					
150					sRatio = Math.min(xRatio, yRatio);				
151				}				
152				else if(scaleType==2) {					
153					sRatio = Math.max(xRatio, yRatio);				
154				}			
155			}			
156			canvas.width = w*pRatio*sRatio;			
157			canvas.height = h*pRatio*sRatio;
158			canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';				
159			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
160			stage.scaleX = pRatio*sRatio;			
161			stage.scaleY = pRatio*sRatio;			
162			lastW = iw; lastH = ih; lastS = sRatio;		
163		}
164	}
165	makeResponsive(false,'both',false,1);	
166	fnStartAnimation();
167}
168
169	 jQuery.scrollSpeed(100, 800);