alvarotrigo/angular-fullpage

Angular fullpage

Official Angular wrapper for the fullpage.js library.

• Demo online | Stackblitz
• fullpage.js Extensions
• Brought by @imac2 thanks to Vong Panha Huot .

Table of Contents

• Installation
• License
• Usage
  • Use extensions
  • Use scrolloverflow
• Dynamic changes
• Examples
• Contributing
• Resources

Installation

npm install @fullpage/angular-fullpage

This will install the Angular wrapper as well as fullpage.js library.

License

Non open source license

If you want to use angular-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. Purchase a Fullpage Commercial License.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Read more about fullPage's license.

Usage

// app.module.ts
import { AngularFullpageModule } from '@fullpage/angular-fullpage';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFullpageModule //*** added
  ]
})

You should import the fullpage.js stylesheet on your style.scss or component.scss:

/* styles.scss or app.component.scss */
@import url(~fullpage.js/dist/fullpage.min.css);

/* standard css */
@import '~fullpage.js/dist/fullpage.min.css';

Then use the directive on your component:

// app.component.ts
export class AppComponent {
  config: any;
  fullpageApi: any;

  constructor() {

    // for more details on config options please visit fullPage.js docs
    this.config = {

      // fullpage options
      licenseKey: 'YOUR LICENSE KEY HERE',
      anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
      menu: '#menu',

      // fullpage callbacks
      afterResize: () => {
        console.log("After resize");
      },
      afterLoad: (origin, destination, direction) => {
        console.log(origin.index);
      }
    };
  }

  getRef(fullPageRef) {
    this.fullpageApi = fullPageRef;
  }

}

You can optionally import types:

import { fullpageOptions, fullpageApi } from 'fullpage.js/dist/fullpage.extensions.min';
config: fullpageOptions;
fullpageApi: fullpageApi;

Example of HTML:

<!-- app.component.html -->
<div fullpage id="fullpage" [options]="config" (ref)="getRef($event)">
  <div class="section">Some section1</div>
	<div class="section" (click)="fullpageApi.moveSectionDown()">Some section2</div>
	<div class="section">
		<div class="slide">Slide 2.1</div>
		<div class="slide">Slide 2.2</div>
		<div class="slide">Slide 2.3</div>
	</div>
	<div class="section" (click)="fullpageApi.moveTo('secondPage', 2)">Some section4</div>
</div>

Use extensions

In order to make use of fullpage.js extension you'll have to add the extension file to angular.json.

For example, if we want to use the scrollHorizontally extension we will have to add the path to our fullpage.scrollHorizontally.min.js file on the scripts array:

"assets": [
  "src/favicon.ico",
  "src/assets"
],

"styles": [
  "src/styles.css"
],

"scripts": [
  "src/assets/fullpage.scrollHorizontally.min.js"
],

Then pass the required options to fullPage.js. In this case scrollHorizontally:true.

Dynamic Changes

If you want to update fullPage.js with new changes in the DOM call the build() method after making those changes.

An example can be seen on the dynamic-changes example:

this.renderer.appendChild(this.fp_directive.nativeElement, section);
this.fullpageApi.build(); // <-- here

An example for *ngFor can be seen on the dynamic-changes-with-ngFor example:

<div fullpage id="fullpage" [options]="config" (ref)="getRef($event)">
    <div *ngFor="let section of sections" class="section">
		  <h1>Section {{section}}</h1>
	</div>
</div>

Methods

fullPage.js contains many methods. You can access them through the fullpageApi reference that you get from the (ref) output event. For example:

// In your component
fullpageApi: any;

getRef(fullPageRef) {
  this.fullpageApi = fullPageRef;
}

// Then you can use any method like:
moveSectionDown() {
  this.fullpageApi.moveSectionDown();
}

Callbacks

You can define callbacks in the config object when initializing fullPage. These callbacks will be triggered at the appropriate times during fullPage's lifecycle. For example:

config = {
  afterLoad: (origin, destination, direction) => {
    console.log('Section loaded:', destination.index);
  },
  onLeave: (origin, destination, direction) => {
    console.log('Leaving section:', origin.index);
  }
};

All available callbacks can be found in the fullPage.js documentation.

Examples

You can check some full examples on the demo folder and on the examples page.

Contributing

Found an issue? Have an idea? Check out the Contributing guide and open a PR

Resources

• Wordpress theme
• fullpage.js Extensions
• CSS Easing Animation Tool - Matthew Lein (useful to define the easingcss3 value)
• fullPage.js unpakg CDN
• fullPage.js jsDelivr CDN
• fullPage.js cdnJS CDN
• fullPage.js documentation