This content originally appeared on DEV Community and was authored by Subhransu Patra
<p>Hello</p>
<p>Merry Christmas</p>
Previous Chapter Chapter 2 (Part 2)
Inform Our World Link here
Animation with js? Not too much tough but if you are new to javascript, like me, then at first it would be a little bit difficult but with time, you would be coping up with it. So, lets start the topic of 'Animate on click with Javascript!'
First create a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate on click with Javascript!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
Then add any tag such as <a> or <p>. It is upto you which tag you will use to animate...
<p>Hello World!</p>
Here I used <p> tag. Then create an id="" for it. Let's name it just p. You can use anything...
<p id="p">Hello World!</p>
Then we need a button so that if we clicked on it, it would animate as per our needs...
<button>Click to Animate</button>
then in the <button> tag add onclick="". It is very much essential for onclick animation.
<button onclick="beyblade()">Click to Animate</button>
I have put beyblade() in onclick="". () is very much essential...
Then add <script> in the body...
<script>
</script>
and in that add
<script>
function beyblade() {
}
</script>
The text after function will be the one you have written in onclick="" i.e. I have written onclick="beyblade()", the same I will write after function i.e.
function beyblade() {
}
So, let's take the element that we take be x. So to do this, implement..
<script>
function beyblade() {
let x = document.getElementById("p")
}
</script>
then add the following component...
<script>
function beyblade() {
let x = document.getElementById("p")
x.style.marginLeft = "300px"
x.style.transition = "1s"
}
</script>
x.style.transition will create transitions and 1s will create timing for it.
You can implement any css component in place of marginLeft such as x.style.color = red it will change the text color to red and x.style.backgroundColor = blue will change the background color to blue.
It helps us to create a hamburger menu also.
So, this is for today. I hope you liked the article and if you, then please notify me.
Full Code..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animate on click with Javascript!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<p id="p">Hello World!</p>
<button onclick="beyblade()">Click to Animate</button>
<script>
function beyblade() {
let x = document.getElementById("p")
x.style.marginLeft = "300px"
x.style.transition = "1s"
}
</script>
</body>
</html>
Thanks for your time. 😺
This content originally appeared on DEV Community and was authored by Subhransu Patra
Subhransu Patra | Sciencx (2021-12-25T05:06:17+00:00) Animate on click with Javascript!. Retrieved from https://www.scien.cx/2021/12/25/animate-on-click-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.