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

Stop using absolute equality operators everywhere in JS

JavaScript to achieve slow motion animation effect

Implementation ideas

Code Sample

Stop using absolute equality operators everywhere in JS

MySQL integrity constraints definition and example tutorial

Centos7.3 How to install and deploy Nginx and configure https

Deployment and configuration of Apache service under Linux

Steps to build MHA architecture deployment in MySQL

How to implement animation transition effect on the front end

Solution - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Insufficient permissions

A brief discussion on MySQL select optimization solution

Shell script settings to prevent brute force ssh

Learn to deploy microservices with docker in ten minutes

Recommend

How a select statement is executed in MySQL

Alignment issue between input text box and img verification code (img is always one head higher than input)

Mysql table creation foreign key error solution

A detailed introduction to Tomcat directory structure

Detailed explanation of AWS free server application and network proxy setup tutorial

Non-standard implementation code for MySQL UPDATE statement

Detailed explanation of JS ES6 variable destructuring assignment

Ideas and codes for implementing Vuex data persistence

Detailed explanation of the 4 ways to import CSS files: inline, inline, external, and imported

How to install Oracle on Windows Server 2016

Vue achieves the top effect through v-show

In-depth interpretation of /etc/fstab file in Linux system

VMware kali virtual machine environment configuration method

nginx+tomcat example of accessing the project through the domain name

Tutorial on installing MySQL with Docker and implementing remote connection