Make Website With Animation | HTML CSS Jquery Tutorial | Animation Effect In HTML Website

Make Website With Animation | HTML CSS Jquery Tutorial | Animation Effect In HTML Website


welcome back to the new video of easy
tutorials and today in this video you will see how to create a beautiful
animation using HTML CSS and a small code of JavaScript as you can see on my
computer screen here we have one drone image which is moving around this web
page. You can see when I’m moving the cursor around this web page this drone
image is moving according to the cursor movement. So this effect will look very
beautiful on your web page. So before starting this tutorial, I will request
you to please hit the like button and also subscribe if you are new on my
channel. Nnow let’s start this video. First you can see I have one folder here and
in this folder I have some images and one HTML file and one CSS file. I will
give all the images link in the description so that you can also try
this. Let me open my text editor which is ‘Brackets’, So this is my HTML file and
this one is CSS file you can see I have already connected the HTML file with CSS
with this line of code. Now I will come to the body tag and here I will create
one “div”, for this I am adding one ID also so the ID is
banner. Let’s copy this ID and add it into this CSS file, first we’ll write
width it will be 100% and height 100 VH viewport height, position it will be
absolute then background image and here I am adding linear gradient to add one
dark layer over this image so this is the black color with 0.5% opacity and
the second one is also same then URL and your image file name so my
image file name is pic.jpg then I will add background position it will be
Center next background size it will be cover save all these changes and open
your HTML file with Google Chrome now you can see this background image
and a dark layer over it on this webpage let’s come back to the HTML file and
here we’ll create one div and this time I’m adding ID name drone-box and in this
box we’ll add one image so I am using IMG source and the file name which is
drone PNG save these changes and refresh the webpage now you can see this big
image over this webpage let’s copy this ID and come to the CSS file add it here
for this one we’ll add margin 150 pixels from top and bottom and auto from left
and right transition 2 seconds and width 200
pixels and position it will be relative here we’ll add one class name for this
image so class name I am writing drone pic let’s copy this class name and write
it into the CSS file so for this class name I will add width 100% let me remove
this transition for now that’s it save these changes and reload the page then
you can see a small image on this web page now we have to add drone wings
image so come back to the HTML file and duplicate this line of code for two
times so the second file image drone left dot PNG and the class name left pic and the third one is drone right and the
class name is right pic so now we have two other images also let me copy the
first class name left pic and add it into this CSS file for this image I will
write width 80 pixels and top zero left – 11 pixel and position it will be
absolute let’s duplicate this one and change the class name right pic this
time we’ll change the left to right that’s it and refresh the webpage you
can see this wings image for this drone now we have to rotate this wings so
again come back to the CSS file and here we will add animation
rotation 0.2 seconds linear infinite just copy and paste it into the second
one also that’s it now we’ll write keyframes for this animation right key
frames then rotation and here we’ll add 100% transform rotate y 360 degree just
save these changes and refresh the webpage now you can see this drone wings images
is rotating now we have to move the complete drone using mouse movement for
that just come to Google and search for jQuery CDN open the first link then
click on this link minified copy this code and add it into your HTML file so
we’ll add it here in head tag just remove this part it is not required now
come to the bottom just above this closing body tag and we’ll write a
script open and close tag and in this tag will write dollar and
then copy this ID write it here then I am adding dot mouse
move and function e next we’ll add here Var move x equals e.PageX into -1 / 2 plus I am adding 300 let’s
duplicate this one and here you change move Y here also page Y and this one I
will change to 1 / 3 and this one I will change 120 now right dollar and just copy this for
drone box write it here then I’ll add dot CSS and in this CSS will add transform translate3d then copy this one and add it here within plus icon pixels then copy this one and paste it here change it to Y then 0 for z-axis just save all these
changes and reload the webpage now you can see as I am moving the cursor around
this webpage this drone image is also moving according to the cursor movement
right now it is not very smooth for that we have to add one transition so come
back to the CSS file and here we’ll write translation 2 seconds so after reloading this page
you can see this drone is moving smoothly on this webpage according to
the cursor movement when I am taking cursor in the left side this drone is
moving in the right side and when I will take cursor to the top it will move
towards bottom so it was very easy to add this type of effect on your website
if you have any doubt you can ask me in the comment section I hope this video
will be helpful for you – if so please hit the like button and also subscribe
my channel easy tutorials thank you so much for watching this video till the
end

23 thoughts on “Make Website With Animation | HTML CSS Jquery Tutorial | Animation Effect In HTML Website

  1. Bro we want more animation like this.. You didn't use plugins that's y Im requesting you create more videos with Javascript but not with any js plugins..

  2. I wished you would explain everything. You just went ahead doing a particular project, but you didn't explain the concepts behind what you were doing.

    I do understand this is not a beginners video, but it'll be nice if you can explain what those functions does do one can know how to apply them and try creating something different, maybe a moving car :).

Leave a Reply

Your email address will not be published. Required fields are marked *