Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ng2-scrollreveal
Advanced tools
Readme
ScrollReveal JS is a great library that allows easy scroll animations for web and mobile browsers.
View all the directives in action at https://tinesoft.github.io/ng2-scrollreveal
Install above dependencies via npm. In particular for ScrollReveal JS
, run:
npm install --save scrollreveal
Note: If you are using
angular-cli
to build your app, make sure thatscrollreveal
is properly listed as a global library, by editing yourangular-cli.json
as such:
"scripts": [
"../node_modules/scrollreveal/dist/scrollreveal.js"
],
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forng2-scrollreveal
:
map: {
'ng2-scrollreveal': 'node_modules/ng2-scrollreveal/bundles/ng2-scrollreveal.min.js',
}
In your systemjs config file, meta
needs to tell the System loader how to load scrollreveal
:
meta: {
'./node_modules/scrollreveal/dist/scrollreveal.min.js': {
format: 'amd'
}
}
In your index.html file, add script tag to load scrollreveal
globally:
<!-- 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 ng2-scrollreveal
via:
npm install --save ng2-scrollreveal
Once installed you need to import the main module:
import {NgsRevealModule} from 'ng2-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 'ng2-scrollreveal';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgsRevealModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import NgsRevealModule
:
import {NgsRevealModule} from 'ng2-scrollreveal';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgsRevealModule, ...],
})
export class OtherModule {
}
The library is composed of two main directives: ngsReveal
and ngsRevealSet
.
Use this directive to reveal/hide a single DOM element upon scroll.
<div class="item" ngsReveal>..</div>
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.
Use this directive to reveal/hide a set of DOM elements upon scroll.
[ngsSelector]
attribute is required, and defines which child items must be revealed/hidden on scroll.
Note: The value is a list of CSS selectors (comma-separated).
<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>
<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.
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.
<div class="itemset" [ngsRevealSet]="{ reset:true}" [ngsInterval]="50" [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>
ng2-scrollreveal
is built upon ScrollReveal JS by Julian Lloyd. Thanks to him for the great work!
FAQs
Angular 2 directives for ScrollReveal JS: Easy scroll animations library for web and mobile browsers.
The npm package ng2-scrollreveal receives a total of 24 weekly downloads. As such, ng2-scrollreveal popularity was classified as not popular.
We found that ng2-scrollreveal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.