PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

I have been thinking hard for two days in order to celebrate the Spring Festival. Because of the epidemic in Xi ‘an, Xi ‘an is still under quarantine, so I want to cheer for Xi ‘an and hope the epidemic will end as soon as possible.

The results of

Here are two simple renderings of my implementation

reference

Parallax effect principle and implementation method animejs official website

Thanks to this great god (moral education director) for your ideas!!

implementation

html

    <div class="card">
        <p>Xi 'an refueling</p>
        <img src="./img/dyt.png" alt=The Big Wild Goose Pagoda>
    </div>
Copy the code

css

    * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #fff;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 14px;
            color: #fff;
            margin: 0;
            padding: 0;
            vertical-align: middle;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 50vw;
            perspective-origin: 50% 50%;
        }

        .card {
            position: relative;
            width: 185px;
            height: 260px;
            overflow: hidden;
            background-image: url(./img/xianrichu.jpg);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 110% 110%;
            transform-origin: 50% 50%;
            perspective: 1800px;
            transform-style: preserve-3d;
            border-radius: 8px;
            box-shadow: 0px 10px 20px 20px rgba(0.0.0.0.17);
        }

        .card img {
            height: 40%;
            position: absolute;
            bottom: 5px;
            left: 80px;
        }

        .card p {
            text-align: center;
            margin-top: 50px;
            color: #fff700;
            font-size: 20px;
        }
Copy the code

The static effect

Writing the above code in HTML looks like this:

Js (key)

• The introduction of animejs

    <script src="./js/anime.min.js"></script>
Copy the code

• Write js

    let clientWidth = document.body.clientWidth;
        let clientHeight = document.body.clientHeight;
        document.onmousemove = function (e) {
            e = e || window.event;
            let movex = 0;
            let movey = 0;
            if (e.pageX || e.pageY) {
                movex = e.pageX;
                movey = e.pageY
            }

            anime({
                targets: '.card'.translateX: movex / 30 - 20.translateY: movey / 30 - 20.rotateX: (movey > clientHeight / 2 ? -1 : 1) * 5 + 'deg'.rotateY: (movex > clientWidth / 2 ? 1 : -1) * 5 + 'deg'.duration: 1000.easing: 'easeOutCirc'
            });

            anime({
                targets: '.card img'.translateX: (movex - clientWidth / 2) / 30.translateY: (movey - clientHeight / 2) / 30.duration: 1000.easing: 'easeOutCirc'
            });

            anime({
                targets: '.card p'.translateX: (movex - clientWidth / 2) / 30.translateY: (movey - clientHeight / 2) / 30.duration: 1000.easing: 'easeOutCirc'
            });
        }
Copy the code

That’s it!

innovation

Through the above code, we only realized the DYNAMIC effect of mouse sliding on the PC side, so I first mobile phone and pad how to do?

• Answer: Cell phones have gyroscopes

Just do it. No more talking. Look at the picture

reference

Html5 gyroscope

Test the phone’s gyroscope using the browser sensor tool

Mobile phone to realize

html

Since it’s not easy to test, I wrote a simple tool myself:

     <div class="tool">
        <p>About:<span id="alpha">0</span>
        </p>
        <p>Before and after:<span id="beta">0</span>
        </p>
        <p>Reverse:<span id="gamma">0</span>
        </p>
    </div>
Copy the code

css

.tool {
    position: absolute;
    top: 0;
    left: 0;
    background: rebeccapurple;
    display: none;
}

@media screen and (max-width: 400px) {
    .tool {
        display: block; }}Copy the code

js

// Get the mobile phone gyroscope
    var updateGravity = function (event) {
        let x = Math.ceil(event.alpha * 100) / 100;
        let y = Math.ceil(event.beta * 100) / 100;
        let z = Math.ceil(event.gamma * 100) / 100;

        document.getElementById("alpha").innerHTML = x;
        document.getElementById("beta").innerHTML = y;
        document.getElementById("gamma").innerHTML = z;

        anime({
            targets: '.card'.rotateX: (y > 0 ? 1 : -1) * 5 + 'deg'.rotateY: (z > 0 ? 1 : -1) * 5 + 'deg'.duration: 1000.easing: 'easeOutCirc'
        });


        anime({
            targets: '.card img'.translateX: z % 180 / 5.translateY: y / 10.duration: 1000.easing: 'easeOutCirc'
        });

        anime({
            targets: '.card p'.translateX: z % 180 / 5.translateY: y / 10.duration: 1000.easing: 'easeOutCirc'
        });

    };
    // Listen for deviceOrientation events for Windows
    window.addEventListener('deviceorientation', updateGravity, false);
Copy the code

debugging

The results of

Focus on

Mobile phone gyroscope requires HTTPS environment, you can modify host locally to solve the problem

recommended

Parallax effects are rarely implemented in a native way in daily development.

A lightweight JS animation library is recommended: “animos.js”

The usage of this library is too simple, directly read the “official documentation” to know how to use, this article will not explain.