Skip to content

A parallax effect pages scrolling story telling framework by Vue

License

Notifications You must be signed in to change notification settings

archcra/pagescroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0cea1fb · Apr 17, 2017

History

2 Commits
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017
Apr 17, 2017

Repository files navigation

pagescroll

A parallax effect pages scrolling story telling framework by Vue

运行方法:

本工程本身就是一个demo,需要本地有node.js环境。

git clone https://github.com/archcra/pagescroll.git cd pagescroll npm build npm run dev

当然,如果使用http-server发布的话,运行: npm run build,然后发布dist目录下的内容。

自己使用时,修改src/assets/data/story.json文件中的内容即可。

图片位置在static/img目录下

story.json说明如下:

{ "pageTitle": "Adventure Cats", "cover": { "title": "Adventure Cats", "subtitle": "探险之喵s" }, "slides": [{ "title": "在这个世界上有两种猫", "content": "但无论是白猫还是黑猫,只要是敢旅行的猫,就是敢探险的猫" }, { "title": "Rescue cats that were adopted by outdoor adventure guides.", "image": "cats-01.jpg", "width": "800px", "height": "600px" },

pageTitle是浏览器的title

cover中的title和subtitle是首页的标题和副标题 slides中内容中的各个页面。

其中最多有3项内容: title: 主标题,content: 内容文字,image: 图片。 如果有图片的话,需要指定width及height。

About

A parallax effect pages scrolling story telling framework by Vue

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published