htmlacademy-animation · pavel-alpinweb · Dec 23, 2024 · Dec 26, 2024 · Dec 28, 2024 · Dec 29, 2024
diff --git a/source/index.html b/source/index.html
@@ -16,7 +16,7 @@
           <path d="M0.26 1.4V14H2.276V8.906H7.334V6.44H2.276V3.848H9.872V1.4H0.26ZM12.733 14.36C15.127 14.36 16.243 12.65 16.243 9.5V1.4H14.263V8.96C14.263 11.21 13.723 11.876 12.733 11.876C11.833 11.876 11.473 11.3 11.347 10.58L9.36702 10.94C9.63702 13.046 10.663 14.36 12.733 14.36ZM18.3918 7.7C18.3918 11.372 22.3878 14.36 27.3198 14.36C32.2518 14.36 36.2478 11.372 36.2478 7.7C36.2478 4.028 32.2518 1.04 27.3198 1.04C22.3878 1.04 18.3918 4.028 18.3918 7.7ZM20.6058 7.7C20.6058 5.378 23.6118 3.524 27.3198 3.524C30.9918 3.524 33.9798 5.378 33.9798 7.7C33.9798 10.004 30.9918 11.858 27.3198 11.858C23.6118 11.858 20.6058 10.004 20.6058 7.7ZM40.403 14V8.906H40.799L49.079 14.702V12.38L44.039 8.906H44.201C47.999 8.906 49.277 7.304 49.277 5.162C49.277 3.092 47.999 1.4 44.201 1.4H38.387V14H40.403ZM43.535 3.722C45.785 3.722 47.045 4.136 47.045 5.432C47.045 6.764 45.785 7.034 43.535 7.034H40.403V3.722H43.535ZM51.6936 1.382V14H57.8676C62.7456 14 66.7236 11.534 66.7236 7.7C66.7236 3.848 62.7456 1.382 57.8676 1.382H51.6936ZM53.7096 11.624V3.722H57.5436C61.5396 3.722 64.4916 5.018 64.4916 7.7C64.4916 10.238 61.5396 11.624 57.5436 11.624H53.7096ZM73.1832 14.018H74.9832V5H73.1832V14.018ZM72.9132 1.976C72.9132 2.57 73.3992 3.092 74.0832 3.092C74.7492 3.092 75.2352 2.57 75.2352 1.976C75.2352 1.382 74.7672 0.805999 74.0832 0.805999C73.3812 0.805999 72.9132 1.382 72.9132 1.976ZM76.7867 14H78.5687V9.104C78.7487 8.006 79.5947 6.962 81.0887 6.962C82.1147 6.962 83.2667 7.448 83.2667 9.554V14H85.0487V9.014C85.0487 6.152 83.2307 4.73 81.3587 4.73C79.9187 4.73 79.0727 5.558 78.5687 6.854V5H76.7867V14ZM90.9898 14.27C93.5098 14.27 95.3818 12.506 95.7238 10.328H94.0498C93.7258 11.3 92.6998 12.02 90.9898 12.02C88.8478 12.02 87.7678 10.922 87.7678 9.59C87.7678 8.24 88.8478 6.962 90.9898 6.962C92.7538 6.962 93.7978 7.844 94.0858 8.924H95.7418C95.4358 6.71 93.6178 4.73 90.9898 4.73C88.0918 4.73 86.1298 7.124 86.1298 9.59C86.1298 12.074 88.1278 14.27 90.9898 14.27ZM97.0693 12.938C97.0693 13.658 97.5553 14.144 98.2753 14.144C98.9953 14.144 99.4813 13.658 99.4813 12.938C99.4813 12.2 98.9953 11.714 98.2753 11.714C97.5553 11.714 97.0693 12.2 97.0693 12.938Z" fill="currentColor"/>
         </svg>
       </a>
-      <button class="page-header__toggler js-menu-toggler" type="button" aria-label="Управление мобильным меню"><span>Меню</span></button>
+      <button class="page-header__toggler js-social-block-toggle" type="button" aria-label="Управление мобильным меню"><span>Меню</span></button>
       <nav class="page-header__nav">
         <div class="page-header__menu js-menu" id="menu">
           <ul>
@@ -39,21 +39,21 @@
         </div>
         <div class="page-header__social">
           <div class="social-block js-social-block">
-            <button class="social-block__toggler" aria-label="Управлять блоком с социальными кнопками">
+            <button class="social-block__toggler js-social-block-toggler" aria-label="Управлять блоком с социальными кнопками">
               <svg width="26" height="22" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M19.6721 7.43664C21.6273 7.43664 23.213 5.85095 23.213 3.89566C23.213 1.94037 21.6273 0.354675 19.6721 0.354675C17.7168 0.354675 16.1311 1.94037 16.1311 3.89566C16.1311 4.19968 16.1728 4.49178 16.2458 4.77345L7.21751 8.95527C6.57519 8.05214 5.52303 7.46049 4.33078 7.46049C2.37549 7.46049 0.789795 9.04618 0.789795 11.0015C0.789795 12.9568 2.37549 14.5425 4.33078 14.5425C5.52303 14.5425 6.57668 13.9508 7.21751 13.0477L16.2458 17.2295C16.1743 17.5112 16.1311 17.8033 16.1311 18.1073C16.1311 20.0626 17.7168 21.6483 19.6721 21.6483C21.6273 21.6483 23.213 20.0626 23.213 18.1073C23.213 16.152 21.6273 14.5663 19.6721 14.5663C18.4798 14.5663 17.4262 15.158 16.7853 16.0611L7.75701 11.8793C7.82854 11.5976 7.87176 11.3055 7.87176 11.0015C7.87176 10.6974 7.83003 10.4053 7.75701 10.1237L16.7853 5.94186C17.4262 6.84499 18.4783 7.43664 19.6721 7.43664Z" fill="currentColor"/>
               </svg>
             </button>
             <ul class="social-block__list">
               <li>
-                <a class="social-block__link social-block__link--fb" href="#" aria-label="Мы на Facebook">
+                <a class="social-block__link js-social-link social-block__link--fb" href="#" aria-label="Мы на Facebook">
                   <svg width="8" height="17" viewBox="0 0 8 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M4.24646 16.9899H1.09275L1.05793 8.49828H0V5.30707H1.05793V3.81124C1.05793 1.42084 2.57654 0 5.21735 0H7.41758V3.18585H5.30841C4.28262 3.18585 4.2478 3.48582 4.2478 4.24914V5.30707H7.42964L7.16716 8.49828H4.2478V16.9899H4.24646Z" fill="currentColor"/>
                   </svg>
                 </a>
               </li>
               <li>
-                <a class="social-block__link social-block__link--insta" href="#" aria-label="Мы в Instagram">
+                <a class="social-block__link js-social-link social-block__link--insta" href="#" aria-label="Мы в Instagram">
                   <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M11.0197 0H4.19806C2.14246 0 0.471191 1.66993 0.471191 3.72285V10.5499C0.471191 12.6082 2.14112 14.2727 4.19806 14.2727H11.0197C13.0753 14.2727 14.7466 12.6082 14.7466 10.5499V3.72285C14.7466 1.67127 13.0753 0 11.0197 0ZM11.0197 12.4849H4.19806C3.13076 12.4849 2.26432 11.6158 2.26432 10.5512V3.72419C2.26432 2.65956 3.13076 1.79715 4.19806 1.79715H11.0197C12.087 1.79715 12.9535 2.6609 12.9535 3.72419V10.5512C12.9535 11.6145 12.087 12.4849 11.0197 12.4849Z" fill="currentColor"/>
                     <path d="M7.60887 3.11084C5.38989 3.11084 3.58203 4.9187 3.58203 7.14036C3.58203 9.35532 5.38989 11.1645 7.60887 11.1645C9.83053 11.1645 11.6357 9.35666 11.6357 7.14036C11.6357 4.9187 9.83053 3.11084 7.60887 3.11084ZM7.60887 9.36871C6.37551 9.36871 5.37784 8.37372 5.37784 7.14036C5.37784 5.90699 6.37551 4.90665 7.60887 4.90665C8.83822 4.90665 9.84259 5.90833 9.84259 7.14036C9.84392 8.37238 8.83822 9.36871 7.60887 9.36871Z" fill="currentColor"/>
@@ -62,7 +62,7 @@
                 </a>
               </li>
               <li>
-                <a class="social-block__link social-block__link--vk" href="#" aria-label="Мы ВКонтакте">
+                <a class="social-block__link js-social-link social-block__link--vk" href="#" aria-label="Мы ВКонтакте">
                   <svg width="17" height="10" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M14.1234 4.9002C14.1234 4.9002 16.3623 1.72708 16.5866 0.680242C16.6595 0.312285 16.4947 0.103188 16.1069 0.103188C16.1069 0.103188 14.8193 0.103188 14.168 0.103188C13.7235 0.103188 13.5587 0.293278 13.4235 0.579768C13.4235 0.579768 12.3724 2.82553 11.0969 4.24712C10.6861 4.70333 10.4781 4.84318 10.2511 4.84318C10.0646 4.84318 9.98625 4.6911 9.98625 4.27834V0.649016C9.98625 0.147997 9.92545 0.00135496 9.5066 0.00135496H6.39628C6.15578 0.00135496 6.0085 0.134417 6.0085 0.324506C6.0085 0.801084 6.73406 0.908351 6.73406 2.20231V4.87305C6.73406 5.40529 6.70569 5.61575 6.45303 5.61575C5.78016 5.61575 4.19528 3.30618 3.30623 0.678887C3.12923 0.145282 2.93737 0 2.43475 0H0.486409C0.205373 0 0 0.190085 0 0.476576C0 0.991172 0.60666 3.40801 2.99277 6.64358C4.59927 8.8201 6.70569 10 8.60269 10C9.76196 10 10.0416 9.80312 10.0416 9.31432V7.63883C10.0416 7.22607 10.2065 7.04956 10.4429 7.04956C10.7078 7.04956 11.1847 7.13238 12.2805 8.22268C13.5843 9.47862 13.6762 10 14.3896 10H16.5676C16.7919 10 17 9.89273 17 9.52342C17 9.02919 16.3623 8.15343 15.384 7.10659C14.9801 6.56755 14.3302 5.98914 14.1248 5.72301C13.8275 5.40801 13.9154 5.23014 14.1234 4.9002Z" fill="currentColor"/>
                   </svg>
@@ -168,12 +168,12 @@ <h2 class="slider__item-title">История</h2>
           </div>
         </div>
         <div class="slider__controls">
-          <button class="slider__control slider__control--prev js-control-prev" type="button" aria-label="Показать предыдущую историю">
+          <button class="slider__control slider__control--prev js-control js-control-prev" type="button" aria-label="Показать предыдущую историю">
             <svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M11 1L1 11L11 21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
             </svg>
           </button>
-          <button class="slider__control slider__control--next js-control-next" type="button" aria-label="Показать следующую историю">
+          <button class="slider__control slider__control--next js-control js-control-next" type="button" aria-label="Показать следующую историю">
             <svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M1 1L11 11L1 21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
             </svg>

diff --git a/source/js/modules/ChangeThemeColor.js b/source/js/modules/ChangeThemeColor.js
@@ -0,0 +1,21 @@
+const sliderControls = document.querySelectorAll(`.js-control`);
+const pageHeaderMenu = document.querySelector(`.js-menu`);
+const socialBlockToggler = document.querySelector(`.js-social-block-toggler`);
+const socialLink = document.querySelectorAll(`.js-social-link`);
+
+const themes = [`purple`, `blue`, `grey`];
+
+export const themeColorElements = [...sliderControls, pageHeaderMenu, socialBlockToggler, ...socialLink];
+
+export const setThemeColor = function (theme) {
+  for (const element of themeColorElements) {
+    resetThemeColor(element);
+    element.classList.add(theme);
+  }
+};
+
+export const resetThemeColor = function (element) {
+  for (let color of themes) {
+    element.classList.remove(color);
+  }
+};
diff --git a/source/js/modules/full-page-scroll.js b/source/js/modules/full-page-scroll.js
@@ -1,5 +1,6 @@
 import throttle from 'lodash/throttle';
 import {SCREEN_BLOCKER_TIMEOUT} from "./animations";
+import {elements, resetThemeColor, setThemeColor, themeColorElements} from "./ChangeThemeColor";
 
 export default class FullPageScroll {
   constructor() {
@@ -50,6 +51,13 @@ export default class FullPageScroll {
   changePageDisplay() {
     const activeScreen = this.screenElements[this.activeScreen];
     this.scrollBlockerTimeout = activeScreen.classList.contains(`screen--prizes`) ? SCREEN_BLOCKER_TIMEOUT : 0;
+    if (activeScreen.classList.contains(`screen--story`)) {
+      setThemeColor(`purple`);
+    } else {
+      for (const element of themeColorElements) {
+        resetThemeColor(element);
+      }
+    }
     this.showScreenBlocker();
     setTimeout(() => {
       this.changeVisibilityDisplay();

diff --git a/source/js/modules/menu.js b/source/js/modules/menu.js
@@ -1,6 +1,6 @@
 export default () => {
   let header = document.querySelector(`.js-header`);
-  let menuToggler = document.querySelector(`.js-menu-toggler`);
+  let menuToggler = document.querySelector(`.js-social-block-toggle`);
   let menuLinks = document.querySelectorAll(`.js-menu-link`);
 
   if (menuToggler) {

diff --git a/source/js/modules/slider.js b/source/js/modules/slider.js
@@ -1,4 +1,5 @@
 import Swiper from "swiper";
+import {setThemeColor} from "./ChangeThemeColor";
 
 export default () => {
   let storySlider;
@@ -19,12 +20,16 @@ export default () => {
           slideChange: () => {
             if (storySlider.activeIndex === 0 || storySlider.activeIndex === 1) {
               sliderContainer.style.backgroundImage = `url("img/slide1.jpg"), linear-gradient(180deg, rgba(83, 65, 118, 0) 0%, #523E75 16.85%)`;
+              setThemeColor(`purple`);
             } else if (storySlider.activeIndex === 2 || storySlider.activeIndex === 3) {
               sliderContainer.style.backgroundImage = `url("img/slide2.jpg"), linear-gradient(180deg, rgba(45, 54, 179, 0) 0%, #2A34B0 16.85%)`;
+              setThemeColor(`blue`);
             } else if (storySlider.activeIndex === 4 || storySlider.activeIndex === 5) {
               sliderContainer.style.backgroundImage = `url("img/slide3.jpg"), linear-gradient(180deg, rgba(92, 138, 198, 0) 0%, #5183C4 16.85%)`;
+              setThemeColor(`grey`);
             } else if (storySlider.activeIndex === 6 || storySlider.activeIndex === 7) {
               sliderContainer.style.backgroundImage = `url("img/slide4.jpg"), linear-gradient(180deg, rgba(45, 39, 63, 0) 0%, #2F2A42 16.85%)`;
+              setThemeColor(`purple`);
             }
           },
           resize: () => {
@@ -53,12 +58,16 @@ export default () => {
           slideChange: () => {
             if (storySlider.activeIndex === 0) {
               sliderContainer.style.backgroundImage = `url("img/slide1.jpg")`;
+              setThemeColor(`purple`);
             } else if (storySlider.activeIndex === 2) {
               sliderContainer.style.backgroundImage = `url("img/slide2.jpg")`;
+              setThemeColor(`blue`);
             } else if (storySlider.activeIndex === 4) {
               sliderContainer.style.backgroundImage = `url("img/slide3.jpg")`;
+              setThemeColor(`grey`);
             } else if (storySlider.activeIndex === 6) {
               sliderContainer.style.backgroundImage = `url("img/slide4.jpg")`;
+              setThemeColor(`purple`);
             }
           },
           resize: () => {

diff --git a/source/scss/blocks/form.scss b/source/scss/blocks/form.scss
@@ -113,6 +113,7 @@
     margin-right: 1rem;
     padding: 0 2.5rem;
     width: calc(100% - 5rem);
+    right: 5rem;
     height: 4rem;
     font-size: 1.6rem;
   }
@@ -186,41 +187,51 @@
 }
 
 .form--result {
+
   .form__button {
     opacity: 0;
   }
 
   .form__field {
     width: 0;
-    @media (min-width: $stop-scaling) {
-      width:  0;
-    }
-
-    @media (orientation: portrait) {
-      width:  0;
-    }
-
-    @media (max-width: $tablet) and (orientation: landscape) {
-      width: 0;
-    }
-
-    @media (max-width: $mobile) and (orientation: landscape) {
-      width: 0;
-    }
   }
 }
 
 .screen--game.active {
   .form__field {
     padding: 0 5.6rem;
     width: calc(100% - 21rem);
+
+    @media (orientation: portrait) {
+      width: calc(100% - 5rem);
+    }
   }
 }
 
 .screen--result.screen--show {
   .form__field{
-    animation: result-input 0.5s linear forwards;
-    animation-delay: 1s;
+    padding: 0 5.6rem;
+    opacity: 1;
+    width: calc(100% - 31rem);
+
+    @media (min-width: $stop-scaling) {
+      width: calc(100% - 310px);
+    }
+
+    @media (orientation: portrait) {
+      padding: 0 2.5rem;
+      width: calc(100% - 5rem);
+    }
+
+    @media (max-width: $tablet) and (orientation: landscape) {
+      padding: 0 2.5rem;
+      width: calc(100% - 9rem);
+    }
+
+    @media (max-width: $mobile) and (orientation: landscape) {
+      padding: 0 2.5rem;
+      width: calc(100% - 5rem);
+    }
   }
   .form__button {
     animation: form-btn-color 0.75s, form-btn-fade 0.5s;

diff --git a/source/scss/blocks/intro.scss b/source/scss/blocks/intro.scss
@@ -32,6 +32,11 @@
   font-size: 12rem;
   line-height: 1.2em;
   letter-spacing: -0.04em;
+  transform: translateY(50%);
+
+  .text__word {
+    margin: -50px 5px 0;
+  }
 
   @media (min-width: $stop-scaling) {
     max-width: 990px;
@@ -40,7 +45,7 @@
 
   @media (max-width: $tablet) and (orientation: portrait) {
     max-width: 100%;
-    font-size: 3.6rem;
+    font-size: 3.5rem;
   }
 
   @media (max-width: $tablet) and (orientation: landscape) {
@@ -157,7 +162,7 @@
   font-family: $font-alt;
   font-weight: 400;
   font-size: 4.8rem;
-  line-height: 0.906;
+  line-height: 1em;
   letter-spacing: -0.04em;
 
   @media (min-width: $stop-scaling) {

diff --git a/source/scss/blocks/page-header.scss b/source/scss/blocks/page-header.scss
@@ -150,6 +150,7 @@
     padding: 4rem 3.5rem;
     color: $c-dark;
     background-color: $c-light;
+    transition: transform 0.3s ease-out;
 
     .page-header--menu-opened & {
       transform: translateX(0);
@@ -185,6 +186,51 @@
   line-height: 1.0418;
   color: $c-light;
 
+  &.purple {
+    a {
+      &:hover,
+      &:focus {
+        color: $c-dark !important;
+        outline: none;
+
+        &::after {
+          opacity: 1;
+          background-color: $c-dark !important;
+        }
+      }
+    }
+  }
+
+  &.blue {
+    a {
+      &:hover,
+      &:focus {
+        color: $c-blue !important;
+        outline: none;
+
+        &::after {
+          opacity: 1;
+          background-color: $c-blue !important;
+        }
+      }
+    }
+  }
+
+  &.grey {
+    a {
+      &:hover,
+      &:focus {
+        color: $c-grey-accent !important;
+        outline: none;
+
+        &::after {
+          opacity: 1;
+          background-color: $c-grey-accent !important;
+        }
+      }
+    }
+  }
+
   @media (min-width: $stop-scaling) {
     font-size: 12px;
   }

diff --git a/source/scss/blocks/result.scss b/source/scss/blocks/result.scss
@@ -128,6 +128,21 @@
   }
 }
 
+@keyframes result-btn-fade-out {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes result-btn-scroll {
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+}
+
 .result {
   flex-grow: 1;
   display: flex;
@@ -150,6 +165,17 @@
   @media (max-width: $mobile) and (orientation: landscape) {
     padding: 3rem 0;
   }
+
+  &--negative {
+    .result__button {
+      opacity: 0;
+      transition: opacity 0.3s ease;
+
+      span {
+        transform: translateX(8rem) rotate(90deg);
+      }
+    }
+  }
 }
 
 .result__image {
@@ -438,3 +464,15 @@ img.result__prize-image {
     animation-delay: 0.47s;
   }
 }
+
+.screen--result.screen--show {
+  .result--negative {
+    .result__button {
+      animation: result-btn-fade-out 0.5s forwards;
+
+      span {
+        animation: result-btn-scroll 0.5s forwards;
+      }
+    }
+  }
+}