Atropos是一个轻量级触摸友好型 3D 视差悬停效果插件。-BFW插件库

Atropos是一个轻量级触摸友好型 3D 视差悬停效果插件。

Atropos是一个轻量级、免费和开源的JavaScript 库，用于创建令人惊叹的触摸友好型 3D 视差悬停效果。

适用于JavaScript、React、Vue.js和Svelte

特点

触摸友好

Atropos 使用指针事件，因此它可以同时与鼠标和触摸屏完美配合

轻的

Atropos 脚本压缩和压缩后只有 2KB

零依赖

是的，Atropos 不依赖也不包含任何第三方脚本

可配置

Atropos 具有广泛的定制可能性

支持npm及cdn引入

npm i atropos

使用方式：

第一步引入js及css样式

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/atropos.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/atropos.min.js"></script>

第二步配置参数

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/atropos.min.css">

    <style>
        .atropos{
          width: 320px;
          height: 320px;
          position: relative;
          
        }
        .atropos-inner img{
            position: absolute;
            top:0;
        }
    </style>




</head>

<body>
    <div class="atropos">
        <div class="atropos-scale">
            <div class="atropos-rotate">
                <div class="atropos-inner">
                    <!--
        Element with negative offset will move in reverse direction,
        making it appear behind the scene
        -->
                    <img src="//repo.bfw.wiki/bfwrepo/image/621586e3848e1.png" data-atropos-offset="-5" width="300" />
                    <!--
        Element with no offset will not move
        -->
                    <img src="//repo.bfw.wiki/bfwrepo/icon/61e4b3b3a08bf.png" data-atropos-offset="0"  width="300"   />
                    <!--
        Element with positive offset will move in same direction,
        making it appear in front of the scene
        -->
                    <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" data-atropos-offset="5"  width="300"  />
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/atropos.min.js"></script>
    <script>
        new Atropos({
                      el: '.atropos',
                      onEnter() {
                        console.log('Atropos Component: Enter');
                      },
                      onLeave() {
                        console.log('Atropos Component: Leave');
                      },
                      onRotate(x, y) {
                        console.log('Atropos Component: Rotate', x, y);
       } });
    </script>



</body>

</html>

更多参数请看官网。

官网：https://atroposjs.com/