Animar un componente basado en la posicion del scroll Angular 4+

Hay muchas paginas que cuando haces scroll y llega a cierta posición los elementos cambian o te siguen para este caso el menu te seguirá cuando el scroll halla avanzado hasta que ya no se ve y despues se seguirá viendo y una vez que vayas hacia atras volverá a la posición inicial.

Para este ejemplo utilizaremos HostListener que nos ayudará a rastrear la posición del componente recuerden que este ejemplo es para Angular 4+ yo lo probe en Angular 5 y si funciona correctamente.

primero importamos HostListener y ElementRef en nuestro componente para luego implementar la funcionalidad, y también importamos los elementos de para animaciones de angular/animations esto es para cambiar el style una vez que el scroll llegue al tamaño del elemento.

import { Component, HostListener, ElementRef } from '@angular/core';

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

 

Nuestro próximo paso será agregar las “animaciones”, para cambiar los estilos del elemento, yo hice estas pero pueden modificarlas

@Component({
  selector: 'crm-pre-production',
  templateUrl: './pre-production.component.html',
  styleUrls: ['./pre-production.component.css'],
  animations: [
    trigger('scrollAnimation',[
      state('scrolled', style({
        position: 'fixed',
        zIndex: 1,
        width: '100%',
        top: 0,
        backgroundColor: '#fafafa'
      })),
      state('normal', style({
        position: 'relative'
      })),
      transition('scrolled => normal', animate('700ms ease-out')),
      transition('normal => scrolled', animate('700ms ease-in'))
    ])
  ]
})

Lo que hace ahí es definir los estados de las animaciones, cuando esta en normal tiene un estilo y cuando se vuelve scrolled pasa a posición fixed, y el z-index lo trae enfrente y el background se cambia porque se veía transparente, aparte el ancho hace que abarque toda la pantalla y el margen de arriba (top) lo pasa a cero porque quieres el elemento hacia arriba.

export class PreProductionComponent {

  state = 'normal'

  constructor(public el: ElementRef) { }

  @HostListener('window:scroll', ['$event'])
    checkScroll() {
      const componentPosition = this.el.nativeElement.offsetTop
      const scrollPosition = window.pageYOffset

      if (scrollPosition >= componentPosition) {
        this.state = 'scrolled'
      } else {
        this.state = 'normal'
      }

    }

}

 

El HostListener nos va estar rastreando el evento window:scroll que es cuando se le hace scroll a la pagina entonces despues va a obtener la posición del elemento que queremos que cambie y obtendremos la posición en Y de la ventana, si esta es mayor a la posición del elemento cambiamos el state a ‘scrolled’ si no se queda normal.

Ya por ultimo añadimos a nuestro elemento en este caso un div el evento que se va lanzar para hacer la transición

<div [@scrollAnimation]="state">
...some text here
</div>

 

y asi queda.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Do NOT follow this link or you will be banned from the site!
WP Facebook Auto Publish Powered By : XYZScripts.com