31 C
Gujarat
HomecssMoving Car Animation using CSS and JavaScript

Moving Car Animation using CSS and JavaScript

This is fun tutorial, we will see how you can animate a car with simple CSS and move it. We use plain HTML and CSS to animate our car. We animate roads, buildings and car wheels.We will learn how to drive a car with CSS and add more functionality using JavaScript like car sound.We are going to create this tutorial to understand how animation works.

You see online:

https://caranimatedusingcssandjs.netlify.app/

HTML Code

Moving Car Animation using  CSS and javascript :First we create our HTML file and then we add all the images using the HTML image tag. We have pictures of the wheels and car body.
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <link rel="stylesheet" href="style.css">  
   <script src="script.js"></script>  
   <link rel="icon" href="https://img.icons8.com/color/48/000000/lamborghini.png" type="image/x-icon">  
   <title>Car Animation</title>  
 </head>  
 <body>  
   <div class="container">  
     <div class="sky">  
       <div class="trees"></div>  
       <div class="track"></div>  
       <div class="car">  
         <div class="wheel wheel1">  
           <img src="car_wheel_left.png" alt="">  
         </div>  
         <div class="wheel wheel2">  
           <img src="car_wheel_right.png" alt="">  
         </div>  
       </div>  
     </div>  
   </div>  
 </body>  

</html>

css file

*{
    margin:0 ;
    padding: 0;
}
body{
    overflow: hidden;
    animation: shakebody linear 6s infinite;
    background-image: url(background.jpg);
}
.sky{
    height: 100vh;
    width: 100%;
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    position: absolute;
}
.trees{
    height: 100vh;
    width: 100%;
    background-image: url(trees.png);
    background-size: cover; 
    position: absolute;
    top: -144px; 
}
.track{
    height:60vh;
    width:800vw;
    background-image: url(track.png);
    position:absolute;
    top:70vh;
    background-repeat: repeat-x; 
    animation: carMove linear 13s infinite;
}
.car{
    height: 100px;
    width: 380px;
    background-image: url(car_body.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 444px;
    bottom:30vh;
    animation: shake linear .3s infinite;
}
.wheel1 img{
    width: 77px;
    position: relative;
    top:42px;
    left:42px;
    animation: wheelRotation linear .16s infinite;
}


.wheel2 img{
    width: 77px;
    position: relative;
    top: -39px;
    left: 235px;
    animation: wheelRotation linear .16s infinite;

}
@keyframes wheelRotation
{
    100%{
        transform: rotate(360deg);
    }
}
@keyframes carMove
{
    100%{
        transform: translateX(-500vw);
    }
}
@keyframes shake
{
    0%{
        transform: translateY(-5px);
    }
    50%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(-5px);
    }
}
@keyframes shakebody
{
    0%{
        transform: translateY(-50px);
    }
    50%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(-50px);
    }
}
@media only screen and (max-width: 768px) {
    .car{
        height: 50px;
        width: 190px;
        left: 180px;
        position: absolute;
    }
    .wheel1 img{
        width: 38.5px;
        position: relative;
        top:22px;
        left:22px;
    }.wheel2 img{
        width: 39px;
        position: relative;
        top: -21px;
        left: 115px;
    }
}

Javascript code

In javascript code we can add car sound 


var audio = document.createElement('audio');
audio.setAttribute('src', 'sound.mp3'); 
audio.loop=true;
audio.play();


Full source code:

https://github.com/patelrohan750/caranimated.github.io

RELATED ARTICLES

22 COMMENTS

  1. First off I would like to say excellent blog! I had a quick question that I’d like to ask if you do not mind.

    I was curious to find out how you center yourself and clear your
    thoughts prior to writing. I have had difficulty clearing my thoughts in getting my ideas out.
    I do take pleasure in writing but it just seems like the first 10 to 15 minutes are lost just trying to
    figure out how to begin. Any recommendations or hints? Thanks!

  2. I’m really impressed with your writing skills as
    well as with the layout on your weblog. Is this a paid theme or did you modify it
    yourself? Either way keep up the excellent quality writing, it is
    rare to see a great blog like this one these days.

  3. Hello, There’s no doubt that your blog may be having internet browser
    compatibility issues. When I take a look at your website
    in Safari, it looks fine however when opening in IE, it’s got some overlapping issues.

    I just wanted to provide you with a quick heads up!
    Other than that, excellent blog!

  4. I loved as much as you’ll receive carried out right here. The sketch is
    tasteful, your authored material stylish. nonetheless, you command get bought an shakiness over that you wish be delivering the following.
    unwell unquestionably come further formerly again as exactly the same
    nearly very often inside case you shield this hike.

  5. Excellent goods from you, man. I have bear in mind your stuff previous to and you’re just too great. I really like what you have acquired right here, really like what you’re stating and the best way during which you are saying it. You’re making it entertaining and you continue to care for to keep it smart. I can’t wait to read much more from you. That is actually a great web site.

  6. Hi there, simply was aware of your blog through Google, and located that it is really informative. I am gonna be careful for brussels. I will be grateful for those who proceed this in future. A lot of other folks will probably be benefited from your writing. Cheers!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15,000FansLike
5,000FollowersFollow
536FollowersFollow
- Advertisment -spot_img

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Most Popular