banquise/website-front
13
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

cleaning2

Browse Source
This commit is contained in:
Arthur Wambst 2025-04-15 16:42:09 +02:00
parent a2df496bf6
commit c61072934e
7 changed files with 0 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
la-banquise/src/WaterBackground.css
View File

@ -1,38 +0,0 @@
.water-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #007aff; /* Couleur de base de l'eau */
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 200px;
background: rgba(255, 255, 255, 0.4); /* Couleur des vagues */
border-radius: 50%;
animation: wave-animation 5s infinite linear;
}
.wave:nth-child(2) {
animation-delay: 2s;
}
.wave:nth-child(3) {
animation-delay: 4s;
}
@keyframes wave-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

15
la-banquise/src/WaterBackground.jsx
View File

@ -1,15 +0,0 @@
import React from 'react';
import './WaterBackground.css';
const WaterBackground = () => {
return (
<div className="water-background">
<div className="wave"></div>
<div className="wave"></div>
<div className="wave"></div>
</div>
);
};
export default WaterBackground;

42
la-banquise/src/WaterSurface.css
View File

@ -1,42 +0,0 @@
.water-surface {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #007aff; /* Couleur de base de l'eau */
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 20px;
background: rgba(255, 255, 255, 0.3); /* Couleur des vagues avec transparence */
border-radius: 50%;
animation: wave-animation 5s infinite linear;
}
.wave1 {
animation-delay: 0s;
}
.wave2 {
animation-delay: 1.5s;
}
.wave3 {
animation-delay: 3s;
}
@keyframes wave-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

15
la-banquise/src/WaterSurface.jsx
View File

@ -1,15 +0,0 @@
import React from 'react';
import './WaterSurface.css';
const WaterSurface = () => {
return (
<div className="water-surface">
<div className="wave wave1"></div>
<div className="wave wave2"></div>
<div className="wave wave3"></div>
</div>
);
};
export default WaterSurface;

38
la-banquise/src/Wavelets.css
View File

@ -1,38 +0,0 @@
.wavelets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none; /* Pour éviter les interactions avec les vaguelettes */
}
.wavelet {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: rgba(255, 255, 255, 0.2); /* Couleur des vaguelettes avec transparence */
border-radius: 50%;
animation: wavelet-animation 3s infinite linear;
}
.wavelet:nth-child(2) {
animation-delay: 1s;
}
.wavelet:nth-child(3) {
animation-delay: 2s;
}
@keyframes wavelet-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

15
la-banquise/src/Wavelets.jsx
View File

@ -1,15 +0,0 @@
import React from 'react';
import './Wavelets.css';
const Wavelets = () => {
return (
<div className="wavelets">
<div className="wavelet"></div>
<div className="wavelet"></div>
<div className="wavelet"></div>
</div>
);
};
export default Wavelets;

34
la-banquise/src/components/OceanFoam.jsx
View File

@ -1,34 +0,0 @@
import React from 'react';
const OceanFoam = () => {
return (
<svg
className="absolute bottom-0 left-0 w-full h-32 animate-wave"
viewBox="0 0 1440 320"
preserveAspectRatio="none"
>
<path
fill="#ffffff"
fillOpacity="0.3"
d="M0,160 C360,240 1080,80 1440,160 L1440,320 L0,320 Z"
/>
<style jsx>{`
.animate-wave {
animation: waveFoam 6s ease-in-out infinite alternate;
}
@keyframes waveFoam {
0% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(5px) scaleY(1.02);
}
}
`}</style>
</svg>
);
};
export default OceanFoam;