### Installation

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Install fullPage.js using npm or bower to integrate fullscreen scrolling functionality into your project.

```APIDOC
## Installation

Install fullPage.js via npm or bower to add fullscreen scrolling functionality to your website.

```bash
# Install with npm
npm install fullpage.js

# Or install with bower
bower install fullpage.js
```
```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/webpack-example/README.md

Run this command in the root folder to install project dependencies.

```sh
npm install
```

--------------------------------

### fullPage.js Initialization

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/methods.html

Example of how to initialize fullPage.js with various options.

```APIDOC
## Initialization

### Description
Initializes fullPage.js on a given container element with specified options.

### Method
JavaScript Function Call

### Endpoint
N/A

### Parameters
#### Initialization Options
- **sectionsColor** (Array<string>) - Optional - Sets the background colors for each section.
- **anchors** (Array<string>) - Optional - Defines anchor links for each section.
- **resize** (boolean) - Optional - If true, the plugin will resize all the containers.
- **animateAnchor** (boolean) - Optional - If true, the plugin will animate the scroll to the anchor.
- **scrollOverflow** (boolean) - Optional - Enables scroll for sections and slides.
- **autoScrolling** (boolean) - Optional - Enables/disables vertical auto-scrolling.
- **responsive** (number) - Optional - Breakpoint for responsive design.
- **fitSection** (boolean) - Optional - If true, it fits the section size.
- **menu** (string) - Optional - Selector for the menu element.
- **navigation** (boolean) - Optional - Enables/disables the navigation dots.
- **continuousVertical** (boolean) - Optional - Enables/disables continuous vertical scrolling.
- **paddingTop** (string) - Optional - Adds padding to the top of sections.

### Request Example
```javascript
function initialization(){
  var myFullpage = new fullpage('#myContainer', {
    sectionsColor: ['#4A6FB1', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    resize: false,
    animateAnchor:false,
    scrollOverflow: true,
    autoScrolling:true,
    responsive: 900,
    fitSection: false,
    menu: '#menu',
    navigation:true,
    continuousVertical:true,
    paddingTop: '20px'
  });
}
initialization();
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

--------------------------------

### Install fullPage.js with Bower or NPM

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Use bower or npm to install fullPage.js. This is an optional step if you prefer package managers.

```shell
// With bower
bower install fullpage.js

// With npm
npm install fullpage.js
```

--------------------------------

### Initialize Fullpage.js with Basic Options

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/one-section.html

Instantiate Fullpage.js by providing the target element selector and configuring essential options. Use this for basic setup.

```javascript
var myFullpage = new fullpage('#fullpage', { anchors: ['firstPage'], sectionsColor: ['#4A6FB1'], autoScrolling: false, css3: true, fitToSection: false });
```

--------------------------------

### Install Gulp Globally and Project Dependencies

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Build-tasks

Installs the Gulp module globally if not already present, then installs the project's build dependencies using npm.

```bash
// (Optional) Install Gulp module globally
npm install gulp -g

// Install fullpage's build dependencies
npm install
```

--------------------------------

### Initialize fullpage.js with Effects

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Slide-Effects

Example of initializing fullpage.js using a preset effect like 'coverZoom' or with custom effect options.

```javascript
new fullpage('#fullpage', {
    effects: 'coverZoom'  // Using a preset
});

// Or with custom options:
new fullpage('#fullpage', {
    effects: true,
    effectsOptions: {
        scale: { past: 0.7, future: 1 },
        offset: { past: -100, future: 100 },
        opacity: { past: 0.2, future: 1 }
    }
});
```

--------------------------------

### Install fullPage.js via npm or bower

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Use npm or bower to install the fullPage.js library. This is the first step to add fullscreen scrolling functionality to your website.

```bash
npm install fullpage.js
```

```bash
bower install fullpage.js
```

--------------------------------

### Install fullPage.js using Bower or npm

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/lang/spanish/README.md

Use these commands to install fullPage.js via package managers. This is an optional step if you prefer not to use direct file inclusion.

```shell
// Con bower
bower install fullpage.js
```

```shell
// Con npm
npm install fullpage.js
```

--------------------------------

### Full Effects Options Example

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Slide-Effects

A comprehensive example object demonstrating all possible effect parameters for fullpage.js, including scale, offset, opacity, delay, visibility, rotation, transform origin, perspective, zIndex, skew, and shadow.

```javascript
const effectsOptions = {
    scale: {
        past: 0.8,     // Scale for sections that moved up
        future: 1      // Scale for sections that will move up
    },
    offset: {
        past: -100,    // Y-axis offset in pixels for sections that moved up
        future: 100    // Y-axis offset for sections that will move up
    },
    opacity: {
        past: 0.5,     // Opacity for sections that moved up (0-1)
        future: 1      // Opacity for sections that will move up (0-1)
    },
    delay: {
        past: 200,     // Animation delay in ms for sections moving up
        future: 300    // Animation delay for upcoming sections
    },
    visibility: {
        past: 'hidden' // Visibility of past sections ('visible' or 'hidden')
    },
    rotate: {
        past: '1, 0, 0, -30deg',    // 3D rotation for past sections (x, y, z, angle)
        future: '1, 0, 0, 30deg'    // 3D rotation for future sections
    },
    transformOrigin: {
        past: '50% 100%',    // Transform origin point for past sections
        future: '50% 0%'     // Transform origin point for future sections
    },
    perspective: 1000,       // 3D transform perspective depth in pixels
    zIndex: 'natural',       // Section stacking order ('natural' or 'inverted')
    skew: 0,                // Skew transformation in degrees
    useShadow: true,        // Enable/disable shadow effect
    shadow: '0 22px 100px 0 rgba(0, 0, 0, 0.7)'  // Custom shadow CSS value
};

```

--------------------------------

### Initialize fullpage.js with Vanilla JS and all options

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

A comprehensive example for initializing fullpage.js with Vanilla JavaScript, showcasing a wide range of configuration options for navigation, scrolling, design, and events.

```javascript
var myFullpage = new fullpage('#fullpage', {
	// Navigation
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',

	// Scrolling
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 600,
	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: true,
	scrollOverflowMacStyle: false,
	scrollOverflowReset: false,
	skipIntermediateItems: false,
	touchSensitivity: 15,
	bigSectionsDestination: null,
	adjustOnNavChange: true,

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

	// Design
	controlArrows: true,
	controlArrowsHTML: [
		'<div class="fp-arrow"></div>', 
		'<div class="fp-arrow"></div>'
	],
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: '3em',
	paddingBottom: '10px',
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,
	effects: false,
	effectsOptions: [Object],
	cinematic: false,
	cinematicOptions: [Object],
	parallax: false,
	parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
	dropEffect: false,
	dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
	waterEffect: false,
	waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

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

	lazyLoading: true,
	lazyLoadThreshold: 0,
	observer: true,
	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

	// Events
	beforeLeave: function(origin, destination, direction, trigger){},
	onLeave: function(origin, destination, direction, trigger){},
	afterLoad: function(origin, destination, direction, trigger){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction, trigger){},
	onSlideLeave: function(section, origin, destination, direction, trigger){},
	onScrollOverflow: function(section, slide, position, direction){}
});
```

--------------------------------

### Initialize fullpage.js with basic options

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/requirejs-example/README.md

Initialize fullpage.js using Require.js. This example sets up navigation and section colors without scrollOverflow.

```javascript
// src/main.js
define(['fullpage'], function(fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
    });
});
```

--------------------------------

### Initialize fullPage.js with Options

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Initialize fullPage.js on a specified container element using the `new fullpage()` constructor. This example demonstrates a comprehensive set of configuration options for navigation, scrolling behavior, design, responsiveness, and callbacks.

```javascript
var myFullpage = new fullpage('#fullpage', {
    // Navigation
    licenseKey: 'YOUR_KEY_HERE',
    menu: '#myMenu',
    anchors: ['home', 'about', 'services', 'contact'],
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Home', 'About', 'Services', 'Contact'],
    showActiveTooltip: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    // Scrolling behavior
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    touchSensitivity: 15,
    keyboardScrolling: true,

    // Design
    verticalCentered: true,
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    paddingTop: '50px',
    paddingBottom: '10px',
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow fp-prev"></div>',
        '<div class="fp-arrow fp-next"></div>'
    ],

    // Responsive
    responsiveWidth: 900,
    responsiveHeight: 600,

    // Other settings
    lazyLoading: true,
    observer: true,
    scrollOverflow: true,

    // Callbacks
    afterLoad: function(origin, destination, direction, trigger) {
        console.log('Section ' + destination.index + ' loaded');
    },
    onLeave: function(origin, destination, direction, trigger) {
        console.log('Leaving section ' + origin.index);
    }
});
```

--------------------------------

### Set Active Section

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

To set a specific section as the starting point, add the 'active' class to that section element.

```html
<div class="section active">Some section</div>
```

--------------------------------

### Initialize fullPage.js with Auto-Height

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/auto-height.html

Instantiate fullPage.js with options for vertical centering, anchors, menu integration, and section colors. This setup is common for basic fullPage.js implementations.

```javascript
var myFullpage = new fullpage('#fullpage', {
  verticalCentered: true,
  anchors: ['anchor1', 'anchor2', 'anchor3'],
  menu: '#menu',
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
});
```

--------------------------------

### Webpack Configuration for fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/webpack-example/dist/index.html

This is a basic Webpack configuration file. Ensure you have the necessary loaders and plugins installed for your project.

```javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
```

--------------------------------

### Initialize fullpage.js with jQuery

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Use this snippet to initialize fullpage.js as a jQuery plugin. Ensure jQuery is loaded before fullpage.js. It also shows an example of calling a fullpage.js method.

```javascript
$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});

	// Example of how to use fullpage.js methods
	$.fn.fullpage.setAllowScrolling(false);
});
```

--------------------------------

### Initialize fullPage.js with Continuous Vertical Scrolling

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/continuous-vertical.html

Instantiate fullPage.js with the 'continuousVertical' option set to true to enable looping between sections. This example also includes basic configuration for sections, menu, and navigation.

```javascript
var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    continuousVertical: true,
    navigation: true,
    afterLoad: function(origin, destination, direction, trigger){
        console.log("afterLoad: destination:" + destination.index);
    },
    onLeave: function(origin, destination, direction, trigger){
        console.log("onLeave: destination:" + destination.index);
    },
});
```

--------------------------------

### Initialize fullPage.js with Custom Arrows

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/custom-arrows.html

Initialize fullPage.js with custom navigation arrows using the `controlArrows` and `controlArrowsHTML` options. This example uses Font Awesome icons for the left and right arrow controls.

```javascript
var myFullpage = new fullpage('#fullpage', {
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
  controlArrows: true,
  controlArrowsHTML: [
    '<div class="my-arrow"><i class="fas fa-arrow-alt-circle-left"></i></i></div>',
    '<div class="my-arrow"><i class="fas fa-arrow-alt-circle-right"></i></div>',
  ]
});
```

--------------------------------

### Require.js Configuration for fullpage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/requirejs-example/README.md

Configure Require.js paths to include fullpage.js, its vendors, and extensions. Ensure the paths correctly point to the installed modules.

```javascript
// src/require.config.js
var require = {
    baseUrl: ".",
    app: "./",
    paths: {
        "fullpage": "./node_modules/fullpage.js/dist/fullpage",
        "IScroll": "./node_modules/fullpage.js/vendors/scrolloverflow",
        "fullpageExtensions": "./node_modules/fullpage.js/dist/fullpage.extensions.min",

        /*
        When using any fullPage extensions you'll have to add the path to the
        extension file here
        */
        //"scrollHorizontally": "./src/fullpage.scrollHorizontally.min"
    }
};
```

--------------------------------

### Parallax Extension Setup and Control

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Integrate the parallax extension to add background effects to sections and slides. Configure parallax options and control it dynamically via the fullpage API.

```html
<div id="fullpage">
    <div class="section">
        <div class="fp-bg"></div>
        <h1>Section with Parallax</h1>
    </div>
    <div class="section">
        <div class="slide">
            <div class="fp-bg"></div>
            <h2>Slide 1</h2>
        </div>
        <div class="slide">
            <div class="fp-bg"></div>
            <h2>Slide 2</h2>
        </div>
    </div>
</div>

<style>
#section1 .fp-bg {
    background-image: url('parallax-bg.jpg');
    background-size: cover;
    background-position: center;
}
</style>

<script src="fullpage.parallax.min.js"></script>
<script src="fullpage.extensions.min.js"></script>
<script>
new fullpage('#fullpage', {
    parallax: true,
    parallaxOptions: {
        type: 'reveal',        // 'reveal' or 'cover'
        percentage: 62,        // parallax intensity (0-100)
        property: 'translate'  // 'translate' or 'background'
    },
    parallaxKey: 'YOUR_EXTENSION_KEY'
});

// Dynamic parallax control
fullpage_api.parallax.setOption('percentage', 80);
fullpage_api.parallax.destroy();
fullpage_api.parallax.init();
</script>
```

--------------------------------

### Build Project with npm

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/webpack-example/README.md

Execute this command to build the project's bundle file using npm.

```sh
npm run build
```

--------------------------------

### Get Scroll Position - fullpage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Gets the current vertical scroll position of the fullPage wrapper or the horizontal scroll position of the active slide.

```javascript
fullpage_api.getScrollY();
fullpage_api.getScrollX();
```

--------------------------------

### Build fullPage.js Bundle with Browserify

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/browserify-example/README.md

Run this command in the project root to create the `main.js` bundle file using Browserify. Ensure you have npm scripts configured for building.

```sh
npm run build
```

```sh
browserify src/index.js > dist/main.js
```

--------------------------------

### Initialize fullPage.js with Vanilla JavaScript

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Instantiate fullPage.js by selecting the main wrapper element and configuring options. This should be called before the closing </body> tag.

```javascript
new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});
```

--------------------------------

### Destroy Cards Effect

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Cards

Turns off the cards effect. Use this to disable the effect, for example, when it's no longer needed.

```javascript
fullpage_api.cards.destroy();
```

--------------------------------

### Initialization and Options

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Initialize fullPage.js on a specified selector and configure its behavior using a comprehensive set of options.

```APIDOC
## new fullpage(selector, options)

Initialize fullPage.js on a container element with configuration options. This creates the fullscreen scrolling website with all specified settings.

```javascript
var myFullpage = new fullpage('#fullpage', {
    // Navigation
    licenseKey: 'YOUR_KEY_HERE',
    menu: '#myMenu',
    anchors: ['home', 'about', 'services', 'contact'],
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Home', 'About', 'Services', 'Contact'],
    showActiveTooltip: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',

    // Scrolling behavior
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    touchSensitivity: 15,
    keyboardScrolling: true,

    // Design
    verticalCentered: true,
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    paddingTop: '50px',
    paddingBottom: '10px',
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow fp-prev"></div>',
        '<div class="fp-arrow fp-next"></div>'
    ],

    // Responsive
    responsiveWidth: 900,
    responsiveHeight: 600,

    // Other settings
    lazyLoading: true,
    observer: true,
    scrollOverflow: true,

    // Callbacks
    afterLoad: function(origin, destination, direction, trigger) {
        console.log('Section ' + destination.index + ' loaded');
    },
    onLeave: function(origin, destination, direction, trigger) {
        console.log('Leaving section ' + origin.index);
    }
});
```
```

--------------------------------

### onScrollOverflow Callback

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Callback gets fired when a scrolling inside a scrollable section when using the fullPage.js option `scrollOverflow: true`.

```APIDOC
## onScrollOverflow (`section`, `slide`, `position`, `direction`)

### Description
This callback gets fired when a scrolling inside a scrollable section when using the fullPage.js option `scrollOverflow: true`.

### Parameters
#### Path Parameters
- **section** (Object) - active vertical section.
- **slide** (Object) - horizontal slide of origin.
- **position** (Integer) - scrolled amount within the section/slide. Starts on 0.
- **direction** (String) - `up` or `down`

### Request Example
```javascript
new fullpage('#fullpage', {
	onScrollOverflow: function( section, slide, position, direction){
		console.log(section);
		console.log("position: " + position);
	}
});
```
```

--------------------------------

### Initialize fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/methods.html

Initializes fullPage.js with custom configurations for sections, anchors, navigation, and responsiveness. Ensure the target container '#myContainer' exists and has the specified structure.

```javascript
function initialization(){
 var myFullpage = new fullpage('#myContainer', {
 sectionsColor: ['#4A6FB1', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
 anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
 resize: false,
 animateAnchor:false,
 scrollOverflow: true,
 autoScrolling:true,
 responsive: 900,
 fitSection: false,
 menu: '#menu',
 navigation:true,
 continuousVertical:true,
 paddingTop: '20px'
 });
}

initialization();
```

--------------------------------

### Initialize Fullpage.js with License Key

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

When using fullPage.js in a non-open-source project, the `licenseKey` option is compulsory. Provide your purchased commercial license key here. Open-source projects may request a GPLv3 compatible key.

```javascript
new fullpage('#fullpage', {
	licenseKey: 'YOUR_KEY_HERE'
});
```

--------------------------------

### Trigger Parameter in Callbacks

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Migration-from-fullPage-v3-to-fullPage-v4

Example of how to access the 'trigger' parameter in fullPage.js v4 callbacks to identify the action that initiated the scroll.

```javascript
afterLoad: function(origin, destination, direction, trigger){
    console.warn("afterLoad. Trigger: " + trigger );
},
```

--------------------------------

### Get Active Section - fullpage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Retrieves an object containing information about the currently active section. Useful for understanding the current state of the page.

```javascript
fullpage_api.getActiveSection();
```

--------------------------------

### Initialize fullpage.js with Menu Option

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Initialize fullpage.js, specifying the anchors for your sections and linking it to a menu element using the `menu` option.

```javascript
new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	menu: '#myMenu'
});
```

--------------------------------

### Initialize fullpage.js with RequireJS (Basic)

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Use-module-loaders-for-fullPage.js

Initialize fullpage.js using RequireJS, defining the 'fullpage' module.

```javascript
// main.js
define(['fullpage'], function(fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
    });
});
```

--------------------------------

### Get Active Slide - fullpage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Retrieves an object containing information about the currently active slide within a section. Useful for horizontal navigation states.

```javascript
fullpage_api.getActiveSlide();
```

--------------------------------

### fullPage.js v4 Vertical Centering HTML

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Migration-from-fullPage-v3-to-fullPage-v4

Example HTML structure for a section in fullPage.js v4, showing the simplified structure for vertical centering with flexbox.

```html
<div class="section fp-table">
   Vertically centerd
</div>
```

--------------------------------

### Initialize fullpage.js with Browserify

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Use-module-loaders-for-fullPage.js

Require and initialize fullpage.js using Browserify. Optional requires for extensions and scrollOverflow are commented out.

```javascript
// Optional. When using fullPage extensions
//require('./fullpage.scrollHorizontally.min');

// Optional. When using scrollOverflow:true
//require('fullpage.js/vendors/scrolloverflow');

var fullpage = require('fullpage.js');

// When using fullPage extensions replace the previos require
// of fullpage.js for this file
//var fullpage = require('fullpage.js/dist/fullpage.extensions.min');

// Initializing it
var fullPageInstance = new fullpage('#myFullpage', {
    navigation: true,
    sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
});
```

--------------------------------

### fullPage.js v3 Vertical Centering HTML

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Migration-from-fullPage-v3-to-fullPage-v4

Example HTML structure for a section in fullPage.js v3, demonstrating the dynamically created wrapper for vertical centering.

```html
<div class="section fp-table" style="height: 503px;">
   <div class="fp-tableCell" style="height: 503px;"> <!-- dynamically created wrapper -->
      Vertically centerd
   </div>
</div>
```

--------------------------------

### dropLeaves Callback

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Drop-Effect

The `dropLeaves` callback is fired when the drop effect starts moving out of the viewport after completely filling it. It provides information about the origin, destination, and direction of the transition.

```APIDOC
## dropLeaves(origin, destination, direction)

### Description
Fired when the drop effect starts moving out of the viewport after completely filling it.

### Parameters
- **origin** (object) - The section that is leaving the viewport.
- **destination** (object) - The section that is entering the viewport.
- **direction** (string) - The direction of the scroll ('up' or 'down').

### Usage Example
```javascript
new fullpage('#fullpage', {
    dropLeaves: function(origin, destination, direction){
        var leavingSection = this;

        if(origin.index == 1 && direction =='down'){
            alert("Going to section 3!");
        }

        else if(origin.index == 1 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});
```
```

--------------------------------

### Initialize fullpage.js with Webpack

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Use-module-loaders-for-fullPage.js

Import and initialize fullpage.js using Webpack. Optional imports for extensions and scrollOverflow are commented out.

```javascript
// Optional. When using fullPage extensions
//import scrollHorizontally from './fullpage.scrollHorizontally.min';

// Optional. When using scrollOverflow:true
//import IScroll from 'fullpage.js/vendors/scrolloverflow';

// Importing fullpage.js
import fullpage from 'fullpage.js';

// When using fullPage extensions replace the previous import
// of fullpage.js for this file
//import fullpage from 'fullpage.js/dist/fullpage.extensions.min';

// Initializing it
var fullPageInstance = new fullpage('#myFullpage', {
    navigation: true,
    sectionsColor:['#ff5f45', '#0798ec', '#fc6c7c', 'grey']
});
```

--------------------------------

### Initialize fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/gradient-backgrounds.html

Initializes fullPage.js on the specified element. Ensure the '#fullpage' element exists in your HTML.

```javascript
var myFullpage = new fullpage('#fullpage');
```

--------------------------------

### Initialize fullpage.js with RequireJS (Extensions and scrollOverflow)

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Use-module-loaders-for-fullPage.js

Initialize fullpage.js with RequireJS, including 'IScroll', 'scrollHorizontally', and 'fullpageExtensions' for advanced options.

```javascript
// main.js
define(['IScroll', 'scrollHorizontally', 'fullpageExtensions'], function(IScroll, scrollHorizontally, fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['blue', 'red', 'purple', 'grey'],
        scrollOverflow: true,
        scrollHorizontally: true
    });
});
```

--------------------------------

### Configure CSS3 Easing Effect

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/easing-css3.html

Set a custom CSS3 easing effect for scrolling transitions. This example uses a specific cubic-bezier value for a unique animation feel.

```javascript
var myFullpage = new fullpage('#fullpage', {
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
  menu: '#menu',
  //equivalent to jQuery `easeOutBack` extracted from http://matthewlein.com/ceaser/
  easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
});
```

--------------------------------

### Run Webpack Build Command

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/module_loaders/webpack-example/README.md

This command is executed by `npm run build` to create the bundle file.

```sh
npx webpack --config webpack.config.js
```

--------------------------------

### Initialize fullPage.js with background video

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/background-video.html

JavaScript to initialize fullPage.js. Ensure the 'playsinline' attribute is added to the video element for mobile compatibility.

```javascript
var myFullpage = new fullpage('#fullpage', {
	verticalCentered: true,
	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE']
});
```

--------------------------------

### Activate Multiple Domains with an Extension

Source: https://github.com/alvarotrigo/fullpage.js/wiki/How-to-activate-a-fullPage.js-extension

For development environments or when using multiple domains, you can provide an array of activation keys for a specific extension.

```javascript
new fullPage('#fullpage', {
    scrollHorizontally: true,
    scrollHorizontallyKey: ['domain1_key', 'domain2_key', 'domain3_key'] 
});
```

--------------------------------

### afterLoad Callback Example

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

This callback is fired after sections have loaded and scrolling has ended. It provides information about the origin, destination, direction, and trigger of the scroll. Useful for executing logic after a section transition.

```javascript
new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(origin, destination, direction, trigger){
		var origin = this;

		//using index
		if(origin.index == 2){
			alert("Section 3 ended loading");
		}

		//using anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});
```

--------------------------------

### Implement onScrollOverflow Callback in fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Migration-from-fullPage-v3-to-fullPage-v4

Use the onScrollOverflow callback to get the scroll position within a section or slide when scrollOverflow is enabled. This callback provides the section, slide, and current scroll position.

```javascript
onScrollOverflow: function(section, slide, position){
    console.log(position);
}
```

--------------------------------

### fullPage.js Initialization with Sections

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/autoplay-video-and-audio.html

This is a basic initialization of fullPage.js, setting up three sections with specified background colors and anchors. No specific media autoplay attributes are shown here, but it forms the structure for sections where media might be placed.

```javascript
var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
    anchors: ['firstPage', 'secondPage', '3rdPage']
});
```

--------------------------------

### Cancel Section Transitions with beforeLeave Callback in fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Migration-from-fullPage-v3-to-fullPage-v4

The beforeLeave callback allows you to intercept section transitions and cancel them by returning false. This example demonstrates preventing scrolling until a certain condition is met.

```javascript
let cont = 0;

new fullPage('#fullpage', {
    // example preventing scroll until we scroll 4 times
    beforeLeave: function(origin, destination, direction, trigger){
        cont++;
        return cont === 4;
    }
}
```

--------------------------------

### Initialize Plugins with afterRender Callback

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/README.md

Fired after the fullpage.js structure is generated. Ideal for initializing other plugins or running code that requires the DOM to be ready.

```javascript
new fullpage('#fullpage', {
	afterRender: function(){
		var pluginContainer = this;
		alert("The resulting DOM structure is ready");
	}
});
```

--------------------------------

### Enable Water Effect Dynamically

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Water-Effect

Use the 'turnOn' method to enable the water effect after initialization, useful for dynamic activation.

```javascript
fullpage_api.waterEffect.turnOn();
```

--------------------------------

### Navigate Slides with fullpage.js API

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Navigate horizontally between slides within the current section using `moveSlideRight()` and `moveSlideLeft()`. You can also get information about the active slide, such as its index and whether it's the first or last slide.

```javascript
new fullpage('#fullpage', {
    controlArrows: true
});

// Custom slide navigation
document.getElementById('nextSlide').addEventListener('click', function() {
    fullpage_api.moveSlideRight();
});

document.getElementById('prevSlide').addEventListener('click', function() {
    fullpage_api.moveSlideLeft();
});

// Get active slide info
var activeSlide = fullpage_api.getActiveSlide();
if (activeSlide) {
    console.log('Current slide index:', activeSlide.index);
    console.log('Is first slide:', activeSlide.isFirst);
    console.log('Is last slide:', activeSlide.isLast);
}
```

--------------------------------

### Initialize fullPage.js with Options

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/hide-sections.html

Initializes fullPage.js on a specified element with various configuration options including colors, anchors, navigation, and slide controls. Ensure the target element '#fullpage' exists in your HTML.

```javascript
var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#435b71', 'orange', 'blue', 'purple', 'yellow', '#435b71', 'orange', 'blue', 'purple', 'yellow'],
    anchors: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
    controlArrows: false,
    navigation: true,
    slidesNavigation: true
});
```

--------------------------------

### Initialize fullPage.js with jQuery

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/jquery-adapter.html

Initializes fullPage.js on an element with specified options for sections' colors and navigation.

```javascript
$(document).ready(function(){
//initialising fullpage.js in the jQuery way
$('#fullpage').fullpage({
sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
navigation: true,
slidesNavigation: true,
});
});
```

--------------------------------

### Configure Scrolling Speed in fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/scrolling-speed.html

Use the 'scrollingSpeed' option to set the duration in milliseconds for the scrolling animation between sections. A higher value results in slower scrolling. This example also configures sectionsColor, anchors, menu, and other common options.

```javascript
var myFullpage = new fullpage('#fullpage', {
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
  menu: '#menu',
  scrollingSpeed: 1700
});
```

--------------------------------

### Initialize fullPage.js with Callbacks

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/trigger-animations.html

Initializes fullPage.js with various options including section colors, anchors, menu integration, and custom `afterLoad` callback for animations. The `afterLoad` callback handles animations for section 2 by manipulating element styles based on the destination and origin sections.

```javascript
var myFullpage = new fullpage('#fullpage', {
  sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
  menu: '#menu',
  afterLoad: function(origin, destination, direction){
    //section 2
    if(destination.index == 1){
      document.querySelector('#section2').querySelector('img').style.left = 0 + 'px';
      document.querySelector('#section2').querySelector('p').style.opacity = 1;
    }
    //back to original state
    else if(origin && origin.index == 1){
      document.querySelector('#section2').querySelector('img').style.left = 130 + '%';
      document.querySelector('#section2').querySelector('p').style.opacity = 0;
    }
    //section 3 is using the state classes to fire the animation
    //see the CSS code above!
  }
});
```

--------------------------------

### Logging Callback Events in fullPage.js

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/callbacks.html

This JavaScript code initializes fullPage.js and defines various callback functions to log events and their parameters to the console and a dedicated div. It includes setup for sections, anchors, and menu, along with detailed logging for scroll and slide transitions. The `deleteLog` flag is used to clear previous logs.

```javascript
var deleteLog = false; //adding the params info into the page
function addToLog(callbackName, params){
    var callbackData = '<h4>' + callbackName + '</h4>';
    Object.keys(params).forEach(function(key){
        var content = params[key];
        if(content !== null && typeof content === 'object'){
            content = JSON.stringify(content);
        }
        callbackData += '<p><b>' + key + '</b>: ' + content + '</p>';
    });
    callbackData += '<br />';
    document.getElementById('callbacksDiv').innerHTML += callbackData;
}

//fullpage initialisation
var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
    menu: '#menu',
    beforeLeave: function(origin, destination, direction, trigger){
        var params = { origin: origin, destination:destination, direction: direction, trigger: trigger };
        //clearing the logging in the screen
        if(deleteLog){
            document.getElementById('callbacksDiv').innerHTML = '';
        }
        addToLog('beforeLeave', params);
        console.log("--- beforeLeave ---");
        console.log(params);
    },
    onLeave: function(origin, destination, direction, trigger){
        var params = { origin: origin, destination:destination, direction: direction, trigger: trigger };
        addToLog('onLeave', params);
        console.log("--- onLeave ---");
        console.log(params);
    },
    onSlideLeave: function(section, origin, destination, direction, trigger){
        var params = { section: section, origin: origin, destination: destination, direction: direction, trigger: trigger };
        //clearing the logging in the screen
        if(deleteLog){
            document.getElementById('callbacksDiv').innerHTML = '';
        }
        addToLog('onSlideLeave', params);
        console.log("--- onSlideLeave ---");
        console.log(params);
    },
    afterRender: function(){
        addToLog('afterRender', {});
        console.log("afterRender");
    },
    afterResize: function(width, height){
        addToLog('afterResize', { width: width, height: height });
        console.log("afterResize");
        console.log(params);
    },
    afterSlideLoad: function(section, origin, destination, direction, trigger){
        var params = { section: section, origin: origin, destination: destination, direction: direction, trigger: trigger };
        addToLog('afterSlideLoad', params);
        console.log("--- afterSlideLoad ---");
        console.log(params);
        console.log("----------------");
        deleteLog = true;
    },
    afterLoad: function(origin, destination, direction, trigger){
        var params = { origin: origin, destination: destination, direction: direction, trigger: trigger };
        addToLog('afterLoad', params);
        console.log("--- afterLoad ---");
        console.log(this);
        console.log('===============');
        deleteLog = true;
    },
    onScrollOverflow: function(section, slide, position, direction){
        var params = { section: section, slide: slide, position: position, direction: direction };
        console.log("--- onScrollOverflow ---");
        console.log(params);
        if(deleteLog){
            document.getElementById('callbacksDiv').innerHTML = '';
        }
        addToLog('onScrollOverflow', params);
        deleteLog = true;
    }
});
```

--------------------------------

### Run Default Gulp Tasks (CSS and JS Compression)

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Build-tasks

Executes the default Gulp tasks, which include compressing CSS and JS files but not SCSS compilation.

```bash
gulp
```

--------------------------------

### Cinematic Options Configuration

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Extension-Cinematic-Effects

This snippet shows how to configure cinematic transitions, including the main effect and detailed options for content animation.

```APIDOC
## POST /fullpage.js/cinematic

### Description
Configures cinematic transitions for fullpage.js.

### Method
POST

### Endpoint
/fullpage.js/cinematic

### Parameters
#### Request Body
- **cinematic** (String) - Required - The name of the cinematic effect to use. (e.g., 'zoom', 'shockwave')
- **scrollingSpeed** (Number) - Optional - Controls the duration of the transition in milliseconds. (default: 700)
- **cinematicOptions** (Object) - Optional - Configures parameters for cinematic transitions.
  - **animateContent** (Boolean) - Optional - When true, animates HTML content within sections during transitions. (default: true)
  - **contentDistance** (Number) - Optional - The distance in pixels content travels during animation. Only applies when `animateContent` is true. (default: 50)
  - **contentEasing** (String) - Optional - The CSS easing function for content animations. Accepted values: 'ease-out', 'ease-in', 'ease', 'ease-in-out', 'linear'. Only applies when `animateContent` is true. (default: 'ease-out')
  - **contentDirection** (String) - Optional - The direction of content animation. Accepted values: 'auto', 'vertical', 'horizontal', 'none'. Only applies when `animateContent` is true. (default: 'auto')

### Request Example
{
  "cinematic": "zoom",
  "scrollingSpeed": 1000,
  "cinematicOptions": {
    "animateContent": true,
    "contentDistance": 50,
    "contentEasing": "ease-out",
    "contentDirection": "auto"
  }
}

### Response
#### Success Response (200)
- **message** (String) - Confirmation message.

#### Response Example
{
  "message": "Cinematic options configured successfully."
}
```

--------------------------------

### Initialize fullPage.js with Slides Navigation

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/navigation-horizontal.html

Use this configuration to enable navigation for horizontal sliders. Ensure the `slidesNavigation` option is set to `true`. The `anchors` and `sectionsColor` options are also shown for context.

```javascript
var myFullpage = new fullpage('#fullpage', {
  anchors: ['firstPage', 'secondPage', '3rdPage'],
  sectionsColor: ['#8FB98B', '#DE564B', '#EAE1C0'],
  slidesNavigation: true,
});
```

--------------------------------

### Basic HTML Structure for fullPage.js

Source: https://context7.com/alvarotrigo/fullpage.js/llms.txt

Set up the fundamental HTML structure required for fullPage.js. This includes a main container and individual section divs. The script initializes fullPage.js with basic options.

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="fullpage.css" />
</head>
<body>
    <div id="fullpage">
        <div class="section">First Section</div>
        <div class="section">Second Section</div>
        <div class="section">Third Section</div>
        <div class="section">Fourth Section</div>
    </div>

    <script type="text/javascript" src="fullpage.js"></script>
    <script type="text/javascript">
        new fullpage('#fullpage', {
            autoScrolling: true,
            scrollingSpeed: 700
        });
    </script>
</body>
</html>
```

--------------------------------

### Initialize fullPage.js with Responsive Width

Source: https://github.com/alvarotrigo/fullpage.js/blob/master/examples/responsive-width.html

Configure fullPage.js to enable normal scrolling below 900px width. The `afterResponsive` callback can be used to perform actions when the responsive mode is activated or deactivated.

```javascript
var myFullpage = new fullpage('#fullpage', {
  anchors: ['firstPage', 'secondPage', '3rdPage'],
  sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
  navigation: true,
  navigationPosition: 'right',
  navigationTooltips: ['First page', 'Second page', 'Third and last page'],
  responsiveWidth: 900,
  afterResponsive: function(isResponsive){ }
});
```

--------------------------------

### Initialize fullpage.js with RequireJS (scrollOverflow)

Source: https://github.com/alvarotrigo/fullpage.js/wiki/Use-module-loaders-for-fullPage.js

Initialize fullpage.js with RequireJS, including 'IScroll' for the scrollOverflow option.

```javascript
// main.js
define(['IScroll', 'fullpage'], function(IScroll, fullpage) {

    // Initializing it
    var fullPageInstance = new fullpage('#myFullpage', {
        navigation: true,
        sectionsColor:['blue', 'red', 'purple', 'grey'],
        scrollOverflow: true
    });
});
```