How to transition scenes with clouds in css js

Question

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

user_1356107 · Answer

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));
}

How to transition scenes with clouds in css js

1 Answers