sebastiangiro

Parallax example angular

May 19th, 2020 (edited)
1,295
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Parallax with basicScroll + angular2
  2.  
  3. ////////////////////////// html
  4.  
  5.   <div id="parallax-container" *ngIf="!parallaxDisabled">
  6.     <img class="parallax-layer"
  7.          [src]="'/assets/img/parallax/' + i + '.' + (webpEnabled? 'webp' : 'png')"
  8.          [src]="'/assets/img/parallax/' + i + '.png')"
  9.          [attr.name]="image.name? image.name : null"
  10.          [attr.data-speed]="image.speed? image.speed : 0"
  11.          *ngFor="let image of parallaxImages; let i = index">
  12.   </div>   
  13.  
  14. ////////////////////////// component
  15. parallaxDisabled: boolean = true;
  16.   parallaxWidth: number = 750;
  17.   parallaxImages: any[] = [
  18.     {speed: 86, name: 'gradient-clouds'},
  19.     {speed: 63, name: 'castle'},
  20.     {speed: 40, name: 'grass'},
  21.     {speed: 30, name: 'glass'}
  22.   ];
  23.   animating: boolean = false;
  24.  
  25.   ngAfterViewInit() {
  26.     // TODO MAYBE DISABLE THIS ON SAFARI
  27.     document.querySelectorAll('.parallax-layer').forEach((elem) => {
  28.       const modifier: number = parseInt(elem.getAttribute('data-speed'));
  29.  
  30.       basicScroll.create({
  31.         elem: elem,
  32.         from: '0',
  33.         to: '1000px',
  34.         direct: true,
  35.         props: {
  36.           '--translateY': {
  37.             from: '0',
  38.             to: `${ 10 * modifier }px`
  39.           }
  40.         }
  41.       }).start();
  42.  
  43.     });
  44.   }
  45.  
  46.   ngOnInit() {
  47.     window.addEventListener('resize', this.resize, true); // third parameter
  48.  
  49.     if (window.innerWidth >= this.parallaxWidth) {
  50.       this.parallaxDisabled = false;
  51.     }
  52.   }
  53.  
  54.   resize = (): void => {
  55.     this.parallaxDisabled = window.innerWidth < this.parallaxWidth ? true : false;
  56.   }
  57.  
  58.  scroll = (): void => {
  59.     this.animate();
  60.   }
  61.  
  62.  animate() {
  63.     window.requestAnimationFrame(() => {
  64.  
  65.       if (this.animating || this.parallaxDisabled) {
  66.         return;
  67.       }
  68.  
  69.       this.animating = true;
  70.  
  71.       const parent = document.getElementById('parallax-container');
  72.       if (!parent) {
  73.         return;
  74.       }
  75.       // let parallaxOffset = window.pageYOffset;
  76.       // let parallaxOffset = document.body.scrollTop);
  77.  
  78.       const parallaxOffset = window.scrollY;
  79.  
  80.       // Only do the parallax transform if the parent is on the view
  81.       if (parallaxOffset < parent.clientHeight) {
  82.         const children = parent.getElementsByTagName('div');
  83.  
  84.         for (let i = 0; i < children.length; i++) {
  85.           // Using translate3d for maximum performance
  86.           const speed = parseInt(children[i].getAttribute('data-speed'));
  87.           const yPos = (parallaxOffset * speed / 100).toFixed(0);
  88.           children[i].style.transform = 'translate3d(0px, ' + yPos + 'px, 0px)';
  89.  
  90.           /*
  91.           let yPos = -(parallaxOffset * i / children.length);
  92.           children[i].style.transform = 'translate3d(0px, ' + yPos + 'px, 0px)';
  93.           parent.style.transform = 'translate3d(0px, ' + -yPos + 'px, 0px)';
  94.           */
  95.         }
  96.       }
  97.  
  98.       setTimeout(() => {
  99.         this.animating = false;
  100.       });
  101.  
  102.     });
  103.   }
Add Comment
Please, Sign In to add comment