https://github.com/photino/amazeui-fullpage

Amaze UI风格的单页滚动效果
https://github.com/photino/amazeui-fullpage

amazeui amazeui-plugin css javascript

Last synced: about 1 month ago
JSON representation

Amaze UI风格的单页滚动效果

• Host: GitHub
• URL: https://github.com/photino/amazeui-fullpage
• Owner: photino
• License: mit
• Created: 2016-09-14T12:07:14.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-10-07T07:22:20.000Z (about 8 years ago)
• Last Synced: 2024-11-13T12:23:39.499Z (about 1 month ago)
• Topics: amazeui, amazeui-plugin, css, javascript
• Language: JavaScript
• Homepage: http://photino.github.io/amazeui-fullpage/
• Size: 1.62 MB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Amaze UI Fullpage

- [使用示例](http://photino.github.io/amazeui-fullpage/docs/demo.html)

  1. [纯CSS实现](http://photino.github.io/amazeui-fullpage/docs/demo-1.html)

  2. [纯CSS实现（带图片背景）](http://photino.github.io/amazeui-fullpage/docs/demo-2.html)

  3. [自动循环播放（Data API）](http://photino.github.io/amazeui-fullpage/docs/demo-3.html)

## 使用说明

1. 获取 Amaze UI Fullpage

  - [直接下载](https://github.com/photino/amazeui-fullpage/archive/master.zip)

  - 使用 NPM: `npm install amazeui-fullpage`

2. 在 Amaze UI 样式之后引入 Fullpage 样式（`dist` 目录下的 CSS）：

  Amaze UI Fullpage 依赖 Amaze UI 样式。

  ```html

  

  

  ```

3. 引入 Fullpage 插件（`dist` 目录下的 JS）：

  Amaze UI Fullpage 中的JS文件并不是必须的，使用纯CSS就能实现最基本的单页滚动效果（需要浏览器支持`vw`和`vh`）。

  ```html

  

  

  ```

4. 初始化 Fullpage:

  Amaze UI Fullpage 也支持Data API。

  ```js

  $(function() {

      $('.am-fullpage').fullpage({

        autoplay: true,

        interval: 5000

      });

  });

  ```