├── README.md ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Moving-Car 2 | Car Moving Animation Using HTML, CSS & JavaScript Only... 3 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var audio = document.createElement('audio'); 2 | audio.setAttribute('src', 'https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Audio/sound.mp3'); 3 | audio.loop=true; 4 | audio.play(); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Moving Car 12 | 13 | 14 | 15 | 18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | 6 | body { 7 | overflow: hidden; 8 | } 9 | 10 | .sky { 11 | position: absolute; 12 | width: 100%; 13 | background-image: url("https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Images/movingcar/background.jpg"); 14 | height: 100vh; 15 | background-repeat: no-repeat; 16 | background-size: cover; 17 | } 18 | 19 | .tree { 20 | width: 100%; 21 | position: absolute; 22 | top: -148px; 23 | background-image: url("https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Images/movingcar/trees.png"); 24 | height: 100vh; 25 | background-repeat: no-repeat; 26 | background-size: cover; 27 | } 28 | 29 | .track { 30 | width: 800vw; 31 | background-image: url("https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Images/movingcar/track.png"); 32 | background-repeat: repeat-x; 33 | height: 60vh; 34 | position: absolute; 35 | top: 70%; 36 | animation: trackMove linear 10s infinite; 37 | } 38 | 39 | .car { 40 | left: 24%; 41 | background-repeat: no-repeat; 42 | background-image: url('https://zerooctave.co/ZeroOctave-Javascript-Projects/assets/Images/movingcar/car_body.png'); 43 | width: 400px; 44 | height: 200px; 45 | background-size: contain; 46 | position: absolute; 47 | top: 58%; 48 | animation: shake linear 0.8s infinite; 49 | } 50 | 51 | .wheel1 img { 52 | position: relative; 53 | width: 88px; 54 | top: 34px; 55 | left: 42px; 56 | animation: rotate linear 0.2s infinite; 57 | } 58 | 59 | .wheel2 img { 60 | position: relative; 61 | width: 96px; 62 | left: 242px; 63 | bottom: 58px; 64 | animation: rotate linear 0.2s infinite; 65 | } 66 | 67 | @keyframes rotate { 68 | 100% { 69 | transform: rotate(360deg); 70 | } 71 | } 72 | 73 | @keyframes trackMove { 74 | 100% { 75 | transform: translateX(-500vw); 76 | } 77 | } 78 | 79 | @keyframes shake { 80 | 0% { 81 | transform: translateY(-6px); 82 | } 83 | 84 | 50% { 85 | transform: translateY(6px); 86 | } 87 | 88 | 100% { 89 | transform: translateY(-6px); 90 | } 91 | } --------------------------------------------------------------------------------