| 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>
|
