From d44c90fa27a29e7a2b1596fb1e927aaf9bdb2bfe Mon Sep 17 00:00:00 2001 From: Valentin Date: Tue, 21 Mar 2023 17:54:33 +0100 Subject: [PATCH] alors --- _WORKFILES/dev_design_fevrier.txt | 82 ++++---- assets/pictos/action.svg | 216 ++++++++++----------- assets/pictos/doleance.svg | 228 +++++++++++----------- assets/pictos/proximite.svg | 126 ++++++------- assets/pictos/superposition.svg | 192 +++++++++---------- assets/pictos/terrain-de-vie.svg | 118 ++++++------ background.js | 250 ++++++++++++------------ grained/LICENSE | 18 +- grained/README.md | 120 ++++++------ grained/bower.json | 52 ++--- grained/grained.js | 296 ++++++++++++++--------------- grained/grained.min.js | 12 +- index.html | 114 +++++------ styles.scss | 304 +++++++++++++++--------------- 14 files changed, 1064 insertions(+), 1064 deletions(-) diff --git a/_WORKFILES/dev_design_fevrier.txt b/_WORKFILES/dev_design_fevrier.txt index f4da997..57a843f 100644 --- a/_WORKFILES/dev_design_fevrier.txt +++ b/_WORKFILES/dev_design_fevrier.txt @@ -1,42 +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 +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/assets/pictos/action.svg b/assets/pictos/action.svg index 859688c..0a329f3 100644 --- a/assets/pictos/action.svg +++ b/assets/pictos/action.svg @@ -1,108 +1,108 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/doleance.svg b/assets/pictos/doleance.svg index 3362830..c1c62a8 100644 --- a/assets/pictos/doleance.svg +++ b/assets/pictos/doleance.svg @@ -1,114 +1,114 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/proximite.svg b/assets/pictos/proximite.svg index c169376..e5ad6ae 100644 --- a/assets/pictos/proximite.svg +++ b/assets/pictos/proximite.svg @@ -1,63 +1,63 @@ - - - - - - - - - - + + + + + + + + + + diff --git a/assets/pictos/superposition.svg b/assets/pictos/superposition.svg index afa79f2..592b183 100644 --- a/assets/pictos/superposition.svg +++ b/assets/pictos/superposition.svg @@ -1,96 +1,96 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/assets/pictos/terrain-de-vie.svg b/assets/pictos/terrain-de-vie.svg index 9e7e30b..bcdb308 100644 --- a/assets/pictos/terrain-de-vie.svg +++ b/assets/pictos/terrain-de-vie.svg @@ -1,59 +1,59 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/background.js b/background.js index 0fc282f..f08c0e3 100644 --- a/background.js +++ b/background.js @@ -1,126 +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%) +// 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 index c4b30c8..05acb89 100644 --- a/grained/LICENSE +++ b/grained/LICENSE @@ -1,9 +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. +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 index 628f41f..33840d8 100644 --- a/grained/README.md +++ b/grained/README.md @@ -1,60 +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)** + +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 index d2daf18..7e959d9 100644 --- a/grained/bower.json +++ b/grained/bower.json @@ -1,26 +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" - ] -} +{ + "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 index eabc38a..8b8e762 100644 --- a/grained/grained.js +++ b/grained/grained.js @@ -1,148 +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); +/*! 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 index c81a699..6db5640 100644 --- a/grained/grained.min.js +++ b/grained/grained.min.js @@ -1,7 +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 -*/ +/*! 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

-
-
-
-
-
-
- - - + + + + + + + + + + + + +
+ + + + + + + + + + +
+ +
+ +

Terrain de vie

+
+
+ +

Proximité

+
+
+ +

Superposition

+
+
+ +

Puissance d'agir

+
+
+ +

Action

+
+
+ +

Doléancer

+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/styles.scss b/styles.scss index 338db22..6472326 100644 --- a/styles.scss +++ b/styles.scss @@ -1,153 +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; +/* 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