Merge pull request #3 from Vika-0607/module1-task3

htmlacademy-animation · Jun 7, 2024 · 20f69fe · 20f69fe
2 parents 71f7a0b + 0460fa4
commit 20f69fe
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 38 deletions.
diff --git a/source/index.html b/source/index.html
@@ -78,7 +78,7 @@
   <main class="page-content">
 
     <section class="animation-screen"></section>
-
+    
     <section class="screen screen--hidden screen--intro" id="top">
       <div class="screen__wrapper">
         <div class="intro">
@@ -319,7 +319,9 @@ <h2 class="game__title">Игра</h2>
               <div class="chat__footer">
                 <form action="#" method="post" class="form" id="message-form">
                   <label for="message-field" class="visually-hidden">Поле для ввода вопроса</label>
-                  <input type="text" class="form__field" id="message-field">
+                  <div class="field__wrapper">
+                    <input type="text" class="form__field" id="message-field">
+                  </div>
                   <button class="form__button btn">
                     Узнать
                     <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -379,7 +381,9 @@ <h2 class="result__title">
           <div class="result__form">
             <form action="#" method="post" class="form form--result">
               <label for="email-field" class="form__label">зарегистрируй результат</label>
-              <input type="email" class="form__field" id="email-field" placeholder="e-mail для регистации результата и получения приза" required>
+              <div class="field__wrapper">
+                <input type="email" class="form__field" id="email-field" placeholder="e-mail для регистации результата и получения приза" required>
+              </div>
               <button class="form__button btn">
                 отправить
                 <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -431,7 +435,9 @@ <h2 class="result__title">
           <div class="result__form">
             <form action="#" method="post" class="form form--result">
               <label for="email-field2" class="form__label">зарегистрируй результат</label>
-              <input type="email" class="form__field" id="email-field2" placeholder="e-mail для регистации результата и получения приза" required>
+              <div class="field__wrapper">
+                <input type="email" class="form__field" id="email-field2" placeholder="e-mail для регистации результата и получения приза" required>
+              </div>
               <button class="form__button btn">
                 отправить
                 <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -495,6 +501,8 @@ <h2 class="result__title">
       </div>
     </section>
 
+    <section class="background-screen" id="backgroundScreen"></section>
+
   </main>
 
 </body>

diff --git a/source/js/modules/full-page-scroll.js b/source/js/modules/full-page-scroll.js
@@ -8,10 +8,14 @@ export default class FullPageScroll {
 
     this.screenElements = document.querySelectorAll(`.screen:not(.screen--result)`);
     this.menuElements = document.querySelectorAll(`.page-header__menu .js-menu-link`);
+    this.backgroundScreenElement = document.getElementById('backgroundScreen');
 
     this.activeScreen = 0;
+    this.prevScreen = null;
     this.onScrollHandler = this.onScroll.bind(this);
     this.onUrlHashChengedHandler = this.onUrlHashChanged.bind(this);
+
+    this.SCREENS_WITH_BACKGROUND = ['prizes', 'rules', 'game'];
   }
 
   init() {
@@ -39,7 +43,10 @@ export default class FullPageScroll {
     }, this.THROTTLE_TIMEOUT);
   }
 
-  onUrlHashChanged() {
+  onUrlHashChanged(event) {
+    if (event) {
+      this.prevScreen = this.activeScreen;
+    }
     const newIndex = Array.from(this.screenElements).findIndex((screen) => location.hash.slice(1) === screen.id);
     this.activeScreen = (newIndex < 0) ? 0 : newIndex;
     this.changePageDisplay();
@@ -52,14 +59,31 @@ export default class FullPageScroll {
   }
 
   changeVisibilityDisplay() {
-    this.screenElements.forEach((screen) => {
-      screen.classList.add(`screen--hidden`);
-      screen.classList.remove(`active`);
-    });
-    this.screenElements[this.activeScreen].classList.remove(`screen--hidden`);
+    let applyDelay = 0;
+    if (this.checkBackgroundAnimateNeed()) {
+      this.backgroundScreenElement.classList.add('active');
+      applyDelay = 500;
+    } else if (!this.screenNeedBackground(this.activeScreen)) {
+      this.backgroundScreenElement.classList.remove('active');
+    }
     setTimeout(() => {
-      this.screenElements[this.activeScreen].classList.add(`active`);
-    }, 100);
+      this.screenElements.forEach((screen) => {
+        screen.classList.add(`screen--hidden`);
+        screen.classList.remove(`active`);
+      });
+      this.screenElements[this.activeScreen].classList.remove(`screen--hidden`);
+      setTimeout(() => {
+        this.screenElements[this.activeScreen].classList.add(`active`);
+      }, 100);
+    }, applyDelay);
+  }
+
+  screenNeedBackground(screenIndex) {
+    return this.SCREENS_WITH_BACKGROUND.includes(this.screenElements[screenIndex].id);
+  }
+
+  checkBackgroundAnimateNeed() {
+    return this.prevScreen !== null && this.screenNeedBackground(this.activeScreen) && !this.screenNeedBackground(this.prevScreen);
   }
 
   changeActiveMenuItem() {

diff --git a/source/scss/blocks/form.scss b/source/scss/blocks/form.scss
@@ -29,12 +29,38 @@
   }
 }
 
+.field__wrapper {
+  border-radius: 3rem;
+  overflow: hidden;
+  width: calc(100% - 21rem);
+  margin-right: 3rem;
+
+  @media (min-width: $stop-scaling) {
+    margin-right: 30px;
+    width: calc(100% - 210px);
+    border-radius: 30px;
+  }
+
+  @media (orientation: portrait) {
+    margin-right: 1rem;
+    width: calc(100% - 5rem);
+  }
+
+  @media (max-width: $tablet) and (orientation: landscape) {
+    width: calc(100% - 9rem);
+  }
+
+  @media (max-width: $mobile) and (orientation: landscape) {
+    margin-right: 1rem;
+    width: calc(100% - 5rem);
+  }
+}
+
 .form__field {
   flex: none;
-  margin-right: 3rem;
   padding: 0 5.6rem;
   height: 6rem;
-  width: calc(100% - 21rem);
+  width: 100%;
   text-transform: uppercase;
   font: inherit;
   font-size: 2.4rem;
@@ -51,30 +77,20 @@
   }
 
   @media (min-width: $stop-scaling) {
-    margin-right: 30px;
     padding: 0 56px;
     height: 60px;
-    width: calc(100% - 210px);
     font-size: 24px;
     border-radius: 30px;
   }
 
   @media (orientation: portrait) {
-    margin-right: 1rem;
     padding: 0 2.5rem;
-    width: calc(100% - 5rem);
     height: 4rem;
     font-size: 1.6rem;
   }
 
-  @media (max-width: $tablet) and (orientation: landscape) {
-    width: calc(100% - 9rem);
-  }
-
   @media (max-width: $mobile) and (orientation: landscape) {
-    margin-right: 1rem;
     padding: 0 2.5rem;
-    width: calc(100% - 5rem);
     height: 4rem;
     font-size: 1.6rem;
   }
@@ -137,7 +153,7 @@
 }
 
 .form--result {
-  .form__field {
+  .field__wrapper {
     width: calc(100% - 31rem);
 
     @media (min-width: $stop-scaling) {

diff --git a/source/scss/blocks/intro.scss b/source/scss/blocks/intro.scss
@@ -94,7 +94,7 @@
   font-size: 2.4rem;
   line-height: 1.27;
   opacity: 0;
-  transform: translateY(12px);
+  transform: translateY(2rem);
 
   @media (min-width: $stop-scaling) {
     width: 509px;

diff --git a/source/scss/blocks/page-header.scss b/source/scss/blocks/page-header.scss
@@ -307,12 +307,12 @@
   .page-header__logo {
     opacity: 1;
     transform: translateX(0);
-    transition: opacity 0.5s cubic-bezier(0, 0, 0.04, 1), transform 0.5s cubic-bezier(0, 0, 0.04, 1);
+    transition: opacity 0.5s $header-footer-easing, transform 0.5s $header-footer-easing;
   }
 
   .page-header__nav {
     opacity: 1;
-    transition: opacity 0.5s cubic-bezier(0, 0, 0.04, 1);
+    transition: opacity 0.5s $header-footer-easing;
     transition-delay: 0.3s;
   }
 
@@ -321,7 +321,7 @@
       &.active {
         &::after {
           transform: scaleX(100%);
-          transition: transform 0.5s cubic-bezier(0, 0, 0.04, 1);
+          transition: transform 0.5s $header-footer-easing;
           transition-delay: 0.3s;
           transform-origin: left;
         }

diff --git a/source/scss/blocks/screen.scss b/source/scss/blocks/screen.scss
@@ -77,7 +77,7 @@
 .page-loaded {
   .screen__footer {
     transform: translateY(0);
-    transition: transform 0.3s cubic-bezier(0, 0, 0.04, 1);
+    transition: transform 0.3s $header-footer-easing;
   }
 }
 
@@ -314,11 +314,13 @@
 
 .screen--prizes {
   background-color: $c-dark;
+  z-index: 2;
 }
 
 .screen--game {
   position: relative;
   background-color: $c-dark;
+  z-index: 2;
 
   &::before {
     content: "";
@@ -364,4 +366,22 @@
 
 .screen--rules {
   background-color: $c-dark;
+  z-index: 2;
 }
+
+.background-screen {
+  background-color: $c-dark;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  transform: scaleY(0);
+
+  &.active {
+    transform: scaleY(1);
+    transform-origin: bottom;
+    transition: transform 0.5s;
+  }
+}
diff --git a/source/scss/blocks/slider.scss b/source/scss/blocks/slider.scss
@@ -97,7 +97,7 @@
   font-size: 1.8rem;
   line-height: 2rem;
   opacity: 0;
-  transform: translateX(20px);
+  transform: translateX(2rem);
 
   @media (min-width: $stop-scaling) {
     margin-top: 36px;

diff --git a/source/scss/blocks/social-block.scss b/source/scss/blocks/social-block.scss
@@ -37,7 +37,6 @@
   height: 4rem;
   color: $c-dark;
   border-radius: 50%;
-  transform: scale(0);
 
   @media (max-width: $tablet) and (orientation: portrait) {
     display: none;
@@ -50,8 +49,8 @@
   &::before {
     @include center;
     content: "";
-    width: 100%;
-    height: 100%;
+    width: 0;
+    height: 0;
     border-radius: 50%;
     background-color: $c-light;
     border: 2px solid $c-light;
@@ -104,9 +103,12 @@
 
 .page-loaded {
   .social-block__toggler {
-    transform: scale(1);
-    transition: transform 0.5s cubic-bezier(0, 0, 0.26, 1.65);
-    transition-delay: 0.5s;
+    &:before {
+      width: 100%;
+      height: 100%;
+      transition: width 0.5s $social-toggler-easing, height 0.5s $social-toggler-easing;
+      transition-delay: 0.5s;
+    }
   }
 }
 
@@ -198,7 +200,7 @@
   border: 2px solid transparent;
   border-radius: 50%;
   opacity: 0;
-  transform: translateY(8px);
+  transform: translateY(0.5rem);
 
   @media (min-width: $stop-scaling) {
     width: 40px;

diff --git a/source/scss/general/variables.scss b/source/scss/general/variables.scss
@@ -19,3 +19,6 @@ $retina-dpi: 144dpi;
 $retina-dppx: 1.5dppx;
 
 $index: 1.38871;
+
+$header-footer-easing: cubic-bezier(0, 0, 0.04, 1);
+$social-toggler-easing: cubic-bezier(0, 0, 0.26, 1.65);