zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

clouds fix

Browse Source
This commit is contained in:
zojgame
2024-07-26 17:37:51 +05:00
parent 527794e826
commit fcbce355ed
2 changed files with 124 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/masterplanPage/map/Clouds.tsx
+122 -16
View File
@@ -11,41 +11,49 @@ function Clouds() {
return (
<div
className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-[150vw] left-[-150vw]
className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
"
style={{
transform: "rotate(125deg)",
opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
}}
>
<div
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation`}
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
>
<img
src="/images/clouds/cloud-1.png"
alt=""
className="scale-[0.6] absolute top-0 left-[50%]"
className="scale-[0.6] absolute top-[2%] left-[50%] "
/>
<img
src="/images/clouds/cloud-12.png"
alt=""
className="scale-[0.6] absolute top-[5%] left-[20%] "
/>
<img
src="/images/clouds/cloud-2.png"
alt=""
className="scale-[0.6] absolute top-[20%] left-[10%]"
className="scale-[0.6] absolute top-[3%] left-[10%] "
/>
<img
src="/images/clouds/cloud-3.png"
alt=""
className="scale-[0.6] absolute top-[30%] left-[45%]"
className="scale-[0.6] absolute top-[25%] left-[45%] "
/>
<img
src="/images/clouds/cloud-4.png"
alt=""
className="scale-[0.6] absolute top-[32%] left-[48%] "
/>
<img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
<img
src="/images/clouds/cloud-5.png"
alt=""
className="scale-[0.6] absolute top-[50%] left-[15%] "
className="scale-[0.6] absolute top-[55%] left-[15%] "
/>
<img
src="/images/clouds/cloud-6.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[25%] "
className="scale-[0.6] absolute top-[65%] left-[25%] "
/>
<img
src="/images/clouds/cloud-7.png"
@@ -59,33 +67,42 @@ function Clouds() {
/>
</div>
<div
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
>
<img
src="/images/clouds/cloud-1.png"
alt=""
className="scale-[0.6] absolute top-0 left-[50%]"
className="scale-[0.6] absolute top-[2%] left-[50%] "
/>
<img
src="/images/clouds/cloud-12.png"
alt=""
className="scale-[0.6] absolute top-[5%] left-[20%] "
/>
<img
src="/images/clouds/cloud-2.png"
alt=""
className="scale-[0.6] absolute top-[20%] left-[10%]"
className="scale-[0.6] absolute top-[3%] left-[10%] "
/>
<img
src="/images/clouds/cloud-3.png"
alt=""
className="scale-[0.6] absolute top-[30%] left-[45%]"
className="scale-[0.6] absolute top-[25%] left-[45%] "
/>
<img
src="/images/clouds/cloud-4.png"
alt=""
className="scale-[0.6] absolute top-[32%] left-[48%] "
/>
<img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
<img
src="/images/clouds/cloud-5.png"
alt=""
className="scale-[0.6] absolute top-[50%] left-[15%] "
className="scale-[0.6] absolute top-[55%] left-[15%] "
/>
<img
src="/images/clouds/cloud-6.png"
alt=""
className="scale-[0.6] absolute top-[35%] left-[25%] "
className="scale-[0.6] absolute top-[65%] left-[25%] "
/>
<img
src="/images/clouds/cloud-7.png"
@@ -99,6 +116,95 @@ function Clouds() {
/>
</div>
</div>
// <div
// className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-[150vw] left-[-150vw]
// "
// style={{
// transform: "rotate(125deg)",
// opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
// }}
// >
// <div
// className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation`}
// >
// <img
// src="/images/clouds/cloud-1.png"
// alt=""
// className="scale-[0.6] absolute top-0 left-[50%]"
// />
// <img
// src="/images/clouds/cloud-2.png"
// alt=""
// className="scale-[0.6] absolute top-[20%] left-[10%]"
// />
// <img
// src="/images/clouds/cloud-3.png"
// alt=""
// className="scale-[0.6] absolute top-[30%] left-[45%]"
// />
// <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
// <img
// src="/images/clouds/cloud-5.png"
// alt=""
// className="scale-[0.6] absolute top-[50%] left-[15%] "
// />
// <img
// src="/images/clouds/cloud-6.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[25%] "
// />
// <img
// src="/images/clouds/cloud-7.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[30%] "
// />
// <img
// src="/images/clouds/cloud-8.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[80%] "
// />
// </div>
// <div
// className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
// >
// <img
// src="/images/clouds/cloud-1.png"
// alt=""
// className="scale-[0.6] absolute top-0 left-[50%]"
// />
// <img
// src="/images/clouds/cloud-2.png"
// alt=""
// className="scale-[0.6] absolute top-[20%] left-[10%]"
// />
// <img
// src="/images/clouds/cloud-3.png"
// alt=""
// className="scale-[0.6] absolute top-[30%] left-[45%]"
// />
// <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
// <img
// src="/images/clouds/cloud-5.png"
// alt=""
// className="scale-[0.6] absolute top-[50%] left-[15%] "
// />
// <img
// src="/images/clouds/cloud-6.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[25%] "
// />
// <img
// src="/images/clouds/cloud-7.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[30%] "
// />
// <img
// src="/images/clouds/cloud-8.png"
// alt=""
// className="scale-[0.6] absolute top-[35%] left-[80%] "
// />
// </div>
// </div>
);
}
client/src/index.css
+2 -2
View File
@@ -55,10 +55,10 @@ body {
@keyframes infiniter {
from {
transform: translateX(0%);
transform: translateX(-100%);
}
to {
transform: translateX(-100%);
transform: translateX(0%);
}
}
/* @keyframes infiniter {