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

tarpin bien

Browse Source
This commit is contained in:
Yanis Rigaudeau
2025-07-01 01:23:31 +02:00
parent f321e6fe37
commit de8448ccdb
4 changed files with 77 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.css
View File

@ -2,6 +2,7 @@ body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
overflow: hidden;
} }
div.container { div.container {
@ -16,9 +17,20 @@ div.container {
animation: rainbow 6s linear infinite; animation: rainbow 6s linear infinite;
} }
img#sun {
cursor: pointer;
filter: drop-shadow(12px 12px 12px rgba(0, 0, 0, 0.5));
transition: 0.3s ease;
}
img#sun:hover {
filter: drop-shadow(36px 36px 12px rgba(0, 0, 0, 0.3));
transform: scale(1.05) skew(4deg, -3deg);
}
video { video {
display: flex; display: none;
margin: 200px; margin: 300px;
max-width: 1920px; max-width: 1920px;
width: 100%; width: 100%;
height: auto; height: auto;

7
index.html
View File

@ -12,12 +12,15 @@
<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> <body id="body">
<div class="container"> <div class="container">
<video autoplay controls> <img id="sun" src="soleil.png" />
<video>
<source src="tarpinchaud.webm" type="video/webm"> <source src="tarpinchaud.webm" type="video/webm">
</video> </video>
</div> </div>
<script src="index.js" type="text/javascript"></script>
</body> </body>
</html> </html>

57
index.js Normal file
View File

@ -0,0 +1,57 @@
const body = document.getElementById('body')
const media = document.querySelector("video");
const sun = document.getElementById('sun')
let saturation = 1;
let freq = 1000;
let gain = 0;
let audioSource = null;
let filter = null;
function showVideo() {
sun.style.display = 'none';
media.style.display = 'flex';
}
function hideVideo() {
sun.style.display = 'flex';
media.style.display = 'none';
}
function increaseValues() {
saturation += 1;
gain += 5;
freq += 1000;
}
function createFilter() {
if (audioSource === null) {
const context = new AudioContext();
audioSource = context.createMediaElementSource(media);
filter = context.createBiquadFilter();
audioSource.connect(filter);
filter.connect(context.destination);
filter.type = "lowshelf";
}
return filter;
}
sun.addEventListener('click', (event) => {
event.preventDefault();
const filter = createFilter();
filter.frequency.value = freq;
filter.gain.value = gain;
showVideo();
media.play();
media.style.filter = `saturate(${saturation})`;
increaseValues();
})
media.addEventListener('ended', () => {
hideVideo();
media.currentTime = 0;
})

BIN
soleil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB