https://github.com/bestvist/axial3d

🎨 3D effect page for github404.
https://github.com/bestvist/axial3d

3d axial github404 transfom

Last synced: about 1 month ago
JSON representation

🎨 3D effect page for github404.

• Host: GitHub
• URL: https://github.com/bestvist/axial3d
• Owner: bestvist
• License: mit
• Created: 2018-10-29T06:41:28.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-31T10:23:48.000Z (about 6 years ago)
• Last Synced: 2024-11-06T17:53:34.740Z (about 1 month ago)
• Topics: 3d, axial, github404, transfom
• Language: JavaScript
• Homepage: https://bestvist.github.io/axial3d/demo/
• Size: 1.69 MB
• Stars: 138
• Watchers: 2
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-star-libs - bestvist / axial3d

README

        
# 轴动效果 axial3d 

![npm version](https://img.shields.io/npm/v/axial3d.svg)

![npm downloads](https://img.shields.io/npm/dt/axial3d.svg)

![MIT](https://img.shields.io/badge/license-MIT-blue.svg)

> 3D效果页插件，类似 Github404 页面动画。

## 安装引入 Install

```

npm install axial3d

```

or

```

```

## 例子 Example

[Demo](https://bestvist.github.io/axial3d/demo/)

```

    Demo - Axial3d

    

    


    

        (function () {

            var options = {

                selector: '#axial3d',

                imgs: [

                    {src: 'https://bestvist.github.io/axial3d/public/demo1/bg.png', left: '50px', top: '10px'},

                    {src: 'https://bestvist.github.io/axial3d/public/demo1/2.png', left: '150px', top: '10px'},

                    {src: 'https://bestvist.github.io/axial3d/public/demo1/3.png', left: '50px', top: '300px'},

                    {src: 'https://bestvist.github.io/axial3d/public/demo1/4.png', left: '300px', top: '300px'}

                ]

            }

            var effect = new Axial3d(options);

        })()

    


```

![](https://bestvist.github.io/axial3d/public/github404.gif)

## 属性 Props

### options

| 属性 | 说明 | 类型 | 可选值 | 默认值 |

|-|-|-|-|-|

| selector | 元素选择器 | String | - | - |

| imgs | 图片组 | Array | - | - |

| transform | 动画形式 | String | translate / rotate | translate |

| swing | 动画幅度 | Number | - | 5 |

### imgs options

| 属性 | 说明 | 类型 | 可选值 | 默认值 |

|-|-|-|-|-|

| src | 图像路径 | String | - | - |

| top | 图片顶部定位 | String | - | - |

| bottom | 图片底部定位 | String | - | - |

| left | 图片左侧定位 | String | - | - |

| right | 图片右侧定位 | String | - | - |

| static | 图片是否静态，不随鼠标转动 | Boolean | true / false | false |

## 方法 Methods

| 事件名称 | 说明 | 回调参数 |

|-|-|-|

| destory | 取消事件监听 | - |

## License

[MIT](https://github.com/bestvist/axial3d/LICENSE)