valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

alors

Browse Source
This commit is contained in:
Valentin
2023-03-21 17:54:33 +01:00
parent 229f07a31a
commit d44c90fa27
14 changed files with 1064 additions and 1064 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_WORKFILES/dev_design_fevrier.txt
+41 -41
View File
@@ -1,42 +1,42 @@
I / PICTOS I / PICTOS
OUTILS D'ENQUETE OUTILS D'ENQUETE
1.1 terrain de vie 1.1 terrain de vie
1.2 proximité 1.2 proximité
1.3 superposition 1.3 superposition
1.4 puissance d'agir 1.4 puissance d'agir
1.5 actions 1.5 actions
1.6 doléancier 1.6 doléancier
Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px) Deux graisse : regular (0.8px, 0.3px) et active (1.2px, 0.6px)
Deux tailles : 35px (menu) et 28px (cartel) Deux tailles : 35px (menu) et 28px (cartel)
Points : 3px 5px Points : 3px 5px
NAVIGATION NAVIGATION
2.1 mode d'emploi 2.1 mode d'emploi
2.2 connexion 2.2 connexion
2.3 rechercher 2.3 rechercher
2.4 retour aux cartes vivantes 2.4 retour aux cartes vivantes
2.5 casque écoute 2.5 casque écoute
2.6 chevron fermer onglet 2.6 chevron fermer onglet
2.7 entités liées (sens de liaison) 2.7 entités liées (sens de liaison)
2.8 scrollbar 2.8 scrollbar
2.9 custom video/sound player 2.9 custom video/sound player
FOND D'ENQUÊTE FOND D'ENQUÊTE
3.1 terrain de vie 3.1 terrain de vie
3.2 puissance d'agir 3.2 puissance d'agir
3.3 doléance 3.3 doléance
Essayer les pictos contextuellement -> +ieurs tailles et épaisseurs ? Essayer les pictos contextuellement -> +ieurs tailles et épaisseurs ?
-> rapport à la typo -> rapport à la typo
II / ANIMATIONS II / ANIMATIONS
1. Terrains de vie en particules 1. Terrains de vie en particules
2. Survol terrains de vie sur carte 2. Survol terrains de vie sur carte
3. Ecoute terrain de vie sur carte 3. Ecoute terrain de vie sur carte
4. Survol association sur carte 4. Survol association sur carte
5. Survol entité sur enquête 5. Survol entité sur enquête
6. Apparition volets latéraux enquête 6. Apparition volets latéraux enquête
7. Clic/survol menu mode de navigation 7. Clic/survol menu mode de navigation
assets/pictos/action.svg
+108 -108
View File
@@ -1,108 +1,108 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="35px" width="35px"
height="35px" height="35px"
viewBox="0 0 35 35" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="picto"> <g id="picto">
<circle <circle
class="thin" class="thin"
fill="white" fill="white"
stroke="none" stroke="none"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="9" /> r="9" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="12" y1="12"
x2="17.5" x2="17.5"
y2="23" /> y2="23" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="12" y1="12"
x2="17.5" x2="17.5"
y2="23" y2="23"
transform="rotate(45, 17.5, 17.5)" /> transform="rotate(45, 17.5, 17.5)" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="12" y1="12"
x2="17.5" x2="17.5"
y2="23" y2="23"
transform="rotate(90, 17.5, 17.5)" /> transform="rotate(90, 17.5, 17.5)" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="12" y1="12"
x2="17.5" x2="17.5"
y2="23" y2="23"
transform="rotate(135, 17.5, 17.5)" /> transform="rotate(135, 17.5, 17.5)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="translate(0 -16)" /> transform="translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(45) translate(0 -16)" /> transform="rotate(45) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(90) translate(0 -16)" /> transform="rotate(90) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(135) translate(0 -16)" /> transform="rotate(135) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(180) translate(0 -16)" /> transform="rotate(180) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(225) translate(0 -16)" /> transform="rotate(225) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(270) translate(0 -16)" /> transform="rotate(270) translate(0 -16)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 14, 25.5 d="M 14, 25.5
L 17.5, 17.5 L 17.5, 17.5
L 21, 25.5" L 21, 25.5"
transform-origin="center" transform-origin="center"
transform="rotate(315) translate(0 -16)" /> transform="rotate(315) translate(0 -16)" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

assets/pictos/doleance.svg
+114 -114
View File
@@ -1,114 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="35px" width="35px"
height="35px" height="35px"
viewBox="0 0 35 35" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="picto"> <g id="picto">
<circle <circle
class="thick" class="thick"
fill="white" fill="white"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="17" /> r="17" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" /> y2="35" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" y2="35"
transform="rotate(45, 17.5, 17.5)" /> transform="rotate(45, 17.5, 17.5)" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" y2="35"
transform="rotate(90, 17.5, 17.5)" /> transform="rotate(90, 17.5, 17.5)" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" y2="35"
transform="rotate(135, 17.5, 17.5)" /> transform="rotate(135, 17.5, 17.5)" />
<circle <circle
class="thin" class="thin"
fill="white" fill="white"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="8" /> r="8" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="translate(-12 2)" /> transform="translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(45) translate(-12 2)" /> transform="rotate(45) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(90) translate(-12 2)" /> transform="rotate(90) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(135) translate(-12 2)" /> transform="rotate(135) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(180) translate(-12 2)" /> transform="rotate(180) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(225) translate(-12 2)" /> transform="rotate(225) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(270) translate(-12 2)" /> transform="rotate(270) translate(-12 2)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15.5, 20.5 d="M 15.5, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 19.5, 20.5" L 19.5, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(315) translate(-12 2)" /> transform="rotate(315) translate(-12 2)" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

assets/pictos/proximite.svg
+63 -63
View File
@@ -1,63 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="35px" width="35px"
height="35px" height="35px"
viewBox="0 0 35 35" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="picto"> <g id="picto">
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 4, 4 d="M 4, 4
L 13, 1 L 13, 1
L 19, 5 L 19, 5
L 28, 3 L 28, 3
L 34, 12 L 34, 12
L 29, 22 L 29, 22
L 27, 29 L 27, 29
L 21, 34 L 21, 34
L 14, 31 L 14, 31
L 12, 23 L 12, 23
L 4, 17 L 4, 17
L 1, 12 L 1, 12
Z" /> Z" />
<circle <circle
fill="black" fill="black"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="2.5" /> r="2.5" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 7, 7 d="M 7, 7
L 11, 5 L 11, 5
L 15, 7 L 15, 7
L 12, 12 L 12, 12
L 12, 15 L 12, 15
L 9, 16 L 9, 16
L 5, 12 L 5, 12
Z" /> Z" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 20, 11 d="M 20, 11
L 22, 9 L 22, 9
L 24, 9 L 24, 9
L 27, 7 L 27, 7
L 29, 11 L 29, 11
L 26, 15 L 26, 15
L 24, 16 L 24, 16
L 21, 14 L 21, 14
Z" /> Z" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 18, 23 d="M 18, 23
L 22, 22 L 22, 22
L 24, 25 L 24, 25
L 22, 28 L 22, 28
L 20, 29 L 20, 29
L 17, 27 L 17, 27
Z" /> Z" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

assets/pictos/superposition.svg
+96 -96
View File
@@ -1,96 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="35px" width="35px"
height="35px" height="35px"
viewBox="0 0 35 35" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="picto"> <g id="picto">
<path <path
class="thick" class="thick"
d="M 12, 13 d="M 12, 13
L 21, 13 L 21, 13
L 31, 22 L 31, 22
L 22, 32 L 22, 32
L 8, 26 L 8, 26
Z" /> Z" />
<path <path
class="thick" class="thick"
d="M 1, 11 d="M 1, 11
L 9, 2 L 9, 2
L 25, 9 L 25, 9
L 21, 23 L 21, 23
L 3, 20 L 3, 20
Z" /> Z" />
<path <path
class="thick" class="thick"
d="M 21, 2 d="M 21, 2
L 30, 6 L 30, 6
L 33, 13 L 33, 13
L 25, 24 L 25, 24
L 18, 27 L 18, 27
L 7, 12 L 7, 12
Z" /> Z" />
<path <path
fill="white" fill="white"
d="M 12, 13 d="M 12, 13
L 21, 13 L 21, 13
L 31, 22 L 31, 22
L 22, 32 L 22, 32
L 8, 26 L 8, 26
Z" /> Z" />
<path <path
fill="white" fill="white"
d="M 1, 11 d="M 1, 11
L 9, 2 L 9, 2
L 25, 9 L 25, 9
L 21, 23 L 21, 23
L 3, 20 L 3, 20
Z" /> Z" />
<path <path
fill="white" fill="white"
d="M 21, 2 d="M 21, 2
L 30, 6 L 30, 6
L 33, 13 L 33, 13
L 25, 24 L 25, 24
L 18, 27 L 18, 27
L 7, 12 L 7, 12
Z" /> Z" />
<circle <circle
fill="black" fill="black"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="2.5" /> r="2.5" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 12, 13 d="M 12, 13
L 21, 13 L 21, 13
L 31, 22 L 31, 22
L 22, 32 L 22, 32
L 8, 26 L 8, 26
Z" /> Z" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 1, 11 d="M 1, 11
L 9, 2 L 9, 2
L 25, 9 L 25, 9
L 21, 23 L 21, 23
L 3, 20 L 3, 20
Z" /> Z" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 21, 2 d="M 21, 2
L 30, 6 L 30, 6
L 33, 13 L 33, 13
L 25, 24 L 25, 24
L 18, 27 L 18, 27
L 7, 12 L 7, 12
Z" /> Z" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

assets/pictos/terrain-de-vie.svg
+59 -59
View File
@@ -1,59 +1,59 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg <svg
width="35px" width="35px"
height="35px" height="35px"
viewBox="0 0 35 35" viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<g id="picto"> <g id="picto">
<circle <circle
class="thick" class="thick"
fill="white" fill="white"
cx="17.5" cx="17.5"
cy="17.5" cy="17.5"
r="17" /> r="17" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" /> y2="35" />
<line <line
class="thin" class="thin"
x1="17.5" x1="17.5"
y1="0" y1="0"
x2="17.5" x2="17.5"
y2="35" y2="35"
transform="rotate(90, 17.5, 17.5)" /> transform="rotate(90, 17.5, 17.5)" />
<path <path
class="thick" class="thick"
fill="white" fill="white"
d="M 9, 12 d="M 9, 12
L 21, 8 L 21, 8
L 27, 14 L 27, 14
L 27, 21 L 27, 21
L 19, 26 L 19, 26
L 12, 27 L 12, 27
L 6, 21 L 6, 21
Z" Z"
transform="translate(0 0.5)" transform="translate(0 0.5)"
/> />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15, 20.5 d="M 15, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 20, 20.5" L 20, 20.5"
transform-origin="center" transform-origin="center"
transform="translate(0 -15.75)" /> transform="translate(0 -15.75)" />
<path <path
class="thin" class="thin"
fill="none" fill="none"
d="M 15, 20.5 d="M 15, 20.5
L 17.5, 17.5 L 17.5, 17.5
L 20, 20.5" L 20, 20.5"
transform-origin="center" transform-origin="center"
transform="rotate(90) translate(0 -15.75)" /> transform="rotate(90) translate(0 -15.75)" />
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

background.js
+125 -125
View File
@@ -1,126 +1,126 @@
// grain // grain
grained('#grain-bg', { grained('#grain-bg', {
animate: true, animate: true,
patternWidth: 100, patternWidth: 100,
patternHeight: 100, patternHeight: 100,
grainOpacity: 0.5, grainOpacity: 0.5,
grainDensity: 1, grainDensity: 1,
grainWidth: 1, grainWidth: 1,
grainHeight: 1, grainHeight: 1,
grainChaos: 10, grainChaos: 10,
grainSpeed: 1 grainSpeed: 1
}); });
/* /*
|O couleur prev O | |O couleur prev O |
| couleur d'appoint | | couleur d'appoint |
| | | |
| | | |
| | | |
| couleur next O| | couleur next O|
*/ */
// au clic sur le mode suivant : // au clic sur le mode suivant :
// - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante) // - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
// - couleurs next (ou prev) est une nouvelle couleur // - couleurs next (ou prev) est une nouvelle couleur
// - couleur appoint s'adapte en fonction de couleur next // - couleur appoint s'adapte en fonction de couleur next
let pageAmount = 0; let pageAmount = 0;
let currentPage = 1, prevPage; let currentPage = 1, prevPage;
document.querySelectorAll('.mode').forEach(function(node, index) { document.querySelectorAll('.mode').forEach(function(node, index) {
pageAmount++; pageAmount++;
node.addEventListener('click', function() { node.addEventListener('click', function() {
document.querySelectorAll('.active').forEach(function(el) { document.querySelectorAll('.active').forEach(function(el) {
el.classList.remove('active'); el.classList.remove('active');
}); });
node.classList.toggle('active'); node.classList.toggle('active');
prevPage = currentPage; prevPage = currentPage;
currentPage = index + 1; currentPage = index + 1;
console.log(currentPage, prevPage); console.log(currentPage, prevPage);
if (currentPage != prevPage) { if (currentPage != prevPage) {
if (currentPage > prevPage) { if (currentPage > prevPage) {
couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1); couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage); couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
} else { } else {
couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1); couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage); couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
} }
couleurs.appoint.h = couleurs.next.h + 200; couleurs.appoint.h = couleurs.next.h + 200;
console.log(couleurs.prev.h, couleurs.next.h); console.log(couleurs.prev.h, couleurs.next.h);
let mainContainer = document.getElementById('BG_BG_BG'); let mainContainer = document.getElementById('BG_BG_BG');
let containerTmp = document.getElementById('BG_BG_BG_tmp'); let containerTmp = document.getElementById('BG_BG_BG_tmp');
containerTmp.style.background = ` containerTmp.style.background = `
radial-gradient(circle at 0% 14%, radial-gradient(circle at 0% 14%,
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 93% 95%, radial-gradient(circle at 93% 95%,
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 73% 10%, radial-gradient(circle at 73% 10%,
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
rgba(255, 255, 255, 0) 100%) rgba(255, 255, 255, 0) 100%)
`; `;
containerTmp.style.opacity = 1; containerTmp.style.opacity = 1;
setTimeout(function() { setTimeout(function() {
mainContainer.style.opacity = 0; mainContainer.style.opacity = 0;
},100); },100);
setTimeout(function() { setTimeout(function() {
mainContainer.style.background = ` mainContainer.style.background = `
radial-gradient(circle at 0% 14%, radial-gradient(circle at 0% 14%,
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 93% 95%, radial-gradient(circle at 93% 95%,
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 73% 10%, radial-gradient(circle at 73% 10%,
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
rgba(255, 255, 255, 0) 100%) rgba(255, 255, 255, 0) 100%)
`; `;
containerTmp.style.opacity = 0; containerTmp.style.opacity = 0;
mainContainer.style.opacity = 1; mainContainer.style.opacity = 1;
}, 500); }, 500);
} }
}) })
}); });
let couleurs = { let couleurs = {
prev: { prev: {
h: 42, h: 42,
s: 40.6, s: 40.6,
l: 44.9 + 20, l: 44.9 + 20,
}, },
next: { next: {
h: 0, h: 0,
s: 30.5, s: 30.5,
l: 46.3 + 20, l: 46.3 + 20,
}, },
appoint: { appoint: {
h: 0, h: 0,
s: 66, s: 66,
l: 35.7 + 20, l: 35.7 + 20,
} }
} }
couleurs.next.h = couleurs.prev.h + (360 / pageAmount); couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
couleurs.appoint.h = couleurs.next.h + 200; couleurs.appoint.h = couleurs.next.h + 200;
console.log(couleurs.prev.h, couleurs.next.h); console.log(couleurs.prev.h, couleurs.next.h);
let container = document.getElementById("BG_BG_BG"); let container = document.getElementById("BG_BG_BG");
container.style.background = ` container.style.background = `
radial-gradient(circle at 0% 14%, radial-gradient(circle at 0% 14%,
hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%, hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 93% 95%, radial-gradient(circle at 93% 95%,
hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%, hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 73% 10%, radial-gradient(circle at 73% 10%,
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%, hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
rgba(255, 255, 255, 0) 100%) rgba(255, 255, 255, 0) 100%)
`; `;
grained/LICENSE
+9 -9
View File
@@ -1,9 +1,9 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2014, Sarath Saleem 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: 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 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 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.
grained/README.md
+60 -60
View File
@@ -1,60 +1,60 @@
Add animated grain texture effect to your content. 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. 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. 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/img/textute-list.gif)](http://sarathsaleem.github.io/grained)
**[Create your own](http://sarathsaleem.github.io/grained)** **[Create your own](http://sarathsaleem.github.io/grained)**
How to use How to use
------------ ------------
Include the library file in your html page. Include the library file in your html page.
<script src="grained.js"></script> <script src="grained.js"></script>
initialize the library by initialize the library by
grained('elementId',options) 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. *`'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 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; }`* *`#container > * { position:relative; }`*
So the ideal structure of implementaion is like follows So the ideal structure of implementaion is like follows
<div id="container"> <div id="container">
<div class="contents"> <div class="contents">
your contents goes here .. like <a>, <p> etc your contents goes here .. like <a>, <p> etc
</div> </div>
</div> </div>
after initilizing `grained('#container', {});` it will look like this after initilizing `grained('#container', {});` it will look like this
<div id="container"> <div id="container">
<div class='grained'></div> <div class='grained'></div>
<div class="contents"> <div class="contents">
your contents goes here .. like <a>, <p> etc your contents goes here .. like <a>, <p> etc
</div> </div>
</div> </div>
Options Options
------- -------
With these options you can crate customized grained effect , these are the option parameter you can change and the default values. With these options you can crate customized grained effect , these are the option parameter you can change and the default values.
var options = { var options = {
animate: true, animate: true,
patternWidth: 100, patternWidth: 100,
patternHeight: 100, patternHeight: 100,
grainOpacity: 0.05, grainOpacity: 0.05,
grainDensity: 1, grainDensity: 1,
grainWidth: 1, grainWidth: 1,
grainHeight: 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)** 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)**
grained/bower.json
+26 -26
View File
@@ -1,26 +1,26 @@
{ {
"name": "Grained", "name": "Grained",
"main": "grained.js", "main": "grained.js",
"version": "0.0.1", "version": "0.0.1",
"homepage": "https://github.com/sarathsaleem/grained", "homepage": "https://github.com/sarathsaleem/grained",
"authors": [ "authors": [
"Sarath Saleem <https://github.com/sarathsaleem>" "Sarath Saleem <https://github.com/sarathsaleem>"
], ],
"description": "Add animated grain noise texture effect to your web content", "description": "Add animated grain noise texture effect to your web content",
"keywords": [ "keywords": [
"texture", "texture",
"grained", "grained",
"grain-effect", "grain-effect",
"noise", "noise",
"noise-effect", "noise-effect",
"generate-texture" "generate-texture"
], ],
"license": "MIT", "license": "MIT",
"ignore": [ "ignore": [
"**/.*", "**/.*",
"node_modules", "node_modules",
"bower_components", "bower_components",
"test", "test",
"tests" "tests"
] ]
} }
grained/grained.js
+148 -148
View File
@@ -1,148 +1,148 @@
/*! Grained.js /*! Grained.js
* Author : Sarath Saleem - https://github.com/sarathsaleem * Author : Sarath Saleem - https://github.com/sarathsaleem
* MIT license: http://opensource.org/licenses/MIT * MIT license: http://opensource.org/licenses/MIT
* GitHub : https://github.com/sarathsaleem/grained * GitHub : https://github.com/sarathsaleem/grained
* v0.0.1 * v0.0.1
*/ */
(function (window, doc) { (function (window, doc) {
"use strict"; "use strict";
function grained(ele, opt) { function grained(ele, opt) {
var element = null, var element = null,
elementId = null, elementId = null,
selectorElement = null; selectorElement = null;
if (typeof ele === 'string') { if (typeof ele === 'string') {
element = doc.getElementById(ele.split('#')[1]); element = doc.getElementById(ele.split('#')[1]);
} }
if (!element) { if (!element) {
console.error('Grained: cannot find the element with id ' + ele); console.error('Grained: cannot find the element with id ' + ele);
return; return;
} else { } else {
elementId = element.id; elementId = element.id;
} }
//set style for parent //set style for parent
if (element.style.position !== 'absolute') { if (element.style.position !== 'absolute') {
element.style.position = 'relative'; element.style.position = 'relative';
} }
element.style.overflow = 'hidden'; element.style.overflow = 'hidden';
var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"]; var prefixes = ["", "-moz-", "-o-animation-", "-webkit-", "-ms-"];
//default option values //default option values
var options = { var options = {
animate: true, animate: true,
patternWidth: 100, patternWidth: 100,
patternHeight: 100, patternHeight: 100,
grainOpacity: 0.1, grainOpacity: 0.1,
grainDensity: 1, grainDensity: 1,
grainWidth: 1, grainWidth: 1,
grainHeight: 1, grainHeight: 1,
grainChaos: 0.5, grainChaos: 0.5,
grainSpeed: 20 grainSpeed: 20
}; };
Object.keys(opt).forEach(function (key) { Object.keys(opt).forEach(function (key) {
options[key] = opt[key]; options[key] = opt[key];
}); });
var generateNoise = function () { var generateNoise = function () {
var canvas = doc.createElement('canvas'); var canvas = doc.createElement('canvas');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
canvas.width = options.patternWidth; canvas.width = options.patternWidth;
canvas.height = options.patternHeight; canvas.height = options.patternHeight;
for (var w = 0; w < options.patternWidth; w += options.grainDensity) { for (var w = 0; w < options.patternWidth; w += options.grainDensity) {
for (var h = 0; h < options.patternHeight; h += options.grainDensity) { for (var h = 0; h < options.patternHeight; h += options.grainDensity) {
var rgb = Math.random() * 256 | 0; var rgb = Math.random() * 256 | 0;
ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')'; ctx.fillStyle = 'rgba(' + [rgb, rgb, rgb, options.grainOpacity].join() + ')';
ctx.fillRect(w, h, options.grainWidth, options.grainHeight); ctx.fillRect(w, h, options.grainWidth, options.grainHeight);
} }
} }
return canvas.toDataURL('image/png'); return canvas.toDataURL('image/png');
}; };
function addCSSRule(sheet, selector, rules, index) { function addCSSRule(sheet, selector, rules, index) {
var ins = ''; var ins = '';
if (selector.length) { if (selector.length) {
ins = selector + "{" + rules + "}"; ins = selector + "{" + rules + "}";
} else { } else {
ins = rules; ins = rules;
} }
if ("insertRule" in sheet) { if ("insertRule" in sheet) {
sheet.insertRule(ins, index); sheet.insertRule(ins, index);
} else if ("addRule" in sheet) { } else if ("addRule" in sheet) {
sheet.addRule(selector, rules, index); sheet.addRule(selector, rules, index);
} }
} }
var noise = generateNoise(); var noise = generateNoise();
var animation = '', 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%']; 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; var pre = prefixes.length;
while (pre--) { while (pre--) {
animation += '@' + prefixes[pre] + 'keyframes grained{'; animation += '@' + prefixes[pre] + 'keyframes grained{';
for (var key = 0; key < keyFrames.length; key++) { for (var key = 0; key < keyFrames.length; key++) {
var keyVal = keyFrames[key].split(':'); var keyVal = keyFrames[key].split(':');
animation += keyVal[0] + '{'; animation += keyVal[0] + '{';
animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');'; animation += prefixes[pre] + 'transform:translate(' + keyVal[1] + ');';
animation += '}'; animation += '}';
} }
animation += '}'; animation += '}';
} }
//add animation keyframe //add animation keyframe
var animationAdded = doc.getElementById('grained-animation'); var animationAdded = doc.getElementById('grained-animation');
if (animationAdded) { if (animationAdded) {
animationAdded.parentElement.removeChild(animationAdded); animationAdded.parentElement.removeChild(animationAdded);
} }
var style = doc.createElement("style"); var style = doc.createElement("style");
style.type = "text/css"; style.type = "text/css";
style.id = 'grained-animation'; style.id = 'grained-animation';
style.innerHTML = animation; style.innerHTML = animation;
doc.body.appendChild(style); doc.body.appendChild(style);
//add custimozed style //add custimozed style
var styleAdded = doc.getElementById('grained-animation-' + elementId); var styleAdded = doc.getElementById('grained-animation-' + elementId);
if (styleAdded) { if (styleAdded) {
styleAdded.parentElement.removeChild(styleAdded); styleAdded.parentElement.removeChild(styleAdded);
} }
style = doc.createElement("style"); style = doc.createElement("style");
style.type = "text/css"; style.type = "text/css";
style.id = 'grained-animation-' + elementId; style.id = 'grained-animation-' + elementId;
doc.body.appendChild(style); doc.body.appendChild(style);
var rule = 'background-image: url(' + noise + ');'; var rule = 'background-image: url(' + noise + ');';
rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;'; rule += 'position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;';
pre = prefixes.length; pre = prefixes.length;
if (options.animate) { if (options.animate) {
while (pre--) { while (pre--) {
rule += prefixes[pre] + 'animation-name:grained;'; rule += prefixes[pre] + 'animation-name:grained;';
rule += prefixes[pre] + 'animation-iteration-count: infinite;'; rule += prefixes[pre] + 'animation-iteration-count: infinite;';
rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;'; rule += prefixes[pre] + 'animation-duration: ' + options.grainChaos + 's;';
rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);'; rule += prefixes[pre] + 'animation-timing-function: steps(' +options.grainSpeed + ', end);';
} }
} }
//selecter element to add grains //selecter element to add grains
selectorElement = '#' + elementId + '::before'; selectorElement = '#' + elementId + '::before';
addCSSRule(style.sheet, selectorElement, rule); addCSSRule(style.sheet, selectorElement, rule);
} }
window.grained = grained; window.grained = grained;
//END //END
})(window, document); })(window, document);
grained/grained.min.js
Vendored
+6 -6
View File
@@ -1,7 +1,7 @@
/*! Grained.js /*! Grained.js
* Author : Sarath Saleem - https://github.com/sarathsaleem * Author : Sarath Saleem - https://github.com/sarathsaleem
* MIT license: http://opensource.org/licenses/MIT * MIT license: http://opensource.org/licenses/MIT
* GitHub : https://github.com/sarathsaleem/grained * GitHub : https://github.com/sarathsaleem/grained
* v0.0.1 * 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<i.patternWidth;d+=i.grainDensity)for(var e=0;e<i.patternHeight;e+=i.grainDensity){var f=256*Math.random()|0;c.fillStyle="rgba("+[f,f,f,i.grainOpacity].join()+")",c.fillRect(d,e,i.grainWidth,i.grainHeight)}return a.toDataURL("image/png")},k=j(),l="",m=["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%"],n=h.length;n--;){l+="@"+h[n]+"keyframes grained{";for(var o=0;o<m.length;o++){var p=m[o].split(":");l+=p[0]+"{",l+=h[n]+"transform:translate("+p[1]+");",l+="}"}l+="}"}var q=b.getElementById("grained-animation");q&&q.parentElement.removeChild(q);var r=b.createElement("style");r.type="text/css",r.id="grained-animation",r.innerHTML=l,b.body.appendChild(r);var s=b.getElementById("grained-animation-"+f);s&&s.parentElement.removeChild(s),r=b.createElement("style"),r.type="text/css",r.id="grained-animation-"+f,b.body.appendChild(r);var t="background-image: url("+k+");";if(t+='position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;',n=h.length,i.animate)for(;n--;)t+=h[n]+"animation-name:grained;",t+=h[n]+"animation-iteration-count: infinite;",t+=h[n]+"animation-duration: "+i.grainChaos+"s;",t+=h[n]+"animation-timing-function: steps("+i.grainSpeed+", end);";g="#"+f+"::before",d(r.sheet,g,t)}a.grained=c}(window,document); !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<i.patternWidth;d+=i.grainDensity)for(var e=0;e<i.patternHeight;e+=i.grainDensity){var f=256*Math.random()|0;c.fillStyle="rgba("+[f,f,f,i.grainOpacity].join()+")",c.fillRect(d,e,i.grainWidth,i.grainHeight)}return a.toDataURL("image/png")},k=j(),l="",m=["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%"],n=h.length;n--;){l+="@"+h[n]+"keyframes grained{";for(var o=0;o<m.length;o++){var p=m[o].split(":");l+=p[0]+"{",l+=h[n]+"transform:translate("+p[1]+");",l+="}"}l+="}"}var q=b.getElementById("grained-animation");q&&q.parentElement.removeChild(q);var r=b.createElement("style");r.type="text/css",r.id="grained-animation",r.innerHTML=l,b.body.appendChild(r);var s=b.getElementById("grained-animation-"+f);s&&s.parentElement.removeChild(s),r=b.createElement("style"),r.type="text/css",r.id="grained-animation-"+f,b.body.appendChild(r);var t="background-image: url("+k+");";if(t+='position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;',n=h.length,i.animate)for(;n--;)t+=h[n]+"animation-name:grained;",t+=h[n]+"animation-iteration-count: infinite;",t+=h[n]+"animation-duration: "+i.grainChaos+"s;",t+=h[n]+"animation-timing-function: steps("+i.grainSpeed+", end);";g="#"+f+"::before",d(r.sheet,g,t)}a.grained=c}(window,document);
index.html
+57 -57
View File
@@ -1,58 +1,58 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title> <title></title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script> <script type="text/javascript" src="https://unpkg.com/external-svg-loader@latest/svg-loader.min.js" async></script>
</head> </head>
<body> <body>
<div id="content"> <div id="content">
<!-- deux svg pour pouvoir utiliser mix blend mode avec les histoires de stacking context --> <!-- deux svg pour pouvoir utiliser mix blend mode avec les histoires de stacking context -->
<svg id="stroke" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257"> <svg id="stroke" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
<path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z"> <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
</path> </path>
</svg> </svg>
<svg id="fill" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257"> <svg id="fill" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-8697.766 17429.18 677.183 706.257">
<path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z"> <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
</path> </path>
</svg> </svg>
<div id="buttons_container"> <div id="buttons_container">
<!-- svg dans object pour pouvoir les manipuler avec css --> <!-- svg dans object pour pouvoir les manipuler avec css -->
<div class="mode active"> <div class="mode active">
<svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
<p>Terrain de vie</p> <p>Terrain de vie</p>
</div> </div>
<div class="mode"> <div class="mode">
<svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
<p>Proximité</p> <p>Proximité</p>
</div> </div>
<div class="mode"> <div class="mode">
<svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
<p>Superposition</p> <p>Superposition</p>
</div> </div>
<div class="mode"> <div class="mode">
<svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
<p>Puissance d'agir</p> <p>Puissance d'agir</p>
</div> </div>
<div class="mode"> <div class="mode">
<svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/action.svg" data-cache="disabled"></svg>
<p>Action</p> <p>Action</p>
</div> </div>
<div class="mode"> <div class="mode">
<svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg> <svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
<p>Doléancer</p> <p>Doléancer</p>
</div> </div>
</div> </div>
<div id="BG_BG_BG"></div> <div id="BG_BG_BG"></div>
<div id="BG_BG_BG_tmp"></div> <div id="BG_BG_BG_tmp"></div>
</div> </div>
<div id="grain-bg"></div> <div id="grain-bg"></div>
<script src="grained/grained.js" defer></script> <script src="grained/grained.js" defer></script>
<script src="background.js" defer></script> <script src="background.js" defer></script>
</body> </body>
</html> </html>
styles.scss
+152 -152
View File
@@ -1,153 +1,153 @@
/* mix blend mode est dépendant du stacking context */ /* mix blend mode est dépendant du stacking context */
@font-face { @font-face {
font-family: 'Public'; font-family: 'Public';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType'); src: url('assets/fonts/PublicSans-Regular.ttf') format('TrueType');
} }
@font-face { @font-face {
font-family: 'Public'; font-family: 'Public';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType'); src: url('assets/fonts/PublicSans-Light.ttf') format('TrueType');
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-family: 'Public', sans-serif; font-family: 'Public', sans-serif;
font-weight: 400; font-weight: 400;
} }
#content { #content {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1; z-index: 1;
svg { svg {
width: 30%; width: 30%;
height: auto; height: auto;
path { path {
cursor: pointer; cursor: pointer;
} }
} }
svg#fill { svg#fill {
fill: white; fill: white;
mix-blend-mode: overlay; mix-blend-mode: overlay;
opacity: 0.6; opacity: 0.6;
} }
svg#stroke { svg#stroke {
position: absolute; position: absolute;
fill: none; fill: none;
stroke: black; stroke: black;
stroke-width: 1px; stroke-width: 1px;
} }
#buttons_container { #buttons_container {
position: absolute; position: absolute;
bottom: 5vh; bottom: 5vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1; z-index: 1;
.mode { .mode {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: white; background-color: white;
margin: 0px 10px; margin: 0px 10px;
padding: 7px 15px; padding: 7px 15px;
padding-left: 10px; padding-left: 10px;
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;
border: solid 0.8px rgba(0, 0, 0, 0.5); border: solid 0.8px rgba(0, 0, 0, 0.5);
transition: border 0.4s ease-in-out; transition: border 0.4s ease-in-out;
font-weight: 300; font-weight: 300;
font-size: 1rem; font-size: 1rem;
svg { svg {
width: 28px; width: 28px;
height: auto; height: auto;
margin-right: 10px; margin-right: 10px;
.thick { .thick {
transition: stroke-width 0.2s ease-in-out; transition: stroke-width 0.2s ease-in-out;
stroke-width: 0.8; stroke-width: 0.8;
stroke: black; stroke: black;
} }
.thin { .thin {
transition: stroke-width 0.2s ease-in-out; transition: stroke-width 0.2s ease-in-out;
stroke-width: 0.5; stroke-width: 0.5;
stroke: black; stroke: black;
} }
} }
p { p {
height: fit-content; height: fit-content;
margin-bottom: 3px; margin-bottom: 3px;
} }
} }
.mode.active { .mode.active {
font-weight: 400; font-weight: 400;
border: solid 1.2px rgba(0, 0, 0, 1); border: solid 1.2px rgba(0, 0, 0, 1);
svg .thick { svg .thick {
stroke-width: 1.2; stroke-width: 1.2;
stroke: black; stroke: black;
} }
svg .thin { svg .thin {
stroke-width: 0.6; stroke-width: 0.6;
stroke: black; stroke: black;
} }
} }
} }
#BG_BG_BG { #BG_BG_BG {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: -1; z-index: -1;
opacity: 1; opacity: 1;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
#BG_BG_BG_tmp { #BG_BG_BG_tmp {
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: -2; z-index: -2;
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
} }
#grain-bg { #grain-bg {
position: absolute !important; position: absolute !important;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
} }
#grain-bg > * { #grain-bg > * {
position: relative; position: relative;
} }