Cloud Moving Animation Tutorial using HTML and CSS

hello guys uh in this video we are going to design this web page with this uh moving Cloud effect so let's start with the coding so I have uh this index.html page and the CSS and there's a image folder so inside this image folder I have all this images like all the cloud images so those are PNG images and for this background we'll be having this image okay so let's start with the HTML now we'll link the external CSS file in this image in this HTML file okay so now uh we'll be adding two blocks so this block will be having these uh images and all these cloud and this uh block will be having this content so let's add a main container and inside this container we'll be having two more containers the first container is having the class name is Banner or container one and the next uh block we be having container 2 class okay so first we will Design This uh container one this part and after that we'll be designing the container two so let's start so margin is uh 0 pixel and padding will be 0 pixel and the family for the complete uh web page using okay so we'll start with the container one so let's add the background image first so this is the background image so let's add it so inside the image folder I have that image available which is this so the background image size would be cover and withd 100% height 50% height and uh the background position would be Center so let's see how it looks for okay so first we need to give the container should be width 100% and height should be 100 vertical height so that's why it was not coming so now you can see we have this available so let's uh increase the height of this uh container one it would be 60% okay it looks fine now so let's add the clouds okay first We'll add this one the banner text so inside this uh container one lad h2 tag so let's add the style for this H2 so the container one position would be relative because we'll be using uh absolute position for H2 top would be 50% because we want to place it in the center top 50% and left also 50% and the transform translation - 50% - 50% so now if you see it will come here okay so let's change the color of this we put set index 99 and color would be white okay so till this part we are fine so now we'll be adding the all the clouds so for the Cloud will be at One D element so let's give a name of the class Cloud so inside we'll be having how many images we have I think I have five images Okay so let's add five image tag five image tag The Source let's add the source image and Cloud one so I'll be changing the name Cloud 2 3 4 and five so all the clouds uh I'll be adding one variable and the value would be 1 [Music] 2 3 four and five so let's uh design the cloud okay so inside this uh Cloud class so let's uh over overflow be hidden Cloud so let's add the animation first so let's give a name of that animation CLD any any name if you want then you can give let's s the calculation so this is the variable which we have declare inside uh to the all the image tag so linear infinite let's add the opacity 6 the max width of all the images would be 100% And position absolute bottom 0 pixel so let's add the key frame so this would be the name of the cloud uh IMM so when it's 0% the transform translation X would be minus 100% And when it's 100% then transform translate X would be 100% so let let's see our Cloud should start moving okay now it's moving and all the different different animations um times are getting applied to the different different images because we have added this calculation which is getting multiplied with 8 seconds and uh this value of this variable we are getting from this uh here inside the image tag we have Define 1 2 3 4 5 okay so till this part we have done this part and now let's design this so we'll we can copy and paste all these things from this dummy page okay so for this um the second container let's add one H4 tag let's paste it and one P tag or this container two let's give a width be 60% and margin 20 Piel Auto so let's see how it looks okay I think it would be 50% so design the header now what is the tag we have used it's a H4 so text align will be Center and color is gray and font size is 18 pixel and for the down text let's copy the whole thing instead of H4 we'll be using p and size will be 14 pixel color will it light or dark or light it should not be Center so let's check how it looks okay so here we have some line height so let's add the line height 20 pixel 20 pixels little less so we need to increase the line height let's try with 25 and okay so the line has be 25% pixel and uh let's add B think of 20 pixel okay so our page is ready so it looks exactly not exactly same to same but it's 90% same okay so if you want the code uh codebase so I'll push the code base in the get and I provide the link in the description if you want then you can pull the code and you can use in your real project or you can uh put some more elements or you can put more Styles so if you like this video then please subscribe this channel [Music] oh [Music]

Channel: CodeOrCode

Views: 211

Keywords: css animation examples, css animation, css animation projects, css animation tutorial, css cloud animation, cloud animation video, cloud animation css, cloud animation background, cloud animation images

Id: UfbXh3TZ0Ls

Length: 12min 34sec (754 seconds)

Published: Fri Jun 21 2024