IN this post You will learn how to create Pikachu animation using HTML,CSS and JAVASCRIPT.
The steps are given below:
HTML CODE
<html><head>
<title> PIKACHU ANIMATON</title>
</head>
<body>
canvas.pika(width=550 height=550)
</body>
</html>
- <CANVAS >TAG : This is width attribute specifies the width of <canvas> element ,in pixels.
- Use the height attribute to specify the height of <canvas> element , in pixel.
- Each time the height or width of a canvas is reset.The< canvas> tag is new in HTML 5.
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin: 0;
background: radial-gradient(#fff 0%, skyblue 50%);
}
canvas {
background: transparent;
}
what is css
- CSS stands for cascading stylesheets.
- CSS described how to HTML elements are to be displayed on screen ,paper or in other media
- CSS save much time of work it can control the layout of multiple web pages all at once.
- Inline css
- Internal css or embedded css.
- External css.
- An inline CSS is used to apply a unique style to a single HTML element
- INLINE CSS uses the style attribute of an HTML element.
INTERNAL CSS
An internal CSS define in the <head > section of HTML page with in a style element.
EXTERNAL CSS
- To use an external style sheet , add link to it in the <head> section of HTML page:
- An external stylesheet can be written in any text editor . The file must not contain any HTML code, and must be saved with a . CSS extension.
CSS HISTORY
Hakon Wium lie proposed the concept of css with tim -Berner in 1994. The first CSS released as official w3c on 17 December 1996.
CSS 2 It Became a W3C recommendation in may 1998 and build and on css1 this version add support for media specific style sheet
CSS 3
It became a w3C recommendation june 1999 and builds on older version CSS.
JAVA SCRIPT CODE(js)
const yellow = '#FAD61D';
const orange = '#FAC61D';
const black = '#000';
const red = '#F62D14';
const pink = '#FF67B0';
const bodyFill = yellow;
const shadowFill = orange;
const darkFill = black;
const blushFill = red;
const tongueFill = pink;
let isSpinning = true;
const randy = (min, max) => Math.random() * (max - min) + min;
const pika = new Zdog.Illustration({
element: '.pika',
dragRotate: true,
onDragStart: function() {
isSpinning = false;
},
onDragEnd: function() {
console.log(`
pika.rotate.x = ${pika.rotate.x};
pika.rotate.y = ${pika.rotate.y};
pika.rotate.z = ${pika.rotate.z};
`);
}
});
const head = new Zdog.Shape({
addTo: pika,
stroke: 150,
color: shadowFill,
translate: {
y: -45,
z: 25
}
});
const torso = new Zdog.Shape({
addTo: pika,
stroke: 180,
color: bodyFill,
translate: {
y: 65
}
});
const armL = new Zdog.Shape({
addTo: pika,
stroke: 55,
color: bodyFill,
translate: {
y: 76,
x: 66
},
rotate: {
z: 20
},
path: [
{ x: -40 },
{ x: 40 }
]
});
const armR = armL.copy({
addTo: pika,
translate: {
y: 20,
x: -72
},
rotate: {
z: -30.25,
}
});
const eyeL = new Zdog.Ellipse({
addTo: head,
color: darkFill,
diameter: 20,
quarters: 2,
stroke: 5,
translate: {
x: 30,
y: 0,
z: 65
},
rotate: {
z: -33,
y: 9
}
});
const eyeR = eyeL.copy({
addTo: head,
translate: {
x: -30,
y: 0,
z: 66
},
rotate: {
z: -33,
y: -9
}
});
const blushL = new Zdog.Cylinder({
addTo: head,
diameter: 30,
length: 12,
color: blushFill,
translate: {
x: 42,
y: 25,
z: 58
},
rotate: {
y: -0.75,
x: -0.25
}
});
const blushR = blushL.copy({
addTo: head,
translate: {
x: -42,
y: 25,
z: 58
},
rotate: {
y: 0.75,
x: -0.5
}
});
const mouth = new Zdog.Ellipse({
addTo: head,
diameter: 20,
quarters: 2,
stroke: 12,
color: darkFill,
closed: true,
translate: {
y: 30,
z: 62,
},
rotate: {
x: 8.75,
z: 11
}
});
const nose = new Zdog.Polygon({
addTo: head,
radius: 3,
sides: 3,
stroke: 8,
color: darkFill,
translate: {
x: 0,
y: 8,
z: 73,
},
rotate: {
z: 45
}
});
const earL = new Zdog.Ellipse({
addTo: head,
width: 10,
height: 100,
stroke: 30,
color: shadowFill,
translate: {
y: -85,
x: -70
},
rotate: {
z: -0.35
}
});
const earR = earL.copy({
addTo: head,
translate: {
y: -60,
x: 70
},
rotate: {
z: 1.35
}
});
const tailAnchor = new Zdog.Anchor({
addTo: torso,
translate: { x: -60 },
rotate: { y: -120 }
});
const tail = new Zdog.Shape({
addTo: tailAnchor,
closed: true,
stroke: 10,
color: shadowFill,
fill: true,
translate: {
x: 150
},
path: [
{ x: -40, y: -28 },
{ x: 5, y: -30 },
{ x: -5, y: -75 },
{ arc: [
{ x: 10, y: -90, z: 0 },
{ x: 50, y: -90, z: 0 }
]},
{ x: 25, y: -165 },
{ arc: [
{ x: 65, y: -185, z: 0 },
{ x: 155, y: -195, z: 0 }
]},
{ arc: [
{ x: 150, y: -120, z: 0 },
{ x: 140, y: -110, z: 0 }
]},
{ arc: [
{ x: 85, y: -120, z: 0 },
{ x: 85, y: -120, z: 0 }
]},
{ arc: [
{ x: 90, y: -80, z: 0 },
{ x: 80, y: -65, z: 0 }
]},
{ arc: [
{ x: 50, y: -65, z: 0 },
{ x: 30, y: -55, z: 0 }
]},
{ x: 30, y: -10 },
{ x: -30, y: -9 },
],
});
function animate() {
if (isSpinning) {
const i = 0.03;
// pika.rotate.x += i;
pika.rotate.y += i;
// pika.rotate.z += i;
}
pika.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
WHAT IS JAVA SCRIPT
JAVA SCRIPT is first appeared December 4, 1995. Designed by Brendan Eich , stable release ECMA script june 2018. java script is multi- paradigm , standard built in objects and methods its syntax based on the java and c language many structure from those java script.
it is a scripting language . It is dynamic language
APPLICATION OF JAVASCRIPT
Java script is used for developed interactive website use for:
Client -side validation.
dynamic drop -down - menus
display date and timedisplaying pop-up windows and dialog box confirm dialog box and prompt dialog box.
displaying clocks.
create animation using java script.
0 comments: