ember-cli-fullpage-js
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