From 2e04235616d7f70b0ce4dc08e82bb84f80cc93f0 Mon Sep 17 00:00:00 2001 From: Tine Kondo Date: Tue, 25 Sep 2018 22:03:16 +0200 Subject: [PATCH] chore(getting-started): update `getting-started` page --- .../getting-started.component.html | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/demo/src/app/getting-started/getting-started.component.html b/demo/src/app/getting-started/getting-started.component.html index 7e24058..9c83ba3 100644 --- a/demo/src/app/getting-started/getting-started.component.html +++ b/demo/src/app/getting-started/getting-started.component.html @@ -8,18 +8,16 @@

Getting Started

Dependencies

Installation

Install above dependencies via npm. In particular for ScrollReveal JS, run:

npm install --save scrollreveal
-

To avoid compilation warnings during development, you can also install the typings for ScrollReveal JS :

-
npm install --save-dev @types/scrollreveal
Angular-CLI
-

Note: If you are using angular-cli to build your app, make sure that scrollreveal is properly listed as a global library, by editing your angular-cli.json as such:

+

Note: If you are using angular-cli to build your app, make sure that scrollreveal is properly listed as a global library, by editing your angular.json as such:

      "scripts": [
        "../node_modules/scrollreveal/dist/scrollreveal.js"
      ],
SystemJS
@@ -34,27 +32,23 @@
SystemJS
    <!-- 1. Configure SystemJS -->
    <script src="system.config.js"></script>
    <!-- 2. Add scrollreveal dependency-->
    <script src="node_modules/scrollreveal/dist/scrollreveal.min.js"></script>

Now install ngx-scrollreveal via:

-
npm install --save ng-scrollreveal
+
npm install --save ngx-scrollreveal

Once installed you need to import the main module:

import {{ '{' }}NgsRevealModule} from 'ngx-scrollreveal';
-

The only remaining part is to list the imported module in your application module. The exact method will be slightly -different for the root (top-level) module for which you should end up with the code similar to (notice NgsRevealModule.forRoot()):

-
import {{ '{' }}NgsRevealModule} from 'ngx-scrollreveal';
 
@NgModule({{ '{' }}
  declarations: [AppComponent, ...],
  imports: [NgsRevealModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {{ '{' }}
}
-

Other modules in your application can simply import NgsRevealModule:

-
import {{ '{' }}NgsRevealModule} from 'ngx-scrollreveal';
 
@NgModule({{ '{' }}
  declarations: [OtherComponent, ...],
  imports: [NgsRevealModule, ...], 
})
export class OtherModule {{ '{' }}
}
+
import {{ '{' }}NgsRevealModule} from 'ngx-scrollreveal';
 
@NgModule({{ '{' }}
  declarations: [AppComponent, ...],
  imports: [NgsRevealModule],  
  bootstrap: [AppComponent]
})
export class AppModule {{ '{' }}
}

Usage

The library is composed of two main directives: ngsReveal and ngsRevealSet.

ngsReveal Directive

Use this directive to reveal/hide a single DOM element upon scroll.

-
Basic Usage:
+
Basic Usage
    <div class="item" ngsReveal>..</div>
-
With Custom Options:
+
With Custom Options

You can also pass in a custom configuration object to the directive.

    <div class="item" [ngsReveal]="{{ '{' }} reset: true}" >..</div>

This will override the default configuration used when revealing this particular element. When no configuration is passed in, the directive uses the default configuration defined at component or at application level.

-

Configuration options are the same as ScrollReveal JS configuration object.

+

Configuration options are the same as ScrollReveal JS configuration object.

ngsRevealSet Directive

Use this directive to reveal/hide a set of DOM elements upon scroll.

@@ -62,12 +56,12 @@

ngsRevealSet Directive

Note: The value is a list of CSS selectors (comma-separated).

-
Basic Usage:
+

Basic Usage

    <div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
        <div class="item5">Item 5 (will not be animated)</div>
    </div>
-
With Custom Options:
+

With Custom Options

    <div class="itemset" [ngsRevealSet]="{{ '{' }} reset:true}" [ngsSelector]="'.item'">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
        <div class="item5">Item 5 (will not be animated)</div>
    </div>

Configuration options are the same as ScrollReveal JS configuration object.

-
Sequentially animated items:
+

Sequentially animated items

Child items inside the parent set can be sequentially animated, by adding the [ngsRevealInterval] attribute.

Note: The interval is the time until the next element in the sequence begins its reveal, which is separate from the time until the element’s animation completes. In this example, the sequence interval is 50 milliseconds.

@@ -76,7 +70,11 @@
Sequentially animated items:

Global Configuration

You can inject the config service, typically in your root component, and customize the values of its properties in order to provide default values for all the ng-reveal directives used in the application.

-
import {{ '{' }}Component} from '@angular/core';
import {{ '{' }}NgsRevealConfig} from 'ngx-scrollreveal';
 
@Component({{ '{' }}
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [NgbTabsetConfig] // add NgsRevealConfig to the component providers 
})
export class AppComponent {{ '{' }}
  constructor(config: NgsRevealConfig) {{ '{' }}
    // customize default values of ngx-scrollreveal directives used by this component tree 
    config.duration = 5000;
    config.easing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
 
    //other options here 
  }
}
+
import {{ '{' }}Component} from '@angular/core';
import {{ '{' }}NgsRevealConfig} from 'ngx-scrollreveal';
 
@Component({{ '{' }}
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [NgsRevealConfig] // add NgsRevealConfig to the component providers 
})
export class AppComponent {{ '{' }}
  constructor(config: NgsRevealConfig) {{ '{' }}
    // customize default values of ngx-scrollreveal directives used by this component tree 
    config.duration = 5000;
    config.easing = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
 
    //other options here 
  }
}
+

Subscribing to ScrollReveal events

+
+

You can now subscribe to some events triggered by ScrollReveal before/after an element is revealed/reset.

+
import {{ '{' }} Component, OnInit, OnDestroy } from '@angular/core';
import {{ '{' }} NgsRevealService } from 'ngx-scrollreveal';
 
@Component({{ '{' }}
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy{{ '{' }}
  constructor(private revealService: NgsRevealService) {{ '{' }}
  }
  
  ngOnInit() {{ '{' }}
    // subscribe to ScrollReveal observables to react to main events 
    this.beforeRevealSubscription = this.revealService.beforeReveal$.subscribe(
      (el: HTMLElement) => {{ '{' }}
        console.log(`beforeReveal of '<${{ '{' }}el.nodeName}>.${{ '{' }}el.className}'`);
      });
 
    this.afterRevealSubscription = this.revealService.afterReveal$.subscribe(
      (el: HTMLElement) => {{ '{' }}
        console.log(`afterReveal of '<${{ '{' }}el.nodeName}>.${{ '{' }}el.className}'`);
    });
 
    this.beforeResetSubscription = this.revealService.beforeReset$.subscribe(
      (el: HTMLElement) => {{ '{' }}
        console.log(`beforeReset of '<${{ '{' }}el.nodeName}>.${{ '{' }}el.className}'`);
    });
 
    this.afterResetSubscription = this.revealService.afterReset$.subscribe(
      (el: HTMLElement) => {{ '{' }}
        console.log(`afterReset of '<${{ '{' }}el.nodeName}>.${{ '{' }}el.className}'`);
    });
  }
 
  ngOnDestroy() {{ '{' }}
    // unsubscribe to ScrollReveal observables to prevent memory leaks 
    this.beforeRevealSubscription.unsubscribe();
    this.afterRevealSubscription.unsubscribe();
    this.beforeResetSubscription.unsubscribe();
    this.afterResetSubscription.unsubscribe();
  }
}
 

Credits

ngx-scrollreveal is built upon ScrollReveal JS by Julian Lloyd. Thanks to him for the great work!