当前位置:主页 > JavsScript库 > 动画 >

JavaScript中的3D多层视差悬停效果 - Atropos
栏目分类:动画   发布日期:2021-08-30   浏览次数:

Atropos 是一个 JavaScript 库,可将交互式和触摸友好的 3D 视差悬停效果(也称为视差倾斜效果)应用于一组图像。

基于指针事件和 CSS3 转换和转换。

使用:

1. 使用 NPM 安装 Atropos。

# NPM
$ npm i atropos --save

2. 导入 Atropos。

import Atropos from './build/esm/atropos.esm';
import './build/atropos.css';

3. 将图像添加到 Atropos 容器并确定元素的偏移/平移百分比,如下所示:

<div href="#" class="atropos atropos-banner">
  <div class="atropos-scale">
    <div class="atropos-rotate">
      <div class="atropos-inner">
        <img class="atropos-banner-spacer" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg">
        <img data-atropos-offset="0" src="./i/atropos-forest-back.svg">
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg">
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg">
        <img data-atropos-offset="5" src="./i/atropos-logo-en.svg">
      </div>
    </div>
  </div>
</div>

4. 激活 Atropos 并完成。

window.atropos = new Atropos({
  el: document.querySelectorAll('.atropos')[0],
});

5. 您还可以对那些视差图像应用不透明度过渡。

<div href="#" class="atropos atropos-banner">
  <div class="atropos-scale">
    <div class="atropos-rotate">
      <div class="atropos-inner">
        <img class="atropos-banner-spacer" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-4.5" data-atropos-opacity="0.1;0.8" src="./i/atropos-bg.svg">
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg">
        <img data-atropos-offset="0" data-atropos-opacity="1;0" src="./i/atropos-forest-back.svg">
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg">
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg">
        <img data-atropos-offset="5" data-atropos-opacity="0;1" src="./i/atropos-logo-en.svg">
      </div>
    </div>
  </div>
</div>

6. 提供自定义 3D 视差悬停效果的配置。

window.atropos = new Atropos({
 
  // 目标元素
  el: document.querySelectorAll('.atropos')[0],
 
  // 像素中的活动偏移
  activeOffset: 50,
 
  // 像素中的阴影偏移
  shadowOffset: 50,
 
  // 阴影比例因子
  shadowScale: 1,
 
  // duration
  durationEnter: 300,
  durationLeave: 600,
 
  // 启用时,它不会旋转容器,直到指针从最初输入的四分之一移出后
  rotateLock: true,
 
  // 在指针移动时
  rotate: true,
 
  // 触摸时旋转容器 move
  rotateTouch: true,
 
  // 沿 X 轴的最大旋转
  rotateXMax: 15,
 
  // 沿Y轴的最大旋转
  rotateYMax: 15,
 
  // 反转旋转
  rotateXInvert: false,
  rotateYInvert: false,
 
  // 显示阴影
  shadow: true,
 
  // 启用高亮
  highlight: true,
 
  // 回调
  onEnter: function(){
    // 做某事
  }
  onLeave: function(){
    // 做某事
  }
  onRotate: function(x, y){
    // 做某事
  }
   
});


7. 可用的属性和 API 方法。

// 获取当前元素
instance.el; 
 
// 检查是否处于活动状态
instance.isActive 
 
// 获取选项
instance.params; 
 
// 销毁实例
instance.destroy(); 
 
// 检查是否被销毁
instance.destroyed

8. 该库也适用于 React 框架。

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import './build/atropos.css';
import App from './App.jsx';
ReactDOM.render(React.createElement(App), document.getElementById('app'));
// app.jsx
import React from 'react';
import Atropos from './build/react';
const App = () => {
  return (
    <div className="container">
      <Atropos className="atropos-banner" highlight={false} onEnter={() => console.log('enter')}>
        <img className="atropos-banner-spacer" src="./i/atropos-bg.svg" alt="" />
        <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg" alt="" />
        <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg" alt="" />
        <img data-atropos-offset="0" src="./i/atropos-forest-back.svg" alt="" />
        <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg" alt="" />
        <img data-atropos-offset="4" src="./i/atropos-forest-front.svg" alt="" />
        <img data-atropos-offset="5" src="./i/atropos-logo-en.svg" alt="" />
      </Atropos>
    </div>
  );
};
export default App;

9.和Vue框架。

import { createApp } from 'vue';
import './build/atropos.css';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
// app.vue
<template>
  <div class="container">
    <Atropos class="atropos-banner" @enter="onEnter">
      <img class="atropos-banner-spacer" src="./i/atropos-bg.svg" alt="" />
      <img data-atropos-offset="-4.5" src="./i/atropos-bg.svg" alt="" />
      <img data-atropos-offset="-2.5" src="./i/atropos-mountains.svg" alt="" />
      <img data-atropos-offset="0" src="./i/atropos-forest-back.svg" alt="" />
      <img data-atropos-offset="2" src="./i/atropos-forest-mid.svg" alt="" />
      <img data-atropos-offset="4" src="./i/atropos-forest-front.svg" alt="" />
      <img data-atropos-offset="5" src="./i/atropos-logo-en.svg" alt="" />
    </Atropos>
  </div>
</template>
<script>
import Atropos from './build/vue';
export default {
  components: {
    Atropos,
  },
  setup() {
    const onEnter = () => {
      console.log('Enter');
    };
    return {
      onEnter,
    };
  },
};
</script>


官方网站:https://github.com/nolimits4web/atropos

相关热词: atropos.js

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库