mirror of
https://github.com/neosubhamoy/neosubhamoy-portfolio.git
synced 2025-12-19 15:53:07 +05:30
(feat): improved serchbar open, close animation and added blurry search background (refactor): updated flotingbar config
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
<div class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] backdrop-filter backdrop-blur-lg"></div>
|
||||
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
|
||||
<div id="searchbar" class="searchbar bg-bg_secondary rounded-full p-[0.30rem] flex items-center cursor-pointer mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_extratransparent transition transform duration-300">
|
||||
<button class="bg-accent_primary px-3 py-2 rounded-full"><i class="fa-solid fa-magnifying-glass text-bg_primary"></i></button>
|
||||
<p class="ml-3 mr-4 text-accent_three">SEARCH</p>
|
||||
<p id="searchtext" class="ml-3 mr-4 text-accent_three">Search</p>
|
||||
<input id="searchinput" class="w-full mx-2 bg-bg_secondary caret-accent_primary outline-none hidden" type="text" placeholder="Type to Search Something . . ." name="search-input">
|
||||
</div>
|
||||
<button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
|
||||
<button id="closebutton" class="closebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
|
||||
|
||||
@@ -1 +1 @@
|
||||
<div id="preloader" class="absolute top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
|
||||
<div id="preloader" class="fixed top-0 right-0 h-full w-screen z-[100] flex justify-center items-center bg-bg_primary overflow-hidden"><div class="spinner border-[5px] border-accent_secondary_transparent border-t-[5px] border-t-accent_primary rounded-[50%] h-[50px] w-[50px] animate-spin"></div></div>
|
||||
@@ -78,6 +78,8 @@ background: #38BDF8;
|
||||
fill: red;
|
||||
} */
|
||||
|
||||
/* --- floatingbar styling --- */
|
||||
|
||||
.floatingbar-slide-down {
|
||||
transform: translateY(20vh);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
@@ -89,7 +91,7 @@ background: #38BDF8;
|
||||
}
|
||||
|
||||
.floatingbar-click-slide-up {
|
||||
transform: translateY(-55vh);
|
||||
transform: translateY(-70vh);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -101,11 +103,13 @@ background: #38BDF8;
|
||||
.searchbar-click-increase-width {
|
||||
animation: increaseSearchbarWidth 0.5s ease-in-out;
|
||||
width: 40vw;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
.searchbar-click-decrease-width {
|
||||
animation: decreaseSearchbarWidth 0.5s ease-in-out;
|
||||
width: fit-content;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes increaseSearchbarWidth {
|
||||
@@ -116,6 +120,7 @@ background: #38BDF8;
|
||||
width: 40vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes decreaseSearchbarWidth {
|
||||
from {
|
||||
width: 40vw;
|
||||
@@ -123,4 +128,38 @@ background: #38BDF8;
|
||||
to {
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
.searchbar-click-increase-width {
|
||||
animation: increaseSearchbarWidth 0.5s ease-in-out;
|
||||
width: 80vw;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
.searchbar-click-decrease-width {
|
||||
animation: decreaseSearchbarWidth 0.5s ease-in-out;
|
||||
width: fit-content;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes increaseSearchbarWidth {
|
||||
from {
|
||||
width: 10vw;
|
||||
}
|
||||
to {
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes decreaseSearchbarWidth {
|
||||
from {
|
||||
width: 80vw;
|
||||
}
|
||||
to {
|
||||
width: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,6 +3,8 @@ const floatingBar = document.getElementById("floating-bar");
|
||||
const searchBar = document.getElementById("searchbar");
|
||||
const shareBtn = document.getElementById("sharebutton");
|
||||
const closeBtn = document.getElementById("closebutton");
|
||||
const searchTxt = document.getElementById("searchtext");
|
||||
const searchInput = document.getElementById("searchinput");
|
||||
let lastScrollTop = 0;
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
@@ -24,46 +26,53 @@ window.addEventListener("scroll", function () {
|
||||
});
|
||||
|
||||
// function to open floating search window
|
||||
function activate_search(searchBar, floatingBar, closeBtn, shareBtn) {
|
||||
function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
|
||||
floatingBar.classList.remove("floatingbar-click-slide-down");
|
||||
floatingBar.classList.add("floatingbar-click-slide-up");
|
||||
searchBar.classList.remove("searchbar-click-decrease-width");
|
||||
searchBar.classList.add("searchbar-click-increase-width");
|
||||
closeBtn.classList.remove("hidden");
|
||||
shareBtn.classList.add("hidden");
|
||||
searchTxt.classList.add("hidden");
|
||||
searchInput.classList.remove("hidden");
|
||||
searchInput.focus();
|
||||
document.body.classList.add("overflow-hidden");
|
||||
}
|
||||
|
||||
// function to close floating search window
|
||||
function close_search(searchBar, floatingBar, closeBtn, shareBtn) {
|
||||
function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) {
|
||||
floatingBar.classList.remove("floatingbar-click-slide-up");
|
||||
floatingBar.classList.add("floatingbar-click-slide-down");
|
||||
searchBar.classList.remove("searchbar-click-increase-width");
|
||||
searchBar.classList.add("searchbar-click-decrease-width");
|
||||
closeBtn.classList.add("hidden");
|
||||
shareBtn.classList.remove("hidden");
|
||||
searchTxt.classList.remove("hidden");
|
||||
searchInput.classList.add("hidden");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
}
|
||||
|
||||
// when the search icon is clicked
|
||||
searchBar.addEventListener("click", function () {
|
||||
activate_search(searchBar, floatingBar, closeBtn, shareBtn);
|
||||
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
|
||||
});
|
||||
|
||||
// when ALT + K shortcut key is pressed
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.altKey && event.key === "k") {
|
||||
activate_search(searchBar, floatingBar, closeBtn, shareBtn);
|
||||
activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
|
||||
}
|
||||
});
|
||||
|
||||
// when close button is clicked
|
||||
closeBtn.addEventListener("click", function () {
|
||||
close_search(searchBar, floatingBar, closeBtn, shareBtn);
|
||||
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
|
||||
});
|
||||
|
||||
// when ESC key is pressed
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.key === "Escape") {
|
||||
close_search(searchBar, floatingBar, closeBtn, shareBtn);
|
||||
close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -615,6 +615,10 @@ video {
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
@@ -941,10 +945,6 @@ video {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-\[40vw\] {
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
.rotate-\[15deg\] {
|
||||
--tw-rotate: 15deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -1094,6 +1094,10 @@ video {
|
||||
border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.bg-accent_primary {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
|
||||
@@ -1201,11 +1205,6 @@ video {
|
||||
padding-bottom: 0.30rem;
|
||||
}
|
||||
|
||||
.px-\[0\.82rem\] {
|
||||
padding-left: 0.82rem;
|
||||
padding-right: 0.82rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1291,6 +1290,10 @@ video {
|
||||
color: rgb(15 23 42 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.caret-accent_primary {
|
||||
caret-color: #38BDF8;
|
||||
}
|
||||
|
||||
.opacity-20 {
|
||||
opacity: 0.2;
|
||||
}
|
||||
@@ -1355,6 +1358,11 @@ video {
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.outline-none {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.blur-2xl {
|
||||
--tw-blur: blur(40px);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
@@ -1365,6 +1373,17 @@ video {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
|
||||
.backdrop-blur-lg {
|
||||
--tw-backdrop-blur: blur(16px);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
||||
}
|
||||
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||
@@ -1385,24 +1404,6 @@ video {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-\[width\] {
|
||||
transition-property: width;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-\[width_box-shadow\] {
|
||||
transition-property: width box-shadow;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.transition-\[width\2c _box-shadow\] {
|
||||
transition-property: width, box-shadow;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.duration-100 {
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
@@ -1415,10 +1416,6 @@ video {
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
.duration-1000 {
|
||||
transition-duration: 1000ms;
|
||||
}
|
||||
|
||||
.last\:mb-3:last-child {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user