fbpx
April 6, 2020
javascript animation

JAVASCRIPT ANIMATION | How to Add Animation with JavaScript

In this tutorial we will be looking at JavaScript animation which entails how to add animations to web pages using JavaScript codes. In our previous tutorial we discussed about JavaScript form validation and we looked at the different ways to validate forms using JavaScript. If you haven’t gone through the tutorial, you can do so using the link below

Read previous tutorial on: JAVASCRIPT – FORM VALIDATION

JAVASCRIPT ANIMATION

Just like using the html and css animations, we can as well add some simple animations to web pages using javascript. This animations can be achieved using proper logical equation or function. Example of animations we can add to web pages using javascript include

  • Fading Effect
  • Page-in and Page-out
  • Object movements
  • Roll-in and Roll-out

Some of the functions we have in javascript that can help us in timing animations include:

  • setTimeout- This inbuilt function can be used to call a function after a setting time in milliseconds.
  • setInterval- This inbuilt function calls a function repeatedly after a setting time in milliseconds.
  • clearTimeout- this function is used to clear or stop any timer that was initially set by the setTimeout function

BUTTON CLICK MANUAL ANIMATION

The below example shows how an image colored element is moved from a position to another by the click of a button.

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    .bodyimage{
        height: 150px;
        background-color: black;
        width: 150px;
        color: cornsilk;
    }
    </style>
    <script type="text/javascript">
    var bgImg;
    function imageInit(){
        bgImg = document.getElementById("theImage");
        bgImg.style.position= 'relative'; 
        bgImg.style.left = '3px'; 
    }
    function moveRight() {
        bgImg.style.left = parseInt(bgImg.style.left) + 10 + 'px';
            }
            window.onload = imageInit;
    </script>
    <title> MANUAL ANIMATION</title>
</head>
<body>
    
    <div id = "theImage" class="bodyimage"   > THE IMAGE   </div>
    <input type="button"  value="click to move" onclick="moveRight()">
</body>
</html>

Please try this code on your text editor

RESULT

MANUAL ANIMATION
THE IMAGE

BUTTON CLICK AUTOMATED ANIMATION

The below example shows how the same image element is been moved from one position to another using a single click and the help of the setTimeout() inbuilt JavaScript function.

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
    .bodyimage{
        height: 150px;
        background-color: black;
        width: 150px;
        color: cornsilk;
    }
    </style>
    <script type="text/javascript">
    var bgImg;
    function imageIniti(){
        bgImg = document.getElementById("theImage");
        bgImg.style.position= 'relative'; 
        bgImg.style.left = '3px'; 
    }
    function moveRighti() {
        bgImg.style.left = parseInt(bgImg.style.left) + 10 + 'px';
        dAnimation = setTimeout(moveRighti,30);
            }
            window.onload = imageIniti;
    </script>
    <title> MANUAL ANIMATION</title>
</head>
<body>
    
    <div id = "theImage" class="bodyimage"   > THE IMAGE   </div>
    <input type="button"  value="click to move" onclick="moveRighti()">
</body>
</html>

please run this code on your text editor.

NEXT TOPIC: JAVASCRIPT DEBUGGING

Leave a Reply

Your email address will not be published. Required fields are marked *