JavaScript to achieve slow motion animation effect

JavaScript to achieve slow motion animation effect

This article shares the specific code for JavaScript to achieve slow-motion animation effects for your reference. The specific content is as follows

Implementation ideas

1. Mainly use the setInterval timing function
2. Add absolute positioning and offset to the element that needs animation, and note that its parent element should be relatively positioned
3. To perform animation on multiple elements, you can encapsulate the animation code into a function
4. The element calls the timing function and moves at a fixed time. In the timing function, the formula for calculating the distance of each move is: var step = (target - obj.offsetLeft) / 20;
obj animation object, target target left offset, 20 controls the animation speed, the larger the value, the slower, the smaller the value, the faster
5. The timing function can also receive a callback function. If there is one, the callback function will be executed when the animation ends.
6. Note that the code to clear the animation should be written at the beginning of the timing function - - -clearInterval(obj.timer); if not, the effect will be superimposed each time the element animation is triggered; write the code to clear the previous animation effect

Code Sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aninamate animation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .content {
            width: 1000px;
            margin: 0 auto;
        }
        
        button {
            padding: 5px;
            margin: 60px 10px;
            border: 1px solid #666;
            outline-color: palevioletred;
        }
        
        .both {
            background-color: pink;
            color: #fff;
            background-color: palevioletred;
        }
        
        .box {
            position: relative;
            height: 210px;
            margin: 0px auto;
            background-color: #191b28;
        }
        
        .yutu {
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 210px;
        }
        
        .qiaojingjing
            position: absolute;
            top: 0;
            left: 820px;
            width: 180px;
            height: 210px;
        }
        
        .word1 {
            display: none;
            position: absolute;
            top: -50px;
            left: 45%;
        }
        
        .word2 {
            display: none;
            position: absolute;
            top: -30px;
            left: 50%;
        }
    </style>
</head>

<body>
    <div class="content">
        <button class="btn1">Move forward on the road</button>
        <button class="btn2">Qiao Jingjing goes forward</button>
        <button class="both">Run in both directions</button>
        <button class="btn3">Back on the way</button>
        <button class="btn4">Qiao Jingjing back</button>
        <div class="box">
            <img src="images/于途.png" alt="" class="yutu">
            <img src="images/乔晶晶.png" alt="" class="qiaojingjing">
            <span class="word1">Please give me your guidance for the rest of my life! </span>
            <span class="word2">Please give me your guidance for the rest of my life! </span>
        </div>
    </div>

    <script>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        var btn4 = document.querySelector('.btn4');
        var both = document.querySelector('.both');
        var yutu = document.querySelector('.yutu');
        var qiaojingjing = document.querySelector('.qiaojingjing');
        var word1 = document.querySelector('.word1');
        var word2 = document.querySelector('.word2');


        btn1.addEventListener('click', function() {
            animate(yutu, 340, function() {
                word1.style.display = 'block';
            });
        });

        btn2.addEventListener('click', function() {
            animate(qiaojingjing, 520, function() {
                word2.style.display = 'block';
            });
        });
        btn3.addEventListener('click', function() {
            animate(yutu, 0, function() {
                word1.style.display = 'none';
            });
        });

        btn4.addEventListener('click', function() {
            animate(qiaojingjing, 820, function() {
                word2.style.display = 'none';
            });
        });

        both.addEventListener('click', function() {
            animate(yutu, 340);
            animate(qiaojingjing, 520);
            word1.style.display = 'block';
            word2.style.display = 'block';

        });


        // animation function obj animation object, target target left offset, callback callback function function animate(obj, target, callback) {
            // Clear the previous animation clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // Calculate the distance of each move var step = (target - obj.offsetLeft) / 20;
                // Round the number of steps step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style.left = obj.offsetLeft + step + 'px';

                if (obj.offsetLeft == target) {
                    // Stop animation clearInterval(obj.timer);
                    // If there is a callback function, execute the callback function if (callback) {
                        callback();
                    }
                }

            }, 30);
        }
    </script>
</body>

</html>

Animation effects:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JavaScript implements left and right slow animation function
  • Encapsulation method of JavaScript slow motion animation function
  • js to achieve slow motion animation
  • JavaScript to achieve slow motion animation
  • Tween.js easing tween animation algorithm example
  • js realizes the navigation bar effect with slow animation
  • JavaScript explains the encapsulation and use of slow-motion animation

<<:  How to dynamically modify the replication filter in mysql

>>:  Docker data volume common operation code examples

Recommend

MySQL 8.0.18 Hash Join does not support left/right join left and right join issues

In MySQL 8.0.18, a new Hash Join function was add...

How to deploy Tencent Cloud Server from scratch

Since this is my first post, if there are any mis...

Solution to CSS anchor positioning being blocked by the top fixed navigation bar

Many websites have a navigation bar fixed at the ...

Several ways to improve the readability of web pages

1. Use contrasting colours. The contrast here ref...

15 Linux Command Aliases That Will Save You Time

Preface In the process of managing and maintainin...

Detailed explanation of how to gracefully delete a large table in MySQL

Preface To delete a table, the command that comes...

Implementation of element shuttle frame performance optimization

Table of contents background Solution New Questio...

The principle and implementation of js drag effect

The drag function is mainly used to allow users t...

VMware Workstation is not compatible with Device/Credential Guard

When installing a virtual machine, a prompt appea...

Illustration of properties such as offsetWidth, clientWidth, scrollWidth, scrollTop, scrollLeft, etc.

Note 1: The entire background in the above pictur...

MySQL uninstall and install graphic tutorial under Linux

This is my first time writing a blog. I have been...

How to change MySQL character set utf8 to utf8mb4

For MySQL 5.5, if the character set is not set, t...

Detailed explanation of CSS margin overlap and solution exploration

I recently reviewed some CSS-related knowledge po...

How to hide the text in the a tag and display the image? Compatible with 360 mode rendering

Often you will encounter a style of <a> tag ...

Detailed analysis of the MySQL slow log opening method and storage format

In development projects, we can monitor SQL with ...