neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(feat): implemented basic floating-bar in home page

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-03 21:49:55 +05:30
parent 6948e27e1d
commit 6835a31b27
4 changed files with 90 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
htdocs/index.php
View File

@@ -14,6 +14,13 @@ require './core/query_functions.php';
</head>
<body class="font-lexend bg-bg_primary text-accent_secondary">
<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="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>
</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>
</div>
<?php require 'assets/_header.php';?>
<div class="homebox w-full px-4 lg:px-[4.5rem]">
<div class="herosection w-full flex flex-col-reverse justify-center lg:flex-row lg:justify-between items-center mb-3">
@@ -244,6 +251,24 @@ require './core/query_functions.php';
for(const card of document.querySelectorAll(".aboutcontainer")){
card.onmousemove = e => handleOnMouseMove(e);
}
let lastScrollTop = 0;
window.addEventListener("scroll", function () {
const st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// Scrolling down
document.getElementById("floating-bar").classList.add("floatingbar-slide-down");
document.getElementById("floating-bar").classList.remove("floatingbar-slide-up");
} else {
// Scrolling up
document.getElementById("floating-bar").classList.remove("floatingbar-slide-down");
document.getElementById("floating-bar").classList.add("floatingbar-slide-up");
}
lastScrollTop = st <= 0 ? 0 : st;
});
</script>
</body>
</html>