Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Untitled

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