doctype html
html(lang="en")
	head
		title Examples | Granim.js
		meta(name='description', content='Examples for granim.js. Gradients animations in javascript.')
		include includes/head
		link(type='text/css', rel='stylesheet', href='assets/css/prism.css')

	body.examples
		include includes/header

		.main-content
			.container.bloc#canvas-basic-bloc
				h1 Examples
				h2 Basic gradient animation
				p Basic gradients animation with 3 gradients in queue composed of 2 colors.
				.sandbox
					canvas#canvas-basic
				.sandbox-footer
					div.option
						| Change gradient direction:
						select#select-direction
							each val in ['left-right', 'diagonal', 'top-bottom', 'radial', 'custom']
								option(value=val)=val
				.code-wrapper
					ul.tab-titles
						li.active
							a(href='#basic-js', data-toggle='tab') JS
						li
							a(href='#basic-html', data-toggle='tab') HTML
						li
							a(href='#basic-css', data-toggle='tab') CSS

					.tab-content
						.tab.active#basic-js(data-toggle='pill')
							pre
								code.language-js
									| var granimInstance = new Granim({
									|     element: '#canvas-basic',
									|     direction: 'left-right',
									|     isPausedWhenNotInView: true,
									|     states : {
									|         "default-state": {
									|             gradients: [
									|                 ['#ff9966', '#ff5e62'],
									|                 ['#00F260', '#0575E6'],
									|                 ['#e1eec3', '#f05053']
									|             ]
									|         }
									|     }
									| });

						.tab#basic-html(data-toggle='pill')
							pre
								code.language-html='<canvas id="canvas-basic"></canvas>'

						.tab#basic-css(data-toggle='pill')
							pre
								code.language-css
									| #canvas-basic {
									|     position: absolute;
									|     display: block;
									|     width: 100%;
									|     height: 100%;
									|     top: 0;
									|     right: 0;
									|     bottom: 0;
									|     left: 0;
									| }

			.container.bloc#canvas-complex-bloc
				h2 Complex gradient animation
				p Complex gradient animation with 2 gradients in queue with different positions composed of 3 colors.
				.sandbox
					canvas#canvas-complex
				.code-wrapper
					ul.tab-titles
						li.active
							a(href='#complex-js', data-toggle='tab') JS
						li
							a(href='#complex-html', data-toggle='tab') HTML
						li
							a(href='#complex-css', data-toggle='tab') CSS

					.tab-content
						.tab.active#complex-js(data-toggle='pill')
							pre
								code.language-js
									| var granimInstance = new Granim({
									|     element: '#canvas-complex',
									|     direction: 'left-right',
									|     isPausedWhenNotInView: true,
									|     states : {
									|         "default-state": {
									|             gradients: [
									|                 [
									|                     { color: '#833ab4', pos: .2 },
									|                     { color: '#fd1d1d', pos: .8 },
									|                     { color: '#38ef7d', pos: 1 }
									|                 ], [
									|                     { color: '#40e0d0', pos: 0 },
									|                     { color: '#ff8c00', pos: .2 },
									|                     { color: '#ff0080', pos: .75 }
									|                 ],
									|             ]
									|         }
									|     }
									| });

						.tab#complex-html(data-toggle='pill')
							pre
								code.language-html='<canvas id="canvas-complex"></canvas>'

						.tab#complex-css(data-toggle='pill')
							pre
								code.language-css
									| #canvas-basic {
									|     position: absolute;
									|     display: block;
									|     width: 100%;
									|     height: 100%;
									|     top: 0;
									|     right: 0;
									|     bottom: 0;
									|     left: 0;
									| }

			.container.bloc#canvas-image-blending-bloc
				h2 Gradient animation with an image and blending mode
				p
					| Gradient animation with 2 colors, a background image and a blending mode set.<br>
					| More parameters for <span class="snippet">options.image</span> are available in the&nbsp;
					a.link(href='api-v2.0.0.html#options-image') API
					|  page.
				.sandbox
					canvas#canvas-image-blending
				.sandbox-footer
					span Change blending mode:
						select#select-blending-mode
							each val in ['multiply', 'screen', 'normal', 'overlay', 'darken', 'lighten', 'lighter', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity']
								option(value=val)=val
				.code-wrapper
					ul.tab-titles
						li.active
							a(href='#image-blending-js', data-toggle='tab') JS
						li
							a(href='#image-blending-html', data-toggle='tab') HTML
						li
							a(href='#image-blending-css', data-toggle='tab') CSS

					.tab-content
						.tab.active#image-blending-js(data-toggle='pill')
							pre
								code.language-js
									| var granimInstance = new Granim({
									|     element: '#canvas-image-blending',
									|     direction: 'top-bottom',
									|     isPausedWhenNotInView: true,
									|     image : {
									|         source: '../assets/img/bg-forest.jpg',
									|         blendingMode: 'multiply'
									|     },
									|     states : {
									|         "default-state": {
									|             gradients: [
									|                 ['#29323c', '#485563'],
									|                 ['#FF6B6B', '#556270'],
									|                 ['#80d3fe', '#7ea0c4'],
									|                 ['#f0ab51', '#eceba3']
									|             ],
									|             transitionSpeed: 7000
									|         }
									|     }
									| });

						.tab#image-blending-html(data-toggle='pill')
							pre
								code.language-html='<canvas id="canvas-image-blending"></canvas>'

						.tab#image-blending-css(data-toggle='pill')
							pre
								code.language-css
									| #canvas-image {
									|     position: absolute;
									|     display: block;
									|     width: 100%;
									|     height: 100%;
									|     top: 0;
									|     right: 0;
									|     bottom: 0;
									|     left: 0;
									| }

			.container.bloc
				h2 Gradients with an image mask
				p
					| Gradient animation with an image mask to create a gradient animation under a shape.<br>
					| Look at the logo on the left of the header.
				.sandbox.canvas-image-wrapper
					.bloc-logo
						canvas#canvas-image-mask
						a.logo-mask(href='index.html') Granim.js
				.code-wrapper
					ul.tab-titles
						li.active
							a(href='#image-mask-js', data-toggle='tab') JS
						li
							a(href='#image-mask-html', data-toggle='tab') HTML
						li
							a(href='#image-mask-css', data-toggle='tab') CSS

					.tab-content
						.tab.active#image-mask-js(data-toggle='pill')
							pre
								code.language-js
									| var granimInstance = new Granim({
									|     element: '#logo-canvas',
									|     direction: 'left-right',
									|     states : {
									|         "default-state": {
									|             gradients: [
									|                 ['#EB3349', '#F45C43'],
									|                 ['#FF8008', '#FFC837'],
									|                 ['#4CB8C4', '#3CD3AD'],
									|                 ['#24C6DC', '#514A9D'],
									|                 ['#FF512F', '#DD2476'],
									|                 ['#DA22FF', '#9733EE']
									|             ],
									|             transitionSpeed: 2000
									|         }
									|     }
									| });

						.tab#image-mask-html(data-toggle='pill')
							pre
								code.language-html
									= '<div class="bloc-logo">\n'
									= '    <canvas id="logo-canvas"></canvas>\n'
									= '    <a href="index.html" class="logo-mask">Granim.js</a>\n'
									= '</div>'

						.tab#image-mask-css(data-toggle='pill')
							pre
								code.language-css
									| .bloc-logo {
									|     position: relative;
									|     width: 130px;
									|     height: 49px;
									|     float: left;
									| }
									| <br>
									| .bloc-logo canvas,
									| .bloc-logo .logo-mask {
									|     display: block;
									|     width: 130px;
									|     height: 49px;
									| }
									| <br>
									| .bloc-logo .logo-mask {
									|     position: absolute;
									|     top: 0;
									|     left: 0;
									|     background-size: 130px;
									|     background-image: url("../img/logo-mask.png");
									|     text-indent: -9999px;
									| }

			.container.bloc
				h2 Interactive Gradients
				p
					| Create a gradient animation that responds to events.<br>
					| Click on the different states in the gradient animation to see the gradients change.
				.sandbox.canvas-interactive-wrapper
					canvas#canvas-interactive
					.cta-wrapper
						span
							a#default-state-cta.active(href='#default-state') Default state
						span
							a#violet-state-cta(href='#violet-state') Violet animated state
						span
							a#orange-state-cta(href='#orange-state') Orange static state
				.code-wrapper
					ul.tab-titles
						li.active
							a(href='#interactive-js', data-toggle='tab') JS
						li
							a(href='#interactive-html', data-toggle='tab') HTML
						li
							a(href='#interactive-css', data-toggle='tab') CSS

					.tab-content
						.tab.active#interactive-js(data-toggle='pill')
							pre
								code.language-js
									| var granimInstance = new Granim({
									|     element: '#canvas-interactive',
									|     name: 'interactive-gradient',
									|     elToSetClassOn: '.canvas-interactive-wrapper',
									|     direction: 'diagonal',
									|     isPausedWhenNotInView: true,
									|     stateTransitionSpeed: 500,
									|     states : {
									|         "default-state": {
									|             gradients: [
									|                 ['#B3FFAB', '#12FFF7'],
									|                 ['#ADD100', '#7B920A'],
									|                 ['#1A2980', '#26D0CE']
									|             ],
									|             transitionSpeed: 10000
									|         },
									|         "violet-state": {
									|             gradients: [
									|                 ['#9D50BB', '#6E48AA'],
									|                 ['#4776E6', '#8E54E9']
									|             ],
									|             transitionSpeed: 2000
									|         },
									|         "orange-state": {
									|             gradients: [ ['#FF4E50', '#F9D423'] ],
									|             loop: false
									|         }
									|     }
									| });
									| <br>
									| // With jQuery
									| $('#default-state-cta').on('click', function(event) {
									|     event.preventDefault();
									|     granimInstance.changeState('default-state');
									|     setClass('#default-state-cta')
									| });
									| $('#violet-state-cta').on('click', function(event) {
									|     event.preventDefault();
									|     granimInstance.changeState('violet-state');
									|     setClass('#violet-state-cta')
									| });
									| $('#orange-state-cta').on('click', function(event) {
									|     event.preventDefault();
									|     granimInstance.changeState('orange-state');
									|     setClass('#orange-state-cta')
									| });
									| <br>
									| function setClass(element) {
									|     $('.canvas-interactive-wrapper a').removeClass('active');
									|     $(element).addClass('active');
									| };

						.tab#interactive-html(data-toggle='pill')
							pre
								code.language-html
									= '<div class="canvas-interactive-wrapper">\n'
									= '    <canvas id="canvas-interactive"></canvas>\n'
									= '    <div class="cta-wrapper">\n'
									= '        <a href="#default-state" id="default-state-cta" class="active">Default state</a>\n'
									= '        <a href="#violet-state" id="violet-state-cta">Violet state</a>\n'
									= '        <a href="#orange-state" id="orange-state-cta">Orange state</a>\n'
									= '    </div>\n'
									= '</div>'

						.tab#interactive-css(data-toggle='pill')
							pre
								code.language-css
									| .canvas-interactive-wrapper {
									|     position: relative;
									|     height: 300px;
									|     text-align: center;
									| }
									| <br>
									| .canvas-interactive-wrapper canvas {
									|     position: absolute;
									|     display: block;
									|     width: 100%;
									|     height: 100%;
									|     top: 0;
									|     right: 0;
									|     bottom: 0;
									|     left: 0;
									| }
									| <br>
									| .canvas-interactive-wrapper .cta-wrapper {
									|     margin-top: 130px;
									| }
									| <br>
									| .canvas-interactive-wrapper .cta-wrapper a {
									|     position: relative;
									|     display: inline-block;
									|     padding: 3px 7px;
									|     border: solid 1px transparent;
									|     margin-right: 50px;
									|     z-index: 1;
									|     text-decoration: none;
									|     color: #222;
									|     transition: border .3s;
									| }
									| <br>
									| .canvas-interactive-wrapper .cta-wrapper a.active {
									|     border-color: #222;
									| }

			include includes/footer

		include includes/js-vendor
		script(src='assets/js/vendor/bootstrap.min.js')
		script(type='text/javascript').
			var pageId = 'examples';
		script(src='assets/js/script.js')
		include includes/js-analytics