How to achieve CSS animation

Question

junior web developer here.

I just came across a certain web template that really amazed me and would like to clone it as my personal project to train myself.

You can view it here: https://overworld.qodeinteractive.com/

But I have across certain css styling that I have no idea how to implement. For example the sharp edged corners , or even how the image is animated to shift and bounce once it appears.

I tried using transform and keyframes but could not achieve the animation

Answer 1

<div class="box">
        <img src="https://overworld.qodeinteractive.com/wp-content/uploads/2020/01/Beat-the-game.png" alt=""
            class="layer" data-speed="5">

        <img src="https://overworld.qodeinteractive.com/wp-content/uploads/2019/10/main-home-rev-img-3.png" alt=""
            class="layer" data-speed="5">

        <div class="btn-group">
            <button class="layer" data-speed="4">Buy theme</button>
            <button class="layer" data-speed="4">Meet us</button>
        </div>
    </div>


CSS Code 
body {
            margin: 0;
            background-color: rebeccapurple;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .box img {
            display: block;
            width: 300px;
            margin: 30px 0;
        }

        .btn-group {
            display: flex;
            gap: 30px;
        }

        button {
            border: none;
            background-color: #39135e;
            color: #fdff;
            padding: 16px 30px;
            width: 135px;
        }


    Js Code
        <script type="text/javascript">
                document.addEventListener("mousemove", parallax);
                function parallax(e) {
                    this.querySelectorAll('.layer').forEach(layer => {
                        const speed = layer.getAttribute('data-speed')
        
                        const x = (window.innerWidth - e.pageX * speed) / 100
                        const y = (window.innerHeight - e.pageY * speed) / 100
        
                        layer.style.transform = `translateX(${x}px) translateY(${y}px)`
                        layer.style.cursor = "pointer";
                        console.log(x, y);
                    })
                }
            </script>