yanis/meteorance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better

Browse Source
This commit is contained in:
Yanis Rigaudeau
2025-07-01 02:03:36 +02:00
parent cd9e188740
commit af4e3b0c88
3 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.css
View File

@ -14,7 +14,7 @@ div.container {
background: background:
linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) 0 0/100% 200%; linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%, rgba(63, 218, 216, 1) 40%, rgba(47, 201, 226, 1) 50%, rgba(28, 127, 238, 1) 60%, rgba(95, 21, 242, 1) 70%, rgba(186, 12, 248, 1) 80%, rgba(251, 7, 217, 1) 90%, rgba(255, 0, 0, 1) 100%) 0 0/100% 200%;
animation: rainbow 6s linear infinite; animation: rainbow 10s linear infinite;
} }
img#sun { img#sun {
@ -28,7 +28,7 @@ img#sun:hover {
transform: scale(1.05) skew(4deg, -3deg); transform: scale(1.05) skew(4deg, -3deg);
} }
video { video#video {
display: none; display: none;
margin: 300px; margin: 300px;
max-width: 1920px; max-width: 1920px;
@ -37,7 +37,7 @@ video {
border-radius: 24px; border-radius: 24px;
transform: scale(0.9) rotate(0deg); transform: scale(0.9) rotate(0deg);
box-shadow: 12px 12px 12px 12px rgba(0, 0, 0, 0.5); box-shadow: 12px 12px 12px 12px rgba(0, 0, 0, 0.5);
animation: 3s ease-in-out 1s alternate infinite scale; animation: 5s ease-in 1s alternate infinite scale;
} }
@keyframes scale { @keyframes scale {

4
index.html
View File

@ -12,10 +12,10 @@
<meta property="og:description" content="La Météo Rance (fé chaud)" /> <meta property="og:description" content="La Météo Rance (fé chaud)" />
</head> </head>
<body id="body"> <body>
<div class="container"> <div class="container">
<img id="sun" src="soleil.png" /> <img id="sun" src="soleil.png" />
<video> <video id="video">
<source src="tarpinchaud.webm" type="video/webm"> <source src="tarpinchaud.webm" type="video/webm">
</video> </video>
</div> </div>

14
index.js
View File

@ -1,8 +1,6 @@
const body = document.getElementById('body') const media = document.getElementById("video");
const media = document.querySelector("video");
const sun = document.getElementById('sun') const sun = document.getElementById('sun')
let audioSource = null;
let filter = null; let filter = null;
let saturation = 1; let saturation = 1;
@ -26,22 +24,22 @@ function increaseValues() {
} }
function createFilter() { function createFilter() {
if (audioSource === null) { if (filter === null) {
const context = new AudioContext(); const context = new AudioContext();
audioSource = context.createMediaElementSource(media); const audioSource = context.createMediaElementSource(media);
filter = context.createBiquadFilter(); filter = context.createBiquadFilter();
audioSource.connect(filter); audioSource.connect(filter);
filter.connect(context.destination); filter.connect(context.destination);
filter.type = "lowshelf"; filter.type = "lowshelf";
} }
return filter;
} }
sun.addEventListener('click', (event) => { sun.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
const filter = createFilter(); createFilter();
filter.frequency.value = freq; filter.frequency.value = freq;
filter.gain.value = gain; filter.gain.value = gain;