added fading animaiton in scroll-to-top button

nitinsooni · Oct 5, 2024 · 7710b25 · 7710b25
1 parent 3db596b
commit 7710b25
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/css/media.css b/css/media.css
@@ -174,7 +174,7 @@
         width: 100%;
     }
 
-    #home #scroll-to-top {
+    #home .scroll-to-top {
         bottom: 1.75rem;
         right: 1.75rem;
         padding: .65rem .8rem;

diff --git a/css/style.css b/css/style.css
@@ -209,7 +209,7 @@ nav .nav-l ul .nav-links a {
     color: white;
     padding: 8px 16px;
     text-decoration: none;
-    transition: color .3s;
+    transition: color .3s ease;
 }
 
 nav .nav-l ul .nav-links a.active {
@@ -364,7 +364,7 @@ nav .nav-r a {
     padding: .9rem;
     padding-right: 8rem;
     margin-right: 3px;
-    transition: border-color .2s;
+    transition: border-color .2s ease;
 }
 
 #home .contact-box .contact-bar form .text-field:focus {
@@ -386,9 +386,8 @@ nav .nav-r a {
     cursor: url('/assets/images/link.png'), pointer;
 }
 
-#home #scroll-to-top {
+#home .scroll-to-top {
     z-index: 99;
-    display: none;
     position: fixed;
     bottom: 2rem;
     right: 2.5rem;
@@ -398,9 +397,17 @@ nav .nav-r a {
     padding: .7rem .85rem;
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .3s ease;
     backdrop-filter: blur(24px);
 }
 
+#home .scroll-to-top-show {
+    opacity: 1;
+    visibility: visible;
+}
+
 /*----------------------------------------------------*/
 
 #portfolio {
@@ -729,7 +736,7 @@ nav .nav-r a {
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 25px;
     box-shadow: rgb(24, 26, 27) 3px -3px 10px 0px inset;
-    transition: ease .5s;
+    transition: all .5s ease;
 }
 
 #contact .table .table-r .container .card > img {
@@ -781,7 +788,7 @@ nav .nav-r a {
     line-height: 1.5;
     color: var(--text);
     text-decoration: none;
-    transition: color .3s;
+    transition: color .3s ease;
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom {
@@ -795,7 +802,7 @@ nav .nav-r a {
     line-height: 2;
     color: var(--text);
     text-decoration: none;
-    transition: color .3s;
+    transition: color .3s ease;
 }
 
 #contact .table .table-r .container .card.one .content .block-bottom p {
@@ -913,7 +920,7 @@ footer .container .wrapper-r p {
 footer .container .wrapper-r p a {
     color: #ffffffb3;
     font-size: .875rem;
-    transition: color .3s;
+    transition: color .3s ease;
     text-decoration: none;
 }
 

diff --git a/index.html b/index.html
@@ -60,7 +60,7 @@ <h1>to You, Mate</h1>
                     </form>
                 </div>
             </div>
-            <button onclick="topFunction()" id="scroll-to-top"><i class="fa-solid fa-angle-up"></i></button>
+            <button onclick="topFunction()" class="scroll-to-top"><i class="fa-solid fa-angle-up"></i></button>
         </section>
         <section id="portfolio" class="section">
             <img src="/assets/images/blur-circle.webp" class="blur-circle">
@@ -198,7 +198,9 @@ <h3>Nitin Soni</h3>
         <div class="container">
             <div class="wrapper-l">
                 <h2>NITIN SONI</h2>
-                <p>Sohna<br>Gurugram, HR 122103</p>
+                <p>© <span class="year"></span> Nitin Soni.<br><br>
+                Sohna<br>
+                Gurugram, HR 122103</p>
             </div>
             <div class="wrapper-r">
                 <div class="column a">

diff --git a/js/script.js b/js/script.js
@@ -34,16 +34,15 @@ window.addEventListener('scroll', function () {
     });
 });
 
-
 // Show the scroll-to-top button when user scrolls down 20px
-let btnTop = document.getElementById('scroll-to-top');
+let btnTop = document.querySelector('.scroll-to-top');
 window.onscroll = function() {scrollFunction()};
 
 function scrollFunction() {
     if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
-        btnTop.style.display = 'block';
+        btnTop.classList.add('scroll-to-top-show');
     } else {
-        btnTop.style.display = 'none';
+        btnTop.classList.remove('scroll-to-top-show');
     }
 }
 
@@ -53,7 +52,6 @@ function topFunction() {
     document.documentElement.scrollTop = 0; // for chrome, firefox, ie and opera
 }
 
-
 // 1st nav button of portfolio card container gets in focus on site load
 window.onload = function(){
     document.getElementById('button1').classList.add('button-focus');
@@ -89,7 +87,6 @@ function scrollToCard(index) {
     cardContainer.scrollTo({ left: index * (cardWidth + marginBetweenItems) });
 }
 
-
 // Swap cards when user click non-front card
 const one = document.querySelector('.one');
 const two = document.querySelector('.two');
@@ -107,3 +104,6 @@ two.addEventListener('click', function() {
         one.classList.remove('front');
     }
 });
+
+// Dynamically change year in copyright text
+document.querySelector('.year').textContent = new Date().getFullYear();