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: