tum
/
network_report_server


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Manual test - Granim</title>

	<style>

		body {

			height: 250vh;

			margin: 0;

		}

		#granim-canvas {

			display: block;

			width: calc(100% - 100px);

			min-width: 200px;

			height: calc(100vh - 100px);

			min-height: 100px;

			margin: 50px;

		}

	</style>

</head>

<body>

	<canvas id="granim-canvas"></canvas>

	<script src="../dist/granim.js"></script>

	<script>

		var granimInstance = new Granim({

			element: '#granim-canvas',

			direction: 'left-right',

			customDirection: {

				x0: '50px',

				y0: '00',

				x1: '0',

				y1: '0'

			},

			isPausedWhenNotInView: true,

			scrollDebounceThreshold: 300,

			image: {

				source: 'img/800x200.jpg',

				position: ['center', 'center'],

				stretchMode: ['none', 'stretch-if-bigger'],

				// blendingMode: 'multiply'

			},

			states : {

				"default-state": {

					gradients: [

						[

							{ color: 'rgba(255, 153, 102, .33)', pos: .5 },

							{ color: '#ff5e62', pos: 1 }

						], [

							{ color: 'hsla(144, 100%, 47%, .75)', pos: .1 },

							{ color: 'hsl(210, 96%, 46%)', pos: .6 }

						],

					],

					transitionSpeed: 1000

				},

				
				"default-state2": {

					gradients: [

						[{ color: '#7ffc25', pos: .5 }, { color: 'hsla(144, 100%, 47%, .75)', pos: .8 }],

						[{ color: '#AA076B', pos: .1 }, { color: '#7ffc25', pos: .3 }]

					],

					transitionSpeed: 1000

				}

			}

		});


		setTimeout(function() {

			granimInstance.changeState('default-state2');

			console.log('State Changed');

			
		}, 2000);

	</script>

</body>

</html>