An ember-cli addon to wrap the fullPage.js, Demo:
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
blueprints
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
README_zh_CN.md
bower.json
ember-cli-build.js
index.js
package.json
testem.js

README.md

Ember-cli-fullpagejs

intro.png

npm version Build Status Dependencies Status License

这是对 fullPage.js 的封装,实现非常酷炫的翻页效果。

Installation

If you are using Ember CLI 0.2.3 or higher, just run within your project directory:

ember install ember-cli-fullpagejs --save-dev

If your Ember CLI version is greater than 0.1.5 and less than 0.2.3, run the following within your project directory:

ember install:addon ember-cli-fullpagejs

When your Ember CLI version is below 0.1.5, please run within your project directory:

npm install --save-dev ember-cli-fullpagejs
ember generate ember-cli-fullpagejs

Usage

You only use the tag {{#full-page}}{{/full-page}} instead of <div id="fullpage"></div> in your template files, others are the same as using fullPage.js.

(1)Required HTML structure

{{#full-page}}
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
{{/full-page}}

In order to create a landscape slider within a section, each slide will be defined by default with an element containing the slide class:

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

(2)Options

You can add an option in the tag, ex:

{{#full-page autoScrolling='true' navigation='true' anchors='["firstPage", "secondPage"]' }}

{{/full-page}}

Note: The value of the option has to be wrapped by Single quotation mark ' instead of Double quotation marks ".

All of the options are the following, you can read more:

//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',

//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,

//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,

//Design
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,

//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',

//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}

Developing

  • git clone this repository
  • npm install
  • bower install

Running

Running Tests

  • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://ember-cli.com/.