Анимируем фон при переключении экранов

source/index.html

@@ -181,6 +181,8 @@ <h2 class="slider__item-title">История</h2>
         </div>
         <div class="slider__pagination swiper-pagination"></div>
       </div>
+
+      <div class="screen__blocker" id="history-screen-blocker"></div>
     </section>
 
     <section class="screen screen--hidden screen--prizes" id="prizes">

source/js/modules/animations.js

@@ -3,3 +3,5 @@ export default () => {
     document.body.classList.add(`document-ready`);
   });
 };
+
+export const SCREEN_BLOCKER_TIMEOUT = 400;

source/js/modules/full-page-scroll.js

@@ -1,10 +1,12 @@
 import throttle from 'lodash/throttle';
+import {SCREEN_BLOCKER_TIMEOUT} from "./animations";
 
 export default class FullPageScroll {
   constructor() {
     this.THROTTLE_TIMEOUT = 1000;
     this.scrollFlag = true;
     this.timeout = null;
+    this.scrollBlockerTimeout = 0;
 
     this.screenElements = document.querySelectorAll(`.screen:not(.screen--result)`);
     this.menuElements = document.querySelectorAll(`.page-header__menu .js-menu-link`);
@@ -46,7 +48,12 @@ export default class FullPageScroll {
   }
 
   changePageDisplay() {
-    this.changeVisibilityDisplay();
+    const activeScreen = this.screenElements[this.activeScreen];
+    this.scrollBlockerTimeout = activeScreen.classList.contains(`screen--prizes`) ? SCREEN_BLOCKER_TIMEOUT : 0;
+    this.showScreenBlocker();
+    setTimeout(() => {
+      this.changeVisibilityDisplay();
+    }, this.scrollBlockerTimeout);
     this.changeActiveMenuItem();
     this.emitChangeDisplayEvent();
   }
@@ -62,6 +69,16 @@ export default class FullPageScroll {
     }, 100);
   }
 
+  showScreenBlocker() {
+    const activeScreen = this.screenElements[this.activeScreen];
+    const screenBlocker = document.querySelector(`#history-screen-blocker`);
+    if (activeScreen.classList.contains(`screen--prizes`)) {
+      screenBlocker.classList.add(`show`);
+    } else {
+      screenBlocker.classList.remove(`show`);
+    }
+  }
+
   changeActiveMenuItem() {
     const activeItem = Array.from(this.menuElements).find((item) => item.dataset.href === this.screenElements[this.activeScreen].id);
     if (activeItem) {

source/scss/blocks/screen.scss

@@ -17,6 +17,12 @@
   @media (max-width: $tablet - 1) and (orientation: landscape) {
     height: 100vh;
   }
+
+  &.active {
+    .screen__footer {
+      bottom: 0;
+    }
+  }
 }
 
 .screen__wrapper {
@@ -30,6 +36,22 @@
   z-index: 1;
 }
 
+.screen__blocker {
+  width: 100%;
+  height: 0;
+  position: absolute;
+  background-color: $c-dark;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  transition: height 0.4s cubic-bezier(0.17,1,0.8,0.98);
+
+  &.show {
+    height: 100%;
+  }
+}
+
 .screen__disclaimer {
   position: absolute;
   bottom: 0;
@@ -355,9 +377,3 @@
 .screen--rules {
   background-color: $c-dark;
 }
-
-.document-ready {
-  .screen__footer {
-    bottom: 0;
-  }
-}