mp-blurred-scroll

ng2-blurred-scroll

Angular2 component for scrolling content underneath an opal glas header`

Usage

<mp-blurred-scroll #mpBlurredScroll>

  <mp-blurred-scroll-header>
    header content goes here...
  </mp-blurred-scroll-header>

  <mp-blurred-scroll-content>
    scrolled content goes here...
  </mp-blurred-scroll-content>

</mp-blurred-scroll>

and call this.mpBlurredScroll.renderBlurredContent(); in your parent component once your content is ready (This is to provide access to render this component for non static content).

As mp-blurred-scroll-header and mp-blurred-scroll-content are no separate components, add this to your modules.ts.

@NgModule({
  // Add this
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Options:

• blur (in px for the blur effect, default: 5)
• opacity (of the header, default: 0.8)
• color (background-color of the header, default: white)

<mp-blurred-scroll blur="5" opacity="0.8" color="'white'">

Demo