JSFiddle - React, Tailwind, and code Playground
HAML
.car_container
.default
.weather
.fume
.wheels
.neon
.bumper
.body
.windows
.roof
.glass
CSS
body {
background: #282b2f;
}
:root {
--buhanka: url('https://i.imgur.com/Wz3ftop.png');
}
.car_container {
width: 100px;
height: 50px;
margin: 100px auto;
position: relative;
background: #3b3b3b;
overflow: hidden;
}
.default,
.glass,
.roof,
.windows,
.body,
.bumper,
.neon,
.wheels,
.fume,
.weather {
position: absolute;
width: 1000px;
height: 500px;
background-image: var(--buhanka);
}
.glass {top: -50px; }
.roof {top: -100px;}
.windows {top: -150px;}
.body {top: -200px;}
.bumper {top: -250px;}
.neon {top: -300px;}
.wheels {top: -350px;}
.fume {top: -400px;}
.weather {top: -450px;}
JavaScript
var glass = document.querySelector('.glass');
var roof = document.querySelector('.roof');
var windows = document.querySelector('.windows');
var body = document.querySelector('.body');
var bumper = document.querySelector('.bumper');
var neon = document.querySelector('.neon');
var wheels = document.querySelector('.wheels');
var fume = document.querySelector('.fume');
var weather = document.querySelector('.weather');
var carRandColor = document.querySelector('.car_container');
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var leftValue = ["-100", "-200", "-300", "-400", "-500", "-600", "-700", "-800", "-900"];
function shuffle() {
glass.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
roof.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
windows.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
body.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
bumper.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
neon.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
wheels.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
fume.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
weather.style.left = parseInt(leftValue[Math.floor(Math.random() * leftValue.length)]) + "px";
carRandColor.style.background = getRandomColor();
}
setInterval(function() {
shuffle();
}, 5000);