Click effect using JS and HTML5

Click effect using JS and HTML5

1590588999_click_effect_blog.jpg

This is totally about click animation by JavaScript.

You have been watching button animation on Twitter, Facebook, Instagram, and so on.

Mostly, all click effect is working in order to JavaScript and CSS.

In this article, I am using JavaScript CDN of Mo.js

You can use 8 main shapes.

  1. Circle
  2. Line
  3. Zigzag
  4. Rect
  5. Polygon
  6. Cross
  7. Equal
  8. Curve

 

1590584533_all_shape_module.jpg

 

Basically, This click effect works based on the Shape module and Burst module animation kinds of stuff.

The Shape Module is the main thing of click layouts. It is displaying the border of click effect. Which would possibly to a circle, line curve, or anything from 8 shapes.

Shape Module Example

1590579862_shape_module.jpg

<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
    <script>
        const circle = new mojs.Shape({
            left:0,
            top:0,
            strokeWidth: 8,
            fill: 'none',
            radius: 80,
            scale: {0:1},
            opacity: {10:0},
            shape: 'circle',
            stroke:'#5386E4',
            strokeWidth:8,
            fill:'none',
            duration:500,
        });

        document.onclick = (e) => {
            const position = {
                x: e.pageX,
                y: e.pageY
            }

            circle.tune(position);
            circle.replay();

        }
    </script>

 

The Burst Module is the motion effect. This is working in round shape; however, you can also use it as a particular part of the click sides. In one single bust module you can use many shapes on there with different parameters and colors.

You can also use different Burst Modules in one main Shape Module.

Burst Module Example 1

1590580565_burst_effect_1.png

<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
    <script>

        const burst = new mojs.Burst({
            count:10,
            left:0,
            top:0,
            children:{
                shape:['circle', 'rect', 'curve', 'polygon'],
                fill:['yellow', 'red', 'green', 'blue'],
                degreeShift:'rand(-360, 360)',
                delay: 'stagger(0, 30)'
            },
            duration:400
        });

        document.onclick = (e) => {
            const position = {
                x: e.pageX,
                y: e.pageY
            }
            burst.tune(position);
            burst.replay();

        }
    </script>

 

Burst Module Example 2

1590580835_burst_effect_2.png

<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
    <script>
        const bang = new mojs.Burst({
            left:0,
            top:0,
            radius:{2:40},
            angle:45,
            count:8,
            children:{
                radius:8,
                fill:'orange',
                scale:{1:0, easing:'sin.in'},
                pathScale:[0.7, null],
                duration:[500, 700],
                degreeShift:[13, null],
            }
        });

        document.onclick = (e) => {
            const position = {
                x: e.pageX,
                y: e.pageY
            }
            bang.tune(position);
            bang.replay();

        }
    </script>

 

The full code of click effect is here.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Effect</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
    <script>
        const circle = new mojs.Shape({
            left:0,
            top:0,
            strokeWidth: 8,
            fill:'none',
            radius:80,
            scale:{0:1},
            opacity:{10:0},
            shape:'circle',
            // shape:'line',
            // shape:'rect',
            // shape:'polygon',
            // shape:'curve',
            // shape:'zigzag',
            // shape:'cross',
            // shape:'equal',
            stroke:'pink',
            strokeWidth:8,
            fill:'none',
            duration:500,
        });

        const burst = new mojs.Burst({
            count:10,
            left:0,
            top:0,
            children:{
                shape:['circle', 'rect', 'curve', 'polygon'],
                fill:['yellow', 'red', 'green', 'blue'],
                degreeShift:'rand(-360, 360)',
                delay: 'stagger(0, 30)'
            },
            duration:400
        });

        const bang = new mojs.Burst({
            left:0,
            top:0,
            radius:{2:40},
            angle:45,
            count:8,
            children:{
                radius:8,
                fill:'orange',
                scale:{1:0, easing:'sin.in'},
                pathScale:[0.7, null],
                duration:[500, 700],
                degreeShift:[13, null],
            }
        });

        document.onclick = (e) => {
            const position = {
                x: e.pageX,
                y: e.pageY
            }

            circle.tune(position);
            circle.replay();
            burst.tune(position);
            burst.replay();
            bang.tune(position);
            bang.replay();

        }
    </script>
</body>
</html>

 

You can see in this video how it is working.

Leave your comment

Your comment has been sent. Thank you!
We'll never share your email with anyone else.