Merge pull request #2 from Vika-0607/module1-task2

htmlacademy-animation · Jun 5, 2024 · 71f7a0b · 71f7a0b
2 parents 4eb5de1 + a259974
commit 71f7a0b
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 6 deletions.
diff --git a/source/js/script.js b/source/js/script.js
@@ -21,3 +21,7 @@ social();
 
 const fullPageScroll = new FullPageScroll();
 fullPageScroll.init();
+
+window.addEventListener('load', function () {
+    document.body.classList.add('page-loaded');
+});
diff --git a/source/scss/blocks/intro.scss b/source/scss/blocks/intro.scss
@@ -171,6 +171,7 @@
       opacity: 1;
       transform: translateY(0);
       transition: opacity 0.7s, transform 0.7s;
+      transition-delay: 1s;
     }
   }
 }
diff --git a/source/scss/blocks/page-header.scss b/source/scss/blocks/page-header.scss
@@ -35,6 +35,8 @@
   padding: 1rem 0;
   width: 10rem;
   color: $c-light;
+  opacity: 0;
+  transform: translateX(-1rem);
 
   @media (min-width: $stop-scaling) {
     top: -5px;
@@ -130,6 +132,7 @@
 .page-header__nav {
   display: flex;
   align-items: center;
+  opacity: 0;
 
   @media (max-width: $tablet) and (orientation: portrait) {
     position: fixed;
@@ -267,12 +270,6 @@
       }
     }
 
-    &.active {
-      &::after {
-        transform: scaleX(100%);
-      }
-    }
-
     &:hover,
     &:focus {
       color: $c-purple;
@@ -305,3 +302,30 @@
     width: 100%;
   }
 }
+
+.page-loaded {
+  .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);
+  }
+
+  .page-header__nav {
+    opacity: 1;
+    transition: opacity 0.5s cubic-bezier(0, 0, 0.04, 1);
+    transition-delay: 0.3s;
+  }
+
+  .page-header__menu {
+    a {
+      &.active {
+        &::after {
+          transform: scaleX(100%);
+          transition: transform 0.5s cubic-bezier(0, 0, 0.04, 1);
+          transition-delay: 0.3s;
+          transform-origin: left;
+        }
+      }
+    }
+  }
+}
diff --git a/source/scss/blocks/screen.scss b/source/scss/blocks/screen.scss
@@ -47,6 +47,10 @@
   background-color: $c-light;
   z-index: 1;
 
+  @media (min-width: $tablet) {
+    transform: translateY(2.8rem);
+  }
+
   @media (max-width: $tablet) and (orientation: portrait) {
     width: 3.5rem;
     height: 3.5rem;
@@ -70,6 +74,13 @@
   }
 }
 
+.page-loaded {
+  .screen__footer {
+    transform: translateY(0);
+    transition: transform 0.3s cubic-bezier(0, 0, 0.04, 1);
+  }
+}
+
 .screen__footer-wrapper {
   @include container;
 

diff --git a/source/scss/blocks/social-block.scss b/source/scss/blocks/social-block.scss
@@ -37,6 +37,7 @@
   height: 4rem;
   color: $c-dark;
   border-radius: 50%;
+  transform: scale(0);
 
   @media (max-width: $tablet) and (orientation: portrait) {
     display: none;
@@ -101,6 +102,14 @@
   }
 }
 
+.page-loaded {
+  .social-block__toggler {
+    transform: scale(1);
+    transition: transform 0.5s cubic-bezier(0, 0, 0.26, 1.65);
+    transition-delay: 0.5s;
+  }
+}
+
 .social-block__list {
   @include list-reset;
   position: absolute;