Ngx-free-fullpage NPM

NgxFreeFullpage

ngx-free-fullpage is a free-for-profit angular library that gives you all the tools you need to implement a fullpage scroll effect. This library hasn't been developed in order to substitute the current ngx-fullpage, this library is an alternative for those projects that are seeking a free library to implement this effect.

How to use (easy peasy)

Run npm i ngx-free-fullpage to install the library.

This library is based on directives in order to give you a simple way of implementing the different components of this effect. Now lets see the code:

Firstly, we must import the main module of the library NgxFullpageModule, this module contains the minimal directives, which are NgxFullpageWrapperDirective and NgxFullpageSectionDirective. Their selectors are respectively, ngx-fullpage-wrapper and ngx-fullpage-section.

So our app.module.ts (or other module) should be like this

    imports: [
    //Your other imports,
    NgxFullpageModule,
    ];

and our whatever.component.html must be kind of:

    <!--class 'fullscreen' must be created by yourself-->
    <div class="fullscreen" ngx-fullpage-wrapper>
        <div ngx-fullpage-section>
            This is the first section
        </div>
        <div ngx-fullpage-section>
            This is second
        </div>
        <div ngx-fullpage-section>
            I'm the last one =(
        </div>
    </div>

With this code, the effect would be implemented but if you need some other feautures check the section below out.

Additional Directives

In order to use these directives, they must be wrapped inside `ngx-fullpage-wrapper` directive

ngx-fullpage-next-button and ngx-fullpage-prev-button directives add to the element which are attribute of an onclick event that when is triggered it scrolls to the next (or previous) section. These directives are both imported by NgxFullpageNextButtonModule.

    <button ngx-fullpage-next-button>Next</button> ## Incorrect, it must be inside ngx-fullpage-wrapper
    <div class="fullscreen" ngx-fullpage-wrapper>
        <button ngx-fullpage-next-button>Next</button> ## Correct
        <div ngx-fullpage-section>
            This is the first section
        </div>
        <div ngx-fullpage-section>
            This is second
        </div>
        <div ngx-fullpage-section>
            I'm the last one =(
        </div>
    </div>

ngx-fullpage-go-to-first and ngx-fullpage-go-to-last directives add to the element which are attribute of an onclick event that when is triggered it scrolls to the first/last section. These directives are imported by NgxFullpageToFirstButtonModule and NgxFullpageGoToLastModule respectively.

    <div class="fullscreen" ngx-fullpage-wrapper>
        <button ngx-fullpage-go-to-first>Next</button> ## Correct
        <div ngx-fullpage-section>
            This is the first section
        </div>
        <div ngx-fullpage-section>
            This is second
        </div>
        <div ngx-fullpage-section>
            I'm the last one =(
        </div>
    </div>

The last directive is ngx-fullpage-go-to-section which receives a section number (starting in 0) and add to the element which is attribute of an onclick event that when is triggered it scrolls to the given section. This directive is imported by NgxFullpageGoToSectionModule.

    <div class="fullscreen" ngx-fullpage-wrapper>
        <button ngx-fullpage-go-to-section="2">Next</button>
        <div ngx-fullpage-section>
            This is the first section
        </div>
        <div ngx-fullpage-section>
            This is second
        </div>
        <div ngx-fullpage-section>
            I'm the last one =(
        </div>
    </div>

Things to be implemented

There are several things that will be implemented in a near future but we haven't done yet, these are some examples.

Adjustable scroll speed
Other events that trigger scroll
Horizontal scrolling option

Advanced featurings

This library provides you with essential tools in order to implement this effect. But if this is not enough and you need to implement some other features I am gonna ease the process to you. With this aim, I have to explain how the library internally works.

The library is just a set of directives connected by a common service. These directives has a hierarchy because we must put all the directives wrapped inside the root directive (ngx-fullpage-wrapper). Why is this necesary? This is due to the way we inject the common service (NgxFullpageService). In order to make possible the coexistence of several ngx-fullpage-wrapper in the same page this how I inject NgxFullpageService.

This is code of ngx-fullpage-wrapper:

    @Directive({
      selector: '[ngx-fullpage-wrapper]',
      providers: [NgxFullpageService] // This is what we are interested in.
    })

After explaining this, now I can explain how I can ease you implemeting new features. NgxFullpageService has several implemented functions in order to control the current section. So, as I explained above, the directives inside the ngx-fullpage-wrapper have access to the instance of the NgxFullpageService, so in order to create new features I gave access to NgxFullpageService exporting among the modules.

The process to create a new feature would be:

Create a directive.
Inject into the constructor NgxFullpageService.
Use the tools I created at NgxFullpageService and your directive logic to implement your feature.