SHARE
TWEET

Untitled

a guest Jul 20th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const scrollAnimiation = ScrollAnimation();
  2. scrollAnimiation.initScrollAnimation();
  3. scrollAnimiation.registerListener();
  4.  
  5. const footer = Footer();
  6. footer.registerClickListener();
  7.  
  8.  
  9. function Footer() {
  10.     const footer = document.querySelector('#footer');
  11.     const footerCloseButton = document.querySelector('#footer-close-button');
  12.     const articles = document.querySelectorAll('article .page');
  13.  
  14.     const registerClickListener = () => {
  15.         footerCloseButton.onclick = () => {
  16.             footer.classList.add('footer--hidden');
  17.             articles.forEach(article => article.classList.remove('page--has-footer'));
  18.             setTimeout(() => {
  19.                 footer.classList.remove('footer--fixed');
  20.                 footerCloseButton.classList.add('hidden');
  21.             }, 300);
  22.         };
  23.     };
  24.  
  25.     return { registerClickListener };
  26. }
  27.  
  28.  
  29. function ScrollAnimation() {
  30.     const bg1 = document.querySelector('#background1');
  31.     const bg2 = document.querySelector('#background2');
  32.     const bg3 = document.querySelector('#background3');
  33.  
  34.     const article2Position = document.querySelector('#article2').offsetTop;
  35.     const article3Position = document.querySelector('#article3').offsetTop;
  36.  
  37.     const mockup1 = document.querySelector('#mockup1');
  38.     const mockup2 = document.querySelector('#mockup2');
  39.     const mockup3 = document.querySelector('#mockup3');
  40.  
  41.     const fade1StartPosition = article2Position - (window.innerHeight / 2);
  42.     const fade1EndPosition = article2Position - 100;
  43.     const fade1Hight = fade1EndPosition - fade1StartPosition;
  44.  
  45.     const fade2StartPosition = article3Position - (window.innerHeight / 2);
  46.     const fade2EndPosition = article3Position - 100;
  47.     const fade2Hight = fade2EndPosition - fade2StartPosition;
  48.  
  49.     const controlScrollStates = () => {
  50.         const scrollPosition = window.scrollY;
  51.  
  52.         if (scrollPosition < fade1StartPosition) {
  53.             bg1.style.opacity = mockup1.style.opacity = 1;
  54.             bg2.style.opacity = mockup2.style.opacity = 0;
  55.             bg3.style.opacity = mockup3.style.opacity = 0;
  56.         }
  57.  
  58.         if (fade1StartPosition < scrollPosition && scrollPosition < fade1EndPosition) {
  59.             bg1.style.opacity = mockup1.style.opacity = 1 - (1 / fade1Hight * (scrollPosition - fade1StartPosition));
  60.             bg2.style.opacity = mockup2.style.opacity = (1 / fade1Hight * (scrollPosition - fade1StartPosition));
  61.         }
  62.  
  63.         if (fade1EndPosition < scrollPosition && scrollPosition < fade2StartPosition) {
  64.             bg1.style.opacity = mockup1.style.opacity = 0;
  65.             bg2.style.opacity = mockup2.style.opacity = 1;
  66.             bg3.style.opacity = mockup3.style.opacity = 0;
  67.         }
  68.  
  69.         if (fade2StartPosition < scrollPosition && scrollPosition < fade2EndPosition) {
  70.             bg2.style.opacity = mockup2.style.opacity = 1 - (1 / fade2Hight * (scrollPosition - fade2StartPosition));
  71.             bg3.style.opacity = mockup3.style.opacity = (1 / fade2Hight * (scrollPosition - fade2StartPosition));
  72.         }
  73.  
  74.         if (fade2EndPosition < scrollPosition) {
  75.             bg1.style.opacity = mockup1.style.opacity = 0;
  76.             bg2.style.opacity = mockup2.style.opacity = 0;
  77.             bg3.style.opacity = mockup3.style.opacity = 1;
  78.         }
  79.     };
  80.  
  81.     const registerListener = () => {
  82.         window.onscroll = () => {
  83.             controlScrollStates();
  84.         };
  85.     };
  86.  
  87.     const initScrollAnimation = () => {
  88.         controlScrollStates();
  89.     };
  90.  
  91.  
  92.     return { registerListener, initScrollAnimation };
  93. }
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