commit bf635fea29e1f87bb9951de1a3884fee75fe03c0 Author: val Date: Wed Mar 15 15:31:55 2023 +0100 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6722151 Binary files /dev/null and b/.gitignore differ diff --git a/_WORKFILES/captures/boussole - associations-1.png.png b/_WORKFILES/captures/boussole - associations-1.png.png new file mode 100644 index 0000000..fcd14c2 Binary files /dev/null and b/_WORKFILES/captures/boussole - associations-1.png.png differ diff --git a/_WORKFILES/captures/boussole - associations.png.png b/_WORKFILES/captures/boussole - associations.png.png new file mode 100644 index 0000000..a9a841b Binary files /dev/null and b/_WORKFILES/captures/boussole - associations.png.png differ diff --git a/_WORKFILES/captures/boussole - doleance.png.png b/_WORKFILES/captures/boussole - doleance.png.png new file mode 100644 index 0000000..bb4aed3 Binary files /dev/null and b/_WORKFILES/captures/boussole - doleance.png.png differ diff --git a/_WORKFILES/captures/boussole - proximité V2.png.png b/_WORKFILES/captures/boussole - proximité V2.png.png new file mode 100644 index 0000000..f74b13d Binary files /dev/null and b/_WORKFILES/captures/boussole - proximité V2.png.png differ diff --git a/_WORKFILES/captures/boussole - proximité.png.png b/_WORKFILES/captures/boussole - proximité.png.png new file mode 100644 index 0000000..d7bc71b Binary files /dev/null and b/_WORKFILES/captures/boussole - proximité.png.png differ diff --git a/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png b/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png new file mode 100644 index 0000000..2fdbd43 Binary files /dev/null and b/_WORKFILES/captures/boussole - puissance d'agir-1.png-2.png differ diff --git a/_WORKFILES/captures/boussole - puissance d'agir-1.png.png b/_WORKFILES/captures/boussole - puissance d'agir-1.png.png new file mode 100644 index 0000000..1b51b3a Binary files /dev/null and b/_WORKFILES/captures/boussole - puissance d'agir-1.png.png differ diff --git a/_WORKFILES/captures/boussole - supperpositions-1.png-2.png b/_WORKFILES/captures/boussole - supperpositions-1.png-2.png new file mode 100644 index 0000000..9913188 Binary files /dev/null and b/_WORKFILES/captures/boussole - supperpositions-1.png-2.png differ diff --git a/_WORKFILES/captures/boussole - supperpositions-1.png.png b/_WORKFILES/captures/boussole - supperpositions-1.png.png new file mode 100644 index 0000000..ee5c2db Binary files /dev/null and b/_WORKFILES/captures/boussole - supperpositions-1.png.png differ diff --git a/_WORKFILES/captures/boussole - supperpositions.png.png b/_WORKFILES/captures/boussole - supperpositions.png.png new file mode 100644 index 0000000..5831495 Binary files /dev/null and b/_WORKFILES/captures/boussole - supperpositions.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png b/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png new file mode 100644 index 0000000..46a40d9 Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie V2-2.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie V2.png.png b/_WORKFILES/captures/boussole - terrain de vie V2.png.png new file mode 100644 index 0000000..cca9915 Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie V2.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png b/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png new file mode 100644 index 0000000..16b823e Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie- zoom.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie-1.png.png b/_WORKFILES/captures/boussole - terrain de vie-1.png.png new file mode 100644 index 0000000..55efedc Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie-1.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie-2.png.png b/_WORKFILES/captures/boussole - terrain de vie-2.png.png new file mode 100644 index 0000000..719969a Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie-2.png.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie.png-2.png b/_WORKFILES/captures/boussole - terrain de vie.png-2.png new file mode 100644 index 0000000..85e7164 Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie.png-2.png differ diff --git a/_WORKFILES/captures/boussole - terrain de vie.png.png b/_WORKFILES/captures/boussole - terrain de vie.png.png new file mode 100644 index 0000000..7f16e78 Binary files /dev/null and b/_WORKFILES/captures/boussole - terrain de vie.png.png differ diff --git a/_WORKFILES/captures/carte - associations.png.png b/_WORKFILES/captures/carte - associations.png.png new file mode 100644 index 0000000..0c60a1b Binary files /dev/null and b/_WORKFILES/captures/carte - associations.png.png differ diff --git a/_WORKFILES/captures/carte - doléance.png.png b/_WORKFILES/captures/carte - doléance.png.png new file mode 100644 index 0000000..195b46d Binary files /dev/null and b/_WORKFILES/captures/carte - doléance.png.png differ diff --git a/_WORKFILES/captures/carte - proximité V2.png.png b/_WORKFILES/captures/carte - proximité V2.png.png new file mode 100644 index 0000000..42fcf9b Binary files /dev/null and b/_WORKFILES/captures/carte - proximité V2.png.png differ diff --git a/_WORKFILES/captures/carte - proximité.png.png b/_WORKFILES/captures/carte - proximité.png.png new file mode 100644 index 0000000..95367f0 Binary files /dev/null and b/_WORKFILES/captures/carte - proximité.png.png differ diff --git a/_WORKFILES/captures/carte - puissance d'agir.png.png b/_WORKFILES/captures/carte - puissance d'agir.png.png new file mode 100644 index 0000000..16fe4d2 Binary files /dev/null and b/_WORKFILES/captures/carte - puissance d'agir.png.png differ diff --git a/_WORKFILES/captures/carte - superpositions.png.png b/_WORKFILES/captures/carte - superpositions.png.png new file mode 100644 index 0000000..27433d9 Binary files /dev/null and b/_WORKFILES/captures/carte - superpositions.png.png differ diff --git a/_WORKFILES/captures/carte - terrain de vie V2.png.png b/_WORKFILES/captures/carte - terrain de vie V2.png.png new file mode 100644 index 0000000..f7f3f45 Binary files /dev/null and b/_WORKFILES/captures/carte - terrain de vie V2.png.png differ diff --git a/_WORKFILES/captures/carte - terrain de vie.png-2.png b/_WORKFILES/captures/carte - terrain de vie.png-2.png new file mode 100644 index 0000000..840f0a1 Binary files /dev/null and b/_WORKFILES/captures/carte - terrain de vie.png-2.png differ diff --git a/_WORKFILES/captures/carte - terrain de vie.png.png b/_WORKFILES/captures/carte - terrain de vie.png.png new file mode 100644 index 0000000..552aae7 Binary files /dev/null and b/_WORKFILES/captures/carte - terrain de vie.png.png differ diff --git a/_WORKFILES/captures/interactions - terrain de vie.png.png b/_WORKFILES/captures/interactions - terrain de vie.png.png new file mode 100644 index 0000000..23f66e2 Binary files /dev/null and b/_WORKFILES/captures/interactions - terrain de vie.png.png differ diff --git a/_WORKFILES/captures/interraction - association.png.png b/_WORKFILES/captures/interraction - association.png.png new file mode 100644 index 0000000..1085e9c Binary files /dev/null and b/_WORKFILES/captures/interraction - association.png.png differ diff --git a/_WORKFILES/dessin-pictos.svg b/_WORKFILES/dessin-pictos.svg new file mode 100644 index 0000000..7daa315 --- /dev/null +++ b/_WORKFILES/dessin-pictos.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_WORKFILES/dev_design_fevrier.txt b/_WORKFILES/dev_design_fevrier.txt new file mode 100644 index 0000000..f4da997 --- /dev/null +++ b/_WORKFILES/dev_design_fevrier.txt @@ -0,0 +1,42 @@ +I / PICTOS + +OUTILS D'ENQUETE +1.1 terrain de vie +1.2 proximité +1.3 superposition +1.4 puissance d'agir +1.5 actions +1.6 doléancier + +Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px) +Deux tailles : 35px (menu) et 28px (cartel) +Points : 3px 5px + +NAVIGATION +2.1 mode d'emploi +2.2 connexion +2.3 rechercher +2.4 retour aux cartes vivantes +2.5 casque écoute +2.6 chevron fermer onglet +2.7 entités liées (sens de liaison) +2.8 scrollbar +2.9 custom video/sound player + +FOND D'ENQUÊTE +3.1 terrain de vie +3.2 puissance d'agir +3.3 doléance + +Essayer les pictos contextuellement -> +ieurs tailles et épaisseurs ? + -> rapport à la typo + + +II / ANIMATIONS +1. Terrains de vie en particules +2. Survol terrains de vie sur carte +3. Ecoute terrain de vie sur carte +4. Survol association sur carte +5. Survol entité sur enquête +6. Apparition volets latéraux enquête +7. Clic/survol menu mode de navigation \ No newline at end of file diff --git a/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png b/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png new file mode 100644 index 0000000..f5a4a96 Binary files /dev/null and b/_WORKFILES/ref-pîcto-action-sorcellerie-capitaliste.png differ diff --git a/_WORKFILES/schéma navigation/schéma navigation.png b/_WORKFILES/schéma navigation/schéma navigation.png new file mode 100644 index 0000000..a105306 Binary files /dev/null and b/_WORKFILES/schéma navigation/schéma navigation.png differ diff --git a/assets/fonts/PublicSans-Light.ttf b/assets/fonts/PublicSans-Light.ttf new file mode 100644 index 0000000..286bb3a Binary files /dev/null and b/assets/fonts/PublicSans-Light.ttf differ diff --git a/assets/fonts/PublicSans-Regular.ttf b/assets/fonts/PublicSans-Regular.ttf new file mode 100644 index 0000000..7f55dba Binary files /dev/null and b/assets/fonts/PublicSans-Regular.ttf differ diff --git a/assets/fonts/PublicSans-Thin.ttf b/assets/fonts/PublicSans-Thin.ttf new file mode 100644 index 0000000..3d45ec8 Binary files /dev/null and b/assets/fonts/PublicSans-Thin.ttf differ diff --git a/assets/pictos/action.svg b/assets/pictos/action.svg new file mode 100644 index 0000000..859688c --- /dev/null +++ b/assets/pictos/action.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/doleance.svg b/assets/pictos/doleance.svg new file mode 100644 index 0000000..3362830 --- /dev/null +++ b/assets/pictos/doleance.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/proximite.svg b/assets/pictos/proximite.svg new file mode 100644 index 0000000..c169376 --- /dev/null +++ b/assets/pictos/proximite.svg @@ -0,0 +1,63 @@ + + + + + + + + + + diff --git a/assets/pictos/puissance-d-agir.svg b/assets/pictos/puissance-d-agir.svg new file mode 100644 index 0000000..9b7ef6c --- /dev/null +++ b/assets/pictos/puissance-d-agir.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + diff --git a/assets/pictos/superposition.svg b/assets/pictos/superposition.svg new file mode 100644 index 0000000..afa79f2 --- /dev/null +++ b/assets/pictos/superposition.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/terrain-de-vie.svg b/assets/pictos/terrain-de-vie.svg new file mode 100644 index 0000000..9e7e30b --- /dev/null +++ b/assets/pictos/terrain-de-vie.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + diff --git a/background.js b/background.js new file mode 100644 index 0000000..0fc282f --- /dev/null +++ b/background.js @@ -0,0 +1,126 @@ +// grain +grained('#grain-bg', { + animate: true, + patternWidth: 100, + patternHeight: 100, + grainOpacity: 0.5, + grainDensity: 1, + grainWidth: 1, + grainHeight: 1, + grainChaos: 10, + grainSpeed: 1 +}); + +/* +|O couleur prev O | +| couleur d'appoint | +| | +| | +| | +| couleur next O| +*/ + +// au clic sur le mode suivant : +// - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante) +// - couleurs next (ou prev) est une nouvelle couleur +// - couleur appoint s'adapte en fonction de couleur next + + +let pageAmount = 0; +let currentPage = 1, prevPage; + +document.querySelectorAll('.mode').forEach(function(node, index) { + pageAmount++; + node.addEventListener('click', function() { + document.querySelectorAll('.active').forEach(function(el) { + el.classList.remove('active'); + }); + node.classList.toggle('active'); + prevPage = currentPage; + currentPage = index + 1; + + console.log(currentPage, prevPage); + + if (currentPage != prevPage) { + if (currentPage > prevPage) { + couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1); + couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage); + } else { + couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1); + couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage); + } + couleurs.appoint.h = couleurs.next.h + 200; + console.log(couleurs.prev.h, couleurs.next.h); + + let mainContainer = document.getElementById('BG_BG_BG'); + let containerTmp = document.getElementById('BG_BG_BG_tmp'); + containerTmp.style.background = ` + radial-gradient(circle at 0% 14%, + hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, + rgba(255, 255, 255, 0) 100%), + radial-gradient(circle at 93% 95%, + hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, + rgba(255, 255, 255, 0) 100%), + radial-gradient(circle at 73% 10%, + hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, + rgba(255, 255, 255, 0) 100%) + `; + containerTmp.style.opacity = 1; + setTimeout(function() { + mainContainer.style.opacity = 0; + },100); + + setTimeout(function() { + mainContainer.style.background = ` + radial-gradient(circle at 0% 14%, + hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, + rgba(255, 255, 255, 0) 100%), + radial-gradient(circle at 93% 95%, + hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, + rgba(255, 255, 255, 0) 100%), + radial-gradient(circle at 73% 10%, + hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, + rgba(255, 255, 255, 0) 100%) + `; + containerTmp.style.opacity = 0; + mainContainer.style.opacity = 1; + }, 500); + } + + }) +}); + +let couleurs = { + prev: { + h: 42, + s: 40.6, + l: 44.9 + 20, + }, + next: { + h: 0, + s: 30.5, + l: 46.3 + 20, + }, + appoint: { + h: 0, + s: 66, + l: 35.7 + 20, + } +} + +couleurs.next.h = couleurs.prev.h + (360 / pageAmount); +couleurs.appoint.h = couleurs.next.h + 200; +console.log(couleurs.prev.h, couleurs.next.h); + +let container = document.getElementById("BG_BG_BG"); +container.style.background = ` +radial-gradient(circle at 0% 14%, + hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, + rgba(255, 255, 255, 0) 100%), +radial-gradient(circle at 93% 95%, + hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, + rgba(255, 255, 255, 0) 100%), +radial-gradient(circle at 73% 10%, + hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, + rgba(255, 255, 255, 0) 100%) +`; \ No newline at end of file diff --git a/grained/LICENSE b/grained/LICENSE new file mode 100644 index 0000000..c4b30c8 --- /dev/null +++ b/grained/LICENSE @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2014, Sarath Saleem + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/grained/README.md b/grained/README.md new file mode 100644 index 0000000..628f41f --- /dev/null +++ b/grained/README.md @@ -0,0 +1,60 @@ + +Add animated grain texture effect to your content. +-------------------------------------------------- + +With **grained.js** you can add customized noise effect on your web page. It has easily customizable options to generate the animated noise effect. +The animation is added using CSS3 key-frame animation and instantly generated png noise image. + +[!["Create your own"](http://sarathsaleem.github.io/grained/img/textute-list.gif)](http://sarathsaleem.github.io/grained) + +**[Create your own](http://sarathsaleem.github.io/grained)** + +How to use +------------ + +Include the library file in your html page. + + + +initialize the library by + + grained('elementId',options) + +*`'elementId'`* is the id of the container element to add the grain effect. It is important to note that grainedjs will not change the background of the container element. It appends a div element as the first child of the container. Grainedjs will add two style changes to the container element *`'position:relative;overflow:hidden'.`* If the container position is absolute it will remand as absolute only. + +Since a `'div'` element with class `'grained'` is added as first child element with position absolute it will have the z index priority and appears on top of other contents in the container element. If you want the other elements in container element on top of grained effect you have to add a css like + +*`#container > * { position:relative; }`* + +So the ideal structure of implementaion is like follows + +
+
+ your contents goes here .. like ,

etc +

+
+after initilizing `grained('#container', {});` it will look like this + + +
+
+
+ your contents goes here .. like ,

etc +

+
+ +Options +------- + +With these options you can crate customized grained effect , these are the option parameter you can change and the default values. + + var options = { + animate: true, + patternWidth: 100, + patternHeight: 100, + grainOpacity: 0.05, + grainDensity: 1, + grainWidth: 1, + grainHeight: 1 + }; +With animation true/false you can create textures with grain movement and a static one. The other value you can see the live in **[online generator](http://sarathsaleem.github.io/grained)** diff --git a/grained/bower.json b/grained/bower.json new file mode 100644 index 0000000..d2daf18 --- /dev/null +++ b/grained/bower.json @@ -0,0 +1,26 @@ +{ + "name": "Grained", + "main": "grained.js", + "version": "0.0.1", + "homepage": "https://github.com/sarathsaleem/grained", + "authors": [ + "Sarath Saleem " + ], + "description": "Add animated grain noise texture effect to your web content", + "keywords": [ + "texture", + "grained", + "grain-effect", + "noise", + "noise-effect", + "generate-texture" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/grained/grained.js b/grained/grained.js new file mode 100644 index 0000000..eabc38a --- /dev/null +++ b/grained/grained.js @@ -0,0 +1,148 @@ +/*! Grained.js +* Author : Sarath Saleem - https://github.com/sarathsaleem +* MIT license: http://opensource.org/licenses/MIT +* GitHub : https://github.com/sarathsaleem/grained +* v0.0.1 +*/ +(function (window, doc) { + + "use strict"; + + function grained(ele, opt) { + + var element = null, + elementId = null, + selectorElement = null; + + if (typeof ele === 'string') { + element = doc.getElementById(ele.split('#')[1]); + } + + if (!element) { + console.error('Grained: cannot find the element with id ' + ele); + return; + } else { + elementId = element.id; + } + + //set style for parent + if (element.style.position !== 'absolute') { + element.style.position = 'relative'; + } + element.style.overflow = 'hidden'; + + var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"]; + + //default option values + var options = { + animate: true, + patternWidth: 100, + patternHeight: 100, + grainOpacity: 0.1, + grainDensity: 1, + grainWidth: 1, + grainHeight: 1, + grainChaos: 0.5, + grainSpeed: 20 + + }; + + Object.keys(opt).forEach(function (key) { + options[key] = opt[key]; + }); + + + var generateNoise = function () { + var canvas = doc.createElement('canvas'); + var ctx = canvas.getContext('2d'); + canvas.width = options.patternWidth; + canvas.height = options.patternHeight; + for (var w = 0; w < options.patternWidth; w += options.grainDensity) { + for (var h = 0; h < options.patternHeight; h += options.grainDensity) { + var rgb = Math.random() * 256 | 0; + ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')'; + ctx.fillRect(w, h, options.grainWidth, options.grainHeight); + } + } + return canvas.toDataURL('image/png'); + }; + + function addCSSRule(sheet, selector, rules, index) { + var ins = ''; + if (selector.length) { + ins = selector + "{" + rules + "}"; + } else { + ins = rules; + } + + if ("insertRule" in sheet) { + sheet.insertRule(ins, index); + } else if ("addRule" in sheet) { + sheet.addRule(selector, rules, index); + } + } + + + var noise = generateNoise(); + + var animation = '', + keyFrames = ['0%:-10%,10%', '10%:-25%,0%', '20%:-30%,10%', '30%:-30%,30%', '40%::-20%,20%', '50%:-15%,10%', '60%:-20%,20%', '70%:-5%,20%', '80%:-25%,5%', '90%:-30%,25%', '100%:-10%,10%']; + + var pre = prefixes.length; + while (pre--) { + animation += '@' + prefixes[pre] + 'keyframes grained{'; + for (var key = 0; key < keyFrames.length; key++) { + var keyVal = keyFrames[key].split(':'); + animation += keyVal[0] + '{'; + animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');'; + animation += '}'; + } + animation += '}'; + } + + //add animation keyframe + var animationAdded = doc.getElementById('grained-animation'); + if (animationAdded) { + animationAdded.parentElement.removeChild(animationAdded); + } + var style = doc.createElement("style"); + style.type = "text/css"; + style.id = 'grained-animation'; + style.innerHTML = animation; + doc.body.appendChild(style); + + //add custimozed style + var styleAdded = doc.getElementById('grained-animation-' + elementId); + if (styleAdded) { + styleAdded.parentElement.removeChild(styleAdded); + } + + style = doc.createElement("style"); + style.type = "text/css"; + style.id = 'grained-animation-' + elementId; + doc.body.appendChild(style); + + var rule = 'background-image: url(' + noise + ');'; + rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;'; + pre = prefixes.length; + if (options.animate) { + while (pre--) { + rule += prefixes[pre] + 'animation-name:grained;'; + rule += prefixes[pre] + 'animation-iteration-count: infinite;'; + rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;'; + rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);'; + } + } + + //selecter element to add grains + selectorElement = '#' + elementId + '::before'; + + + addCSSRule(style.sheet, selectorElement, rule); + + + } + + window.grained = grained; + //END +})(window, document); diff --git a/grained/grained.min.js b/grained/grained.min.js new file mode 100644 index 0000000..c81a699 --- /dev/null +++ b/grained/grained.min.js @@ -0,0 +1,7 @@ +/*! Grained.js +* Author : Sarath Saleem - https://github.com/sarathsaleem +* MIT license: http://opensource.org/licenses/MIT +* GitHub : https://github.com/sarathsaleem/grained +* v0.0.1 +*/ +!function(a,b){"use strict";function c(a,c){function d(a,b,c,d){var e="";e=b.length?b+"{"+c+"}":c,"insertRule"in a?a.insertRule(e,d):"addRule"in a&&a.addRule(b,c,d)}var e=null,f=null,g=null;if("string"==typeof a&&(e=b.getElementById(a.split("#")[1])),!e)return void console.error("Grained: cannot find the element with id "+a);f=e.id,"absolute"!==e.style.position&&(e.style.position="relative"),e.style.overflow="hidden";var h=["","-moz-","-o-animation-","-webkit-","-ms-"],i={animate:!0,patternWidth:100,patternHeight:100,grainOpacity:.1,grainDensity:1,grainWidth:1,grainHeight:1,grainChaos:.5,grainSpeed:20};Object.keys(c).forEach(function(a){i[a]=c[a]});for(var j=function(){var a=b.createElement("canvas"),c=a.getContext("2d");a.width=i.patternWidth,a.height=i.patternHeight;for(var d=0;d + + + + + + + + + + + +
+ + + + + + + + + + +
+ +
+ +

Terrain de vie

+
+
+ +

Proximité

+
+
+ +

Superposition

+
+
+ +

Puissance d'agir

+
+
+ +

Action

+
+
+ +

Doléancer

+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f6b5ace --- /dev/null +++ b/styles.css @@ -0,0 +1,137 @@ +@charset "UTF-8"; +/* mix blend mode est dépendant du stacking context */ +@font-face { + font-family: "Public"; + font-style: normal; + font-weight: 400; + src: url("assets/fonts/PublicSans-Regular.ttf") format("TrueType"); +} +@font-face { + font-family: "Public"; + font-style: normal; + font-weight: 300; + src: url("assets/fonts/PublicSans-Light.ttf") format("TrueType"); +} +* { + margin: 0; + padding: 0; +} + +body { + font-family: "Public", sans-serif; + font-weight: 400; +} + +#content { + position: fixed; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} +#content svg { + width: 30%; + height: auto; +} +#content svg path { + cursor: pointer; +} +#content svg#fill { + fill: white; + mix-blend-mode: overlay; + opacity: 0.6; +} +#content svg#stroke { + position: absolute; + fill: none; + stroke: black; + stroke-width: 1px; +} +#content #buttons_container { + position: absolute; + bottom: 5vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} +#content #buttons_container .mode { + display: flex; + align-items: center; + justify-content: center; + background-color: white; + margin: 0px 10px; + padding: 7px 15px; + padding-left: 10px; + border-radius: 50px; + cursor: pointer; + border: solid 0.8px rgba(0, 0, 0, 0.5); + transition: border 0.4s ease-in-out; + font-weight: 300; + font-size: 1rem; +} +#content #buttons_container .mode svg { + width: 28px; + height: auto; + margin-right: 10px; +} +#content #buttons_container .mode svg .thick { + transition: stroke-width 0.2s ease-in-out; + stroke-width: 0.8; + stroke: black; +} +#content #buttons_container .mode svg .thin { + transition: stroke-width 0.2s ease-in-out; + stroke-width: 0.5; + stroke: black; +} +#content #buttons_container .mode p { + height: fit-content; + margin-bottom: 3px; +} +#content #buttons_container .mode.active { + font-weight: 400; + border: solid 1.2px rgb(0, 0, 0); +} +#content #buttons_container .mode.active svg .thick { + stroke-width: 1.2; + stroke: black; +} +#content #buttons_container .mode.active svg .thin { + stroke-width: 0.6; + stroke: black; +} +#content #BG_BG_BG { + position: absolute; + width: 100vw; + height: 100vh; + background-size: 100% 100%; + background-repeat: no-repeat; + z-index: -1; + opacity: 1; + transition: opacity 0.5s ease-in-out; +} +#content #BG_BG_BG_tmp { + position: absolute; + width: 100vw; + height: 100vh; + background-size: 100% 100%; + background-repeat: no-repeat; + z-index: -2; + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +#grain-bg { + position: absolute !important; + width: 100vw; + height: 100vh; +} + +#grain-bg > * { + position: relative; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map new file mode 100644 index 0000000..78da76f --- /dev/null +++ b/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAAA;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAOJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;;AAGR;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..338db22 --- /dev/null +++ b/styles.scss @@ -0,0 +1,153 @@ +/* mix blend mode est dépendant du stacking context */ + +@font-face { + font-family: 'Public'; + font-style: normal; + font-weight: 400; + src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType'); +} + +@font-face { + font-family: 'Public'; + font-style: normal; + font-weight: 300; + src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType'); +} + + + + + +* { + margin: 0; + padding: 0; +} + +body { + font-family: 'Public', sans-serif; + font-weight: 400; +} + + + +#content { + position: fixed; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + + svg { + width: 30%; + height: auto; + path { + cursor: pointer; + } + } + + svg#fill { + fill: white; + mix-blend-mode: overlay; + opacity: 0.6; + } + + svg#stroke { + position: absolute; + fill: none; + stroke: black; + stroke-width: 1px; + } + + #buttons_container { + position: absolute; + bottom: 5vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + .mode { + display: flex; + align-items: center; + justify-content: center; + background-color: white; + margin: 0px 10px; + padding: 7px 15px; + padding-left: 10px; + border-radius: 50px; + cursor: pointer; + border: solid 0.8px rgba(0, 0, 0, 0.5); + transition: border 0.4s ease-in-out; + font-weight: 300; + font-size: 1rem; + svg { + width: 28px; + height: auto; + margin-right: 10px; + .thick { + transition: stroke-width 0.2s ease-in-out; + stroke-width: 0.8; + stroke: black; + } + .thin { + transition: stroke-width 0.2s ease-in-out; + stroke-width: 0.5; + stroke: black; + } + } + p { + height: fit-content; + margin-bottom: 3px; + } + } + .mode.active { + font-weight: 400; + border: solid 1.2px rgba(0, 0, 0, 1); + svg .thick { + stroke-width: 1.2; + stroke: black; + } + svg .thin { + stroke-width: 0.6; + stroke: black; + } + } + } + + #BG_BG_BG { + position: absolute; + width: 100vw; + height: 100vh; + + background-size: 100% 100%; + background-repeat: no-repeat; + z-index: -1; + opacity: 1; + transition: opacity 0.5s ease-in-out; + } + + #BG_BG_BG_tmp { + position: absolute; + width: 100vw; + height: 100vh; + + background-size: 100% 100%; + background-repeat: no-repeat; + z-index: -2; + opacity: 0; + transition: opacity 0.5s ease-in-out; + } + + +} + +#grain-bg { + position: absolute !important; + width: 100vw; + height: 100vh; +} + +#grain-bg > * { + position: relative; +} \ No newline at end of file