diff --git a/source/index.html b/source/index.html
index 99ffe59..7189b02 100644
--- a/source/index.html
+++ b/source/index.html
@@ -78,7 +78,7 @@
-
+
diff --git a/source/js/modules/full-page-scroll.js b/source/js/modules/full-page-scroll.js
index 45a2fcb..754bd34 100644
--- 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
index 090bff4..26f6818 100644
--- 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
index d959caf..de55e46 100644
--- 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
index 8520c7a..281d485 100644
--- 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
index 3333622..c91a6f0 100644
--- 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;
+ }
+}
\ No newline at end of file
diff --git a/source/scss/blocks/slider.scss b/source/scss/blocks/slider.scss
index dab52b1..2bb25e7 100644
--- 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
index 89d15da..1509781 100644
--- 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
index 63a8f35..895e350 100644
--- 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);
\ No newline at end of file