How to transition scenes with clouds like the video below. In the language CSS JS

https://www.mobox.io/

https://i.imgur.com/4ja61Q4.mp4

CodePudding user response：

By using css properties that change and css transition effects you can re-create this effect.

I made this with position fixed, but you could use the same with position:absolute, or any other styles you want to change that can be used in css transitions.

You could add a trigger for on on click of a button that a class is added that triggers the transition, or the hover effect I display in the snippet below.

:root {
   --height: 100px;
   --width: 200px;
}

.cloud {
   transition-timing-function: ease-in;
   transition: all 2s;
   background: white;
   opacity: 0.3;
   border-radius:14px;
   width: var(--width);
   height: var(--height);
   position: fixed;
   top: calc(50vh - (var(--width) / 2) );
   left: calc(50vw - (var(--height) / 2) );
}
.wrap {
background: skyblue;
width: 100vw;
height: 100vh;
padding: 0px;
top:0px;
left:0px;
}

.wrap:hover #cloud1 {   
    top: calc(0px - (var(--width) / 2));
}
.wrap:hover #cloud2 {   
    left: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud3 {   
    left: calc(0px - (var(--width) / 2));
    top: calc(0px - (var(--height) / 2));
}
.wrap:hover #cloud4 {   
    left: calc(100vw - (var(--width) / 2));
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud5 {   
    top: calc(100vh - (var(--width) / 2));
}
.wrap:hover #cloud6 {   
    left: calc(100vw - (var(--width) / 2));
}

<div >
<div  id="cloud3">

</div>
<div  id="cloud2">

</div>
<div  id="cloud1">

</div>
<div  id="cloud4">

</div>
<div  id="cloud5">

</div>
<div  id="cloud6">

</div>
</div>