首页 > 代码库 > vanilla-tilt 3D倾斜插件

vanilla-tilt 3D倾斜插件

2024-10-21 04:52:02   212人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .your-element{
            width: 500px;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>


<!--3D 倾斜效果

 https://micku7zu.github.io/vanilla-tilt.js/index.html




 {
   reverse:            false,  // 倾斜方向
   max:                35,     ////最大倾斜旋转（度）
   perspective:        1000,   // Transform perspective, the lower the more extreme the tilt gets.
   scale:              1,      // 2 = 200%, 1.5 = 150%, etc..
   speed:              300,    // Speed of the enter/exit transition
   transition:         true,   // Set a transition on enter/exit.
   axis:               null,   // //应该禁用什么轴。可以是X或Y
   reset:              true    // If the tilt effect has to be reset on exit.
    easing:             "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:              false   //“眩光”效果
    "max-glare":        1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":  false   // false = VanillaTilt creates the glare elements for you, otherwise
                               // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
}

-->


<div class="your-element"><img src="./images/xxx.jpg" alt=""></div>

<script type="text/javascript" src="./js/vanilla-tilt.js"></script>
<script type="text/javascript">
    VanillaTilt.init(document.querySelector(".your-element"), {
        reverse:true,
        max: 100,
        speed: 800,
        glare:true
    });
</script>
</body>
</html>

 

vanilla-tilt 3D倾斜插件


联系
我们