How to transition scenes with clouds like the video below. In the language CSS JS
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 class="wrap">
<div class="cloud" id="cloud3">
</div>
<div class="cloud" id="cloud2">
</div>
<div class="cloud" id="cloud1">
</div>
<div class="cloud" id="cloud4">
</div>
<div class="cloud" id="cloud5">
</div>
<div class="cloud" id="cloud6">
</div>
</div>