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 ( return (
<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] className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
" "
style={{ style={{
transform: "rotate(125deg)",
opacity: `${Math.abs(mapScale - 0.5) * 200}%`, opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
}} }}
> >
<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 <img
src="/images/clouds/cloud-1.png" src="/images/clouds/cloud-1.png"
alt="" 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 <img
src="/images/clouds/cloud-2.png" src="/images/clouds/cloud-2.png"
alt="" alt=""
className="scale-[0.6] absolute top-[20%] left-[10%]" className="scale-[0.6] absolute top-[3%] left-[10%] "
/> />
<img <img
src="/images/clouds/cloud-3.png" src="/images/clouds/cloud-3.png"
alt="" 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 <img
src="/images/clouds/cloud-5.png" src="/images/clouds/cloud-5.png"
alt="" alt=""
className="scale-[0.6] absolute top-[50%] left-[15%] " className="scale-[0.6] absolute top-[55%] left-[15%] "
/> />
<img <img
src="/images/clouds/cloud-6.png" src="/images/clouds/cloud-6.png"
alt="" alt=""
className="scale-[0.6] absolute top-[35%] left-[25%] " className="scale-[0.6] absolute top-[65%] left-[25%] "
/> />
<img <img
src="/images/clouds/cloud-7.png" src="/images/clouds/cloud-7.png"
@@ -59,33 +67,42 @@ function Clouds() {
/> />
</div> </div>
<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 <img
src="/images/clouds/cloud-1.png" src="/images/clouds/cloud-1.png"
alt="" 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 <img
src="/images/clouds/cloud-2.png" src="/images/clouds/cloud-2.png"
alt="" alt=""
className="scale-[0.6] absolute top-[20%] left-[10%]" className="scale-[0.6] absolute top-[3%] left-[10%] "
/> />
<img <img
src="/images/clouds/cloud-3.png" src="/images/clouds/cloud-3.png"
alt="" 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 <img
src="/images/clouds/cloud-5.png" src="/images/clouds/cloud-5.png"
alt="" alt=""
className="scale-[0.6] absolute top-[50%] left-[15%] " className="scale-[0.6] absolute top-[55%] left-[15%] "
/> />
<img <img
src="/images/clouds/cloud-6.png" src="/images/clouds/cloud-6.png"
alt="" alt=""
className="scale-[0.6] absolute top-[35%] left-[25%] " className="scale-[0.6] absolute top-[65%] left-[25%] "
/> />
<img <img
src="/images/clouds/cloud-7.png" src="/images/clouds/cloud-7.png"
@@ -99,6 +116,95 @@ function Clouds() {
/> />
</div> </div>
</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 { @keyframes infiniter {
from { from {
transform: translateX(0%); transform: translateX(-100%);
} }
to { to {
transform: translateX(-100%); transform: translateX(0%);
} }
} }
/* @keyframes infiniter { /* @keyframes infiniter {