126 lines
4.4 KiB
JavaScript
126 lines
4.4 KiB
JavaScript
// 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%)
|
|
`; |