Skip to content

Latest commit

 

History

History
156 lines (121 loc) · 4.37 KB

README.md

File metadata and controls

156 lines (121 loc) · 4.37 KB
Raw

ember-cli-fullpage-js

npm version Build Status License

This plugin provides an ember.js template wrapper for the fullPage.js plugin, which provides "a simple and easy to use library to create fullscreen scrolling websites".

Installation

ember install @chrismou/ember-cli-fullpage-js

fullPage.js ships with 2 optional includes - scrollOverflow and easings. If you want to include these along with the addon, add the following to the relevant section of your ember-cli-build.js file:

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-fullscreen-js': {
      includeJqueryEasings: true,
      includeScrollOverflow: true
    }
  });

  return app.toTree();
};

Note, the above is not required if you don't need to include either of these additional files.

Usage

Use the tag {{#full-page}}{{/full-page}} in your template files to create the fullPage container. The content itself should be structured as per the fullPage.js docs.

Example HTML structure for vertical fullPage scrolling site

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

To use a horizontal slider within a section, use the following structure inside the section you want to add the slides to:

<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>

Options

All fullPage.js options can be specified on the tag. For example:

{{#full-page autoScrolling="true" navigation="true" menu="#header-menu"}}
  ...
{{/full-page}}

For more info on the options available, click here or use the list below as a reference.

//Navigation
  menu: '#menu',
  lockAnchors: false,
  navigation: false,
  navigationPosition: 'right',
  showActiveTooltip: false,
  slidesNavigation: false,
  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,
  dragAndMove: false,
  offsetSections: false,
  resetSliders: false,
  fadingEffect: false,
  normalScrollElements: '#element1, .element2',
  scrollOverflow: false,
  scrollOverflowReset: false,
  scrollOverflowOptions: null,
  touchSensitivity: 15,
  normalScrollElementTouchThreshold: 5,
  bigSectionsDestination: null,

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

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

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

  lazyLoading: true,

  //events
  onLeave: function(origin, destination, direction){},
  afterLoad: function(origin, destination, direction){},
  afterRender: function(){},
  afterResize: function(width, height){},
  afterResponsive: function(isResponsive){},
  afterSlideLoad: function(section, origin, destination, direction){},
  onSlideLeave: function(section, origin, destination, direction){},

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Credit

Basd on the original work of @imfly at https://github.com/imfly/ember-cli-fullpagejs