Hello, guys today we will learn how to make a Superman Voice Command Animation using HTML CSS, and JavaScript, So let’s get started.
First, we need to create three files index.html, Style.css and a file for JavaScript code (Custom.js) then we need to do code for Superman —>
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html>
<head>
<title>SuperMan Animation With Voice Command</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="superman-scroll.css">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<h4 style="color: #fff;" id="result"></h4>
<section id="hero-man-section">
<h1 class="superman-text">Superman</h1>
</section>
<div class='wrapper'>
<div class='super-man-wrapper'>
<div class='superman'>
<img src='images/superman.png'>
<div class="flame-leg">
</div>
</div>
</div>
<div class='shadow'></div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below text.
body,
html {
background: #000000;
height: 100%;
margin: 0;
overflow: hidden;
position: relative;
height: 100vh;
font-family: 'Bree Serif', serif;
}
h1{
margin: 0;
font-size: 80px;
-webkit-background-clip: text;
color: rgba(0,0,0,0.08);
animation: zoomout 10s ease-in-out 1000ms infinite;
}
section#hero-man-section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1.superman-text {
background: url(images/super-man.jpg);
background-size: 450%;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-clip: text;
}
.superman > img {
width: 100%;
}
@keyframes zoomout {
from {
background-size: 450%;
}
to {
background-size: 0%;
}
}
.superman {
cursor: pointer;
}
.super-man-wrapper.active {
animation-duration: 10s;
-webkit-animation-duration: 10s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-name: flyAway;
-webkit-animation-name: flyAway;
}
.super-man-wrapper {
bottom: 20px;
margin: auto;
position: absolute;
right: 0;
left: 0;
height: 198px;
margin: auto;
width: 161px;
z-index: 2;
}
.shadow {
bottom: 0;
margin: auto;
position: absolute;
right: 0;
left: 0;
background-color: #444;
border-radius: 50%;
bottom: -17px;
height: 30px;
width: 161px;
z-index: 1;
animation-duration: 10s;
-webkit-animation-duration: 10s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-name: shadow;
-webkit-animation-name: shadow;
}
.flame-leg {
background: rgb(124,64,0);
background: linear-gradient(98deg, rgba(124,64,0,1) 0%, rgba(255,94,0,1) 50%, rgba(255,214,0,1) 100%);
border-bottom-right-radius: 50% 75%;
border-bottom-left-radius: 50% 75%;
border-top-left-radius: 20% 20%;
border-top-right-radius: 20% 20%;
box-shadow: 0px 2px 2px 1px rgba(255,94,0,1);
height: 25px;
opacity: 0;
position: absolute;
width: 10px;
z-index: 1;
animation-duration: 10s;
-webkit-animation-duration: 10s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
left: 68px;
bottom: -35px;
}
.flame-leg.active {
animation-name: flicker-3;
-webkit-animation-name: flicker-3;
}
h4#result {
position: fixed;
top: 0;
width: 100%;
text-align: center;
}
@keyframes flicker-3 {
0% {
opacity: 0;
}
27% {
opacity: 0;
}
28% {
opacity: 1;
transform: rotate(0deg);
}
29% {
transform: rotate(5deg);
}
29.5% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg);
}
30.5% {
transform: rotate(-5deg);
}
31% {
transform: rotate(5deg);
}
31.5% {
transform: rotate(-5deg);
}
32% {
transform: rotate(5deg);
}
32.5% {
transform: rotate(-5deg);
}
33% {
transform: rotate(5deg);
}
33.5% {
transform: rotate(-5deg);
}
34% {
transform: rotate(5deg);
}
34.5% {
transform: rotate(-5deg);
}
35% {
transform: rotate(5deg);
}
35.5% {
transform: rotate(-5deg);
}
36% {
transform: rotate(5deg);
}
36.5% {
transform: rotate(-5deg);
}
37% {
transform: rotate(5deg);
}
37.5% {
transform: rotate(-5deg);
}
38% {
transform: rotate(5deg);
}
38.5% {
transform: rotate(-5deg);
}
39% {
transform: rotate(5deg);
}
39.5% {
transform: rotate(-5deg);
}
40% {
transform: rotate(5deg);
}
40.5% {
transform: rotate(-5deg);
}
41% {
transform: rotate(5deg);
}
41.5% {
transform: rotate(-5deg);
}
42% {
transform: rotate(5deg);
}
42.5% {
transform: rotate(-5deg);
}
43% {
transform: rotate(5deg);
}
43.5% {
transform: rotate(-5deg);
}
44% {
transform: rotate(5deg);
}
44.5% {
transform: rotate(-5deg);
}
45% {
transform: rotate(5deg);
}
45.5% {
transform: rotate(-5deg);
}
46% {
transform: rotate(5deg);
}
46.5% {
transform: rotate(-5deg);
}
47% {
transform: rotate(5deg);
}
47.5% {
transform: rotate(-5deg);
}
48% {
transform: rotate(5deg);
}
48.5% {
transform: rotate(-5deg);
}
49% {
transform: rotate(5deg);
}
49.5% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
50.5% {
transform: rotate(-5deg);
}
51% {
transform: rotate(5deg);
}
51.5% {
transform: rotate(-5deg);
}
52% {
transform: rotate(5deg);
}
52.5% {
transform: rotate(-5deg);
}
53% {
transform: rotate(5deg);
}
53.5% {
transform: rotate(-5deg);
}
54% {
transform: rotate(5deg);
}
54.5% {
transform: rotate(-5deg);
}
55% {
transform: rotate(5deg);
}
55.5% {
transform: rotate(-5deg);
}
56% {
transform: rotate(5deg);
}
56.5% {
transform: rotate(-5deg);
}
57% {
transform: rotate(5deg);
}
57.5% {
transform: rotate(-5deg);
}
58% {
transform: rotate(5deg);
}
58.5% {
transform: rotate(-5deg);
}
59% {
transform: rotate(5deg);
}
59.5% {
transform: rotate(-5deg);
}
60% {
transform: rotate(5deg);
}
60.5% {
transform: rotate(-5deg);
}
61% {
transform: rotate(5deg);
}
61.5% {
transform: rotate(-5deg);
}
62% {
transform: rotate(5deg);
}
62.5% {
transform: rotate(-5deg);
}
63% {
transform: rotate(5deg);
}
63.5% {
transform: rotate(-5deg);
}
64% {
transform: rotate(5deg);
}
64.5% {
transform: rotate(-5deg);
}
65% {
transform: rotate(5deg);
}
65.5% {
transform: rotate(-5deg);
}
66% {
transform: rotate(5deg);
}
66.5% {
transform: rotate(-5deg);
}
67% {
transform: rotate(5deg);
}
67.5% {
transform: rotate(-5deg);
}
68% {
transform: rotate(5deg);
}
68.5% {
transform: rotate(-5deg);
}
69% {
transform: rotate(5deg);
}
69.5% {
transform: rotate(-5deg);
}
70% {
transform: rotate(5deg);
}
70.5% {
transform: rotate(-5deg);
}
71% {
transform: rotate(5deg);
}
71.5% {
transform: rotate(-5deg);
}
72% {
transform: rotate(5deg);
}
72.5% {
transform: rotate(-5deg);
}
73% {
transform: rotate(5deg);
}
73.5% {
transform: rotate(-5deg);
}
74% {
transform: rotate(5deg);
}
74.5% {
transform: rotate(-5deg);
}
30.3% {
transform: scaleY(0.7);
}
29.3% {
transform: scaleY(1);
}
32.3% {
transform: scaleY(1.4);
}
31.3% {
transform: scaleY(1.1);
}
34.3% {
transform: scaleY(0.6);
}
33.3% {
transform: scaleY(0.9);
}
36.3% {
transform: scaleY(1.1);
}
35.3% {
transform: scaleY(1.5);
}
38.3% {
transform: scaleY(1.3);
}
37.3% {
transform: scaleY(0.6);
}
40.3% {
transform: scaleY(0.9);
}
39.3% {
transform: scaleY(0.9);
}
42.3% {
transform: scaleY(1);
}
41.3% {
transform: scaleY(1.3);
}
44.3% {
transform: scaleY(1.5);
}
43.3% {
transform: scaleY(0.8);
}
46.3% {
transform: scaleY(1.4);
}
45.3% {
transform: scaleY(1);
}
48.3% {
transform: scaleY(1.2);
}
47.3% {
transform: scaleY(0.8);
}
50.3% {
transform: scaleY(0.9);
}
49.3% {
transform: scaleY(0.7);
}
52.3% {
transform: scaleY(1);
}
51.3% {
transform: scaleY(1.2);
}
54.3% {
transform: scaleY(0.6);
}
53.3% {
transform: scaleY(1.3);
}
56.3% {
transform: scaleY(1.4);
}
55.3% {
transform: scaleY(1);
}
58.3% {
transform: scaleY(1.3);
}
57.3% {
transform: scaleY(0.9);
}
60.3% {
transform: scaleY(1.1);
}
59.3% {
transform: scaleY(0.8);
}
62.3% {
transform: scaleY(0.7);
}
61.3% {
transform: scaleY(0.7);
}
64.3% {
transform: scaleY(1.2);
}
63.3% {
transform: scaleY(0.8);
}
66.3% {
transform: scaleY(1.3);
}
65.3% {
transform: scaleY(0.6);
}
68.3% {
transform: scaleY(1.4);
}
67.3% {
transform: scaleY(1.5);
}
70.3% {
transform: scaleY(1);
}
69.3% {
transform: scaleY(1.4);
}
72.3% {
transform: scaleY(1.1);
}
71.3% {
transform: scaleY(1.2);
}
74.3% {
transform: scaleY(0.7);
}
73.3% {
transform: scaleY(0.6);
}
80% {
transform: rotate(0deg);
opacity: 1;
}
81% {
opacity: 0;
}
}
@-webkit-keyframes flicker-3 {
0% {
opacicty: 0;
}
27% {
opacity: 0;
}
28% {
opacity: 1;
transform: rotate(0deg);
}
29% {
transform: rotate(5deg);
}
29.5% {
transform: rotate(-5deg);
}
30% {
transform: rotate(5deg);
}
30.5% {
transform: rotate(-5deg);
}
31% {
transform: rotate(5deg);
}
31.5% {
transform: rotate(-5deg);
}
32% {
transform: rotate(5deg);
}
32.5% {
transform: rotate(-5deg);
}
33% {
transform: rotate(5deg);
}
33.5% {
transform: rotate(-5deg);
}
34% {
transform: rotate(5deg);
}
34.5% {
transform: rotate(-5deg);
}
35% {
transform: rotate(5deg);
}
35.5% {
transform: rotate(-5deg);
}
36% {
transform: rotate(5deg);
}
36.5% {
transform: rotate(-5deg);
}
37% {
transform: rotate(5deg);
}
37.5% {
transform: rotate(-5deg);
}
38% {
transform: rotate(5deg);
}
38.5% {
transform: rotate(-5deg);
}
39% {
transform: rotate(5deg);
}
39.5% {
transform: rotate(-5deg);
}
40% {
transform: rotate(5deg);
}
40.5% {
transform: rotate(-5deg);
}
41% {
transform: rotate(5deg);
}
41.5% {
transform: rotate(-5deg);
}
42% {
transform: rotate(5deg);
}
42.5% {
transform: rotate(-5deg);
}
43% {
transform: rotate(5deg);
}
43.5% {
transform: rotate(-5deg);
}
44% {
transform: rotate(5deg);
}
44.5% {
transform: rotate(-5deg);
}
45% {
transform: rotate(5deg);
}
45.5% {
transform: rotate(-5deg);
}
46% {
transform: rotate(5deg);
}
46.5% {
transform: rotate(-5deg);
}
47% {
transform: rotate(5deg);
}
47.5% {
transform: rotate(-5deg);
}
48% {
transform: rotate(5deg);
}
48.5% {
transform: rotate(-5deg);
}
49% {
transform: rotate(5deg);
}
49.5% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
50.5% {
transform: rotate(-5deg);
}
51% {
transform: rotate(5deg);
}
51.5% {
transform: rotate(-5deg);
}
52% {
transform: rotate(5deg);
}
52.5% {
transform: rotate(-5deg);
}
53% {
transform: rotate(5deg);
}
53.5% {
transform: rotate(-5deg);
}
54% {
transform: rotate(5deg);
}
54.5% {
transform: rotate(-5deg);
}
55% {
transform: rotate(5deg);
}
55.5% {
transform: rotate(-5deg);
}
56% {
transform: rotate(5deg);
}
56.5% {
transform: rotate(-5deg);
}
57% {
transform: rotate(5deg);
}
57.5% {
transform: rotate(-5deg);
}
58% {
transform: rotate(5deg);
}
58.5% {
transform: rotate(-5deg);
}
59% {
transform: rotate(5deg);
}
59.5% {
transform: rotate(-5deg);
}
60% {
transform: rotate(5deg);
}
60.5% {
transform: rotate(-5deg);
}
61% {
transform: rotate(5deg);
}
61.5% {
transform: rotate(-5deg);
}
62% {
transform: rotate(5deg);
}
62.5% {
transform: rotate(-5deg);
}
63% {
transform: rotate(5deg);
}
63.5% {
transform: rotate(-5deg);
}
64% {
transform: rotate(5deg);
}
64.5% {
transform: rotate(-5deg);
}
65% {
transform: rotate(5deg);
}
65.5% {
transform: rotate(-5deg);
}
66% {
transform: rotate(5deg);
}
66.5% {
transform: rotate(-5deg);
}
67% {
transform: rotate(5deg);
}
67.5% {
transform: rotate(-5deg);
}
68% {
transform: rotate(5deg);
}
68.5% {
transform: rotate(-5deg);
}
69% {
transform: rotate(5deg);
}
69.5% {
transform: rotate(-5deg);
}
70% {
transform: rotate(5deg);
}
70.5% {
transform: rotate(-5deg);
}
71% {
transform: rotate(5deg);
}
71.5% {
transform: rotate(-5deg);
}
72% {
transform: rotate(5deg);
}
72.5% {
transform: rotate(-5deg);
}
73% {
transform: rotate(5deg);
}
73.5% {
transform: rotate(-5deg);
}
74% {
transform: rotate(5deg);
}
74.5% {
transform: rotate(-5deg);
}
30.3% {
transform: scaleY(1.1);
}
29.3% {
transform: scaleY(1.2);
}
32.3% {
transform: scaleY(1.3);
}
31.3% {
transform: scaleY(0.9);
}
34.3% {
transform: scaleY(0.7);
}
33.3% {
transform: scaleY(0.8);
}
36.3% {
transform: scaleY(1);
}
35.3% {
transform: scaleY(1.4);
}
38.3% {
transform: scaleY(1.2);
}
37.3% {
transform: scaleY(1.2);
}
40.3% {
transform: scaleY(1);
}
39.3% {
transform: scaleY(1.5);
}
42.3% {
transform: scaleY(1.2);
}
41.3% {
transform: scaleY(1.5);
}
44.3% {
transform: scaleY(1.4);
}
43.3% {
transform: scaleY(1.5);
}
46.3% {
transform: scaleY(1.3);
}
45.3% {
transform: scaleY(0.8);
}
48.3% {
transform: scaleY(1);
}
47.3% {
transform: scaleY(0.6);
}
50.3% {
transform: scaleY(0.6);
}
49.3% {
transform: scaleY(1.3);
}
52.3% {
transform: scaleY(0.7);
}
51.3% {
transform: scaleY(0.9);
}
54.3% {
transform: scaleY(1.4);
}
53.3% {
transform: scaleY(1.5);
}
56.3% {
transform: scaleY(1.2);
}
55.3% {
transform: scaleY(0.9);
}
58.3% {
transform: scaleY(0.8);
}
57.3% {
transform: scaleY(0.7);
}
60.3% {
transform: scaleY(1.5);
}
59.3% {
transform: scaleY(1.2);
}
62.3% {
transform: scaleY(1.1);
}
61.3% {
transform: scaleY(1);
}
64.3% {
transform: scaleY(0.7);
}
63.3% {
transform: scaleY(1);
}
66.3% {
transform: scaleY(0.7);
}
65.3% {
transform: scaleY(1.5);
}
68.3% {
transform: scaleY(1.1);
}
67.3% {
transform: scaleY(1.1);
}
70.3% {
transform: scaleY(1.4);
}
69.3% {
transform: scaleY(1.1);
}
72.3% {
transform: scaleY(1.5);
}
71.3% {
transform: scaleY(1);
}
74.3% {
transform: scaleY(1.4);
}
73.3% {
transform: scaleY(1.1);
}
80% {
transform: rotate(0deg);
opacity: 1;
}
81% {
opacity: 0;
}
}
@keyframes flyAway {
0% {
transform: translateY(0%);
}
27% {
transform: translateY(0%);
}
50% {
transform: translateY(-400%);
}
80% {
transform: translateY(0%);
}
}
@-webkit-keyframes flyAway {
0% {
transform: translateY(0%);
}
27% {
transform: translateY(0%);
}
50% {
transform: translateY(-400%);
}
80% {
transform: translateY(0%);
}
}
Step:3
Then we need to add code for our javaScript file (custom.js) which code i provide in below text.
var result = document.getElementById('result');
function startConverting () {
if('webkitSpeechRecognition' in window) {
var speechRecognizer = new webkitSpeechRecognition();
speechRecognizer.continuous = true;
speechRecognizer.interimResults = true;
speechRecognizer.lang = 'en-US';
speechRecognizer.start();
var finalTranscripts = '';
speechRecognizer.onresult = function(event) {
var interimTranscripts = '';
for(var i = event.resultIndex; i < event.results.length; i++){
var transcript = event.results[i][0].transcript;
transcript.replace("\n", "<br>");
if(event.results[i].isFinal) {
finalTranscripts += transcript;
}else{
interimTranscripts += transcript;
}
}
result.innerHTML = finalTranscripts + '<span style="color: #999">' + interimTranscripts + '</span>';
var getresult = jQuery(result).text();
jQuery("#result:contains('clear')").text('');;
if (getresult == "help Superman") {
$(".super-man-wrapper").addClass("active");
$(".flame-leg").addClass("active");
}else {
$(".super-man-wrapper").removeClass("active");
$(".flame-leg").removeClass("active");
}
};
speechRecognizer.onerror = function (event) {
};
}else {
result.innerHTML = 'Your browser is not supported. Please download Google chrome or Update your Google chrome!!';
}
}
$(window).on('load', function(){
startConverting();
});