From 350b0b0c6558d685f10c4fddc8d17a4f85206e0a Mon Sep 17 00:00:00 2001 From: Mohammed Al-yaseen Date: Wed, 14 May 2025 22:31:59 +0300 Subject: [PATCH] Enhance UI with animations and smooth scrolling effects --- css/templatemo-first-portfolio-style.css | 209 +++++++++++++++++++++++ js/custom.js | 42 +++++ 2 files changed, 251 insertions(+) diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css index 743d257..c8cf7f5 100644 --- a/css/templatemo-first-portfolio-style.css +++ b/css/templatemo-first-portfolio-style.css @@ -499,6 +499,7 @@ strong { position: relative; z-index: 22; top: 70px; + animation: fadeInUp 1s ease-out; } .hero-image-wrap { @@ -526,6 +527,12 @@ strong { right: 67px; border-radius: 100%; border: 5px solid #FFF; + animation: scaleIn 1s ease-out; + transition: transform 0.3s ease; +} + +.hero-image:hover { + transform: scale(1.05); } .hero svg { @@ -574,11 +581,18 @@ strong { .about-image { border-radius: var(--border-radius-medium); + animation: slideInLeft 1s ease-out; + transition: transform 0.3s ease; +} + +.about-image:hover { + transform: scale(1.05); } .about-thumb { padding-right: 20px; padding-left: 20px; + animation: slideInRight 1s ease-out; } /*--------------------------------------- @@ -640,6 +654,8 @@ strong { margin-bottom: 24px; padding: 40px 40px 240px 40px; transition: all 0.5s; + animation: scaleIn 1s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; } .services-thumb-up { @@ -651,6 +667,7 @@ strong { .services-thumb:hover { border: 2px solid var(--secondary-color); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); + transform: translateY(-5px); } .services-thumb:hover .services-icon-wrap { @@ -675,6 +692,7 @@ strong { font-size: 90px; position: relative; bottom: 15px; + animation: float 3s ease-in-out infinite; } .services-thumb:hover .services-price-wrap { @@ -724,10 +742,14 @@ strong { margin-bottom: 24px; padding: 40px; transition: all ease 0.5s; + animation: fadeInUp 1s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; } .projects-thumb:hover { border-color: var(--secondary-color); + transform: translateY(-10px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .projects-thumb:hover .projects-image, @@ -750,6 +772,14 @@ strong { transition: all ease 0.5s; } +.projects-image { + transition: transform 0.3s ease; +} + +.projects-thumb:hover .projects-image { + transform: scale(1.05); +} + .projects-title { margin-bottom: 20px; } @@ -775,6 +805,7 @@ strong { border-bottom-right-radius: var(--border-radius-small); padding: 60px 30px 30px 30px; height: 100%; + animation: fadeInUp 1s ease-out; } .contact-info-border-start { @@ -798,6 +829,7 @@ strong { padding-top: 13px; padding-bottom: 13px; outline: none; + transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-floating > label { @@ -930,12 +962,14 @@ strong { margin-bottom: 10px; padding: 6px 14px; min-width: 70px; + transition: transform 0.3s ease, color 0.3s ease; } .footer-menu-link:hover { background: var(--secondary-color); border-color: transparent; color: var(--white-color); + transform: translateY(-3px); } /*--------------------------------------- @@ -964,12 +998,14 @@ strong { height: 40px; line-height: 40px; text-align: center; + transition: transform 0.3s ease, color 0.3s ease; } .social-icon-link:hover { background: var(--secondary-color); border-color: transparent; color: var(--white-color); + transform: translateY(-3px); } /*--------------------------------------- @@ -1177,3 +1213,176 @@ strong { min-width: inherit; } } + +/* Add these animation keyframes at the top of the file */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-50px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInRight { + from { + opacity: 0; + transform: translateX(50px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0px); + } +} + +/* Enhance hero section */ +.hero-text { + animation: fadeInUp 1s ease-out; +} + +.hero-image { + animation: scaleIn 1s ease-out; + transition: transform 0.3s ease; +} + +.hero-image:hover { + transform: scale(1.05); +} + +/* Enhance about section */ +.about-thumb { + animation: slideInRight 1s ease-out; +} + +.about-image { + animation: slideInLeft 1s ease-out; + transition: transform 0.3s ease; +} + +.about-image:hover { + transform: scale(1.05); +} + +/* Enhance projects section */ +.projects-thumb { + animation: fadeInUp 1s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.projects-thumb:hover { + transform: translateY(-10px); + box-shadow: 0 10px 20px rgba(0,0,0,0.2); +} + +.projects-image { + transition: transform 0.3s ease; +} + +.projects-thumb:hover .projects-image { + transform: scale(1.05); +} + +/* Enhance services section */ +.services-thumb { + animation: scaleIn 1s ease-out; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.services-thumb:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0,0,0,0.1); +} + +.services-icon { + animation: float 3s ease-in-out infinite; +} + +/* Enhance contact section */ +.contact-info { + animation: fadeInUp 1s ease-out; +} + +.custom-form { + animation: slideInRight 1s ease-out; +} + +/* Add smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Enhance navigation */ +.navbar { + transition: background-color 0.3s ease, box-shadow 0.3s ease; +} + +.navbar.scrolled { + background-color: rgba(255, 255, 255, 0.95); + box-shadow: 0 2px 10px rgba(0,0,0,0.1); +} + +/* Enhance buttons */ +.custom-btn { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.custom-btn:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(0,0,0,0.2); +} + +/* Add animation to social icons */ +.social-icon-link { + transition: transform 0.3s ease, color 0.3s ease; +} + +.social-icon-link:hover { + transform: translateY(-3px); + color: var(--primary-color); +} + +/* Add animation to form inputs */ +.form-control { + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-control:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 0.2rem rgba(83, 93, 161, 0.25); +} diff --git a/js/custom.js b/js/custom.js index 4088a27..f47fefc 100644 --- a/js/custom.js +++ b/js/custom.js @@ -28,4 +28,46 @@ ); } }); + + // Add navbar scroll effect + window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + + // Add animation on scroll + const animateOnScroll = function() { + const elements = document.querySelectorAll('.projects-thumb, .services-thumb, .contact-info'); + + elements.forEach(element => { + const elementPosition = element.getBoundingClientRect().top; + const screenPosition = window.innerHeight; + + if(elementPosition < screenPosition) { + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + } + }); + } + + window.addEventListener('scroll', animateOnScroll); + window.addEventListener('load', animateOnScroll); + + // Add smooth scroll for navigation links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + }); + }); })(window.jQuery);