update about.js
This commit is contained in:
unknown
170
js/main.js
170
js/main.js
@@ -1,4 +1,6 @@
|
||||
// ✅ Load header and footer, then initialize navbar script after header injected
|
||||
// ===============================
|
||||
// ✅ Load Header & Footer
|
||||
// ===============================
|
||||
['header', 'footer'].forEach(id => {
|
||||
const file = id === 'header' ? 'components/header.html' : 'components/footer.html';
|
||||
fetch(file)
|
||||
@@ -16,7 +18,9 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ✅ Pages mapping
|
||||
// ===============================
|
||||
// ✅ Routes for SPA Navigation
|
||||
// ===============================
|
||||
const routes = {
|
||||
"#/": "pages/home.html",
|
||||
"#/our-fund": "pages/our-fund.html",
|
||||
@@ -26,7 +30,134 @@ const routes = {
|
||||
"#/blog": "pages/blog.html",
|
||||
};
|
||||
|
||||
// ✅ Initialize Swiper if present
|
||||
// ===============================
|
||||
// ✅ Timeline Data
|
||||
// ===============================
|
||||
const timelineData = {
|
||||
1983: {
|
||||
icon: "../assests/images/1983-Icon.png",
|
||||
heading: "The beginning",
|
||||
sub: "Set up by Mr. Asit Koticha and Mr. Sameer Koticha, ASK Group offers research-based Investment advisory."
|
||||
},
|
||||
1991: {
|
||||
icon: "../assests/images/1991-Icon.png",
|
||||
heading: "ASK Raymond James",
|
||||
sub: "ASK Group and Raymond James Financial enter into a Partnership."
|
||||
},
|
||||
2007: {
|
||||
icon: "../assests/images/2007-Icon.png",
|
||||
heading: "Launch of ASK Wealth Advisors",
|
||||
sub: "Raymond James Financial partnership exits."
|
||||
},
|
||||
2008: {
|
||||
icon: "../assests/images/2008-Icon.png",
|
||||
heading: "Launch of ASK multi-family office",
|
||||
sub: ""
|
||||
},
|
||||
2013: {
|
||||
icon: "../assests/images/2013-Icon.png",
|
||||
heading: "License from SEBI",
|
||||
sub: "ASK Wealth Advisors receives an Investment Advisor License from SEBI."
|
||||
},
|
||||
2015: {
|
||||
icon: "../assests/images/2015-Icon.png",
|
||||
heading: "Best Independent Wealth Advisor",
|
||||
sub: "ASK Wealth Advisors adjudged 'the best Independent Wealth Advisor, 2015' by Wealth Briefing, Asia."
|
||||
},
|
||||
2016: {
|
||||
icon: "../assests/images/2016-Icon.png",
|
||||
heading: "",
|
||||
sub: "Advent International acquires minority stake in ASK Group."
|
||||
},
|
||||
2017: {
|
||||
icon: "../assests/images/2015-Icon.png",
|
||||
heading: "",
|
||||
sub: "ASK Wealth Advisors adjudged 'One to Watch - Wealth Manager - India Domestic' - Distinction, 2017 by Asian Private Banker."
|
||||
},
|
||||
2018: {
|
||||
icon: "../assests/images/2015-Icon.png",
|
||||
heading: "ASK launches its first offshore fund - ASK Global Strategies Fund",
|
||||
sub: "TWICE IN A ROW: ASK Wealth advisors adjudged 'Best Performing Financial Advisor' - Wealth 2016-17 by UTI MF & CNBC TV18."
|
||||
},
|
||||
2019: {
|
||||
icon: "../assests/images/1983-Icon.png",
|
||||
heading: "Hall of Fame",
|
||||
sub: "ASK Wealth Advisors inducted into the 'Hall of Fame' at the Financial Advisor Awards for 2018-19 and 2019-20 by UTI MF & CNBC TV18."
|
||||
},
|
||||
2020: {
|
||||
icon: "../assests/images/2015-Icon.png",
|
||||
heading: "Outstanding Private Bank",
|
||||
sub: "Outstanding Private Bank for UNHW clients at the Private Banker International Global Wealth Summit & Awards 2020, Singapore."
|
||||
},
|
||||
2022: {
|
||||
icon: "../assests/images/2022-icon.png",
|
||||
heading: "Blackstone Acquisition",
|
||||
sub: "Blackstone acquires majority stake in ASK Group. Advent International exits."
|
||||
}
|
||||
};
|
||||
|
||||
// ===============================
|
||||
// ✅ Initialize Timeline & Swiper
|
||||
// ===============================
|
||||
function initTimelineSwiper() {
|
||||
const swiperWrapper = document.querySelector(".swiper-wrapper");
|
||||
const timelineItems = document.querySelectorAll(".timeline-item");
|
||||
if (!swiperWrapper || !timelineItems.length) return;
|
||||
|
||||
// Generate Swiper slides
|
||||
swiperWrapper.innerHTML = "";
|
||||
timelineItems.forEach((item) => {
|
||||
const year = item.dataset.year;
|
||||
const content = timelineData[year] || { icon: "", heading: "", sub: "" };
|
||||
const slide = document.createElement("div");
|
||||
slide.classList.add("swiper-slide");
|
||||
slide.innerHTML = `
|
||||
${content.icon ? `<img src="${content.icon}" alt="icon" />` : ""}
|
||||
<h2>${year}</h2>
|
||||
${content.heading ? `<p class="heading">${content.heading}</p>` : ""}
|
||||
${content.sub ? `<div class="sub-heading-container"><p>${content.sub}</p></div>` : ""}
|
||||
`;
|
||||
swiperWrapper.appendChild(slide);
|
||||
});
|
||||
|
||||
// Line fill logic
|
||||
const lineFill = document.querySelector(".line-fill");
|
||||
const totalKites = timelineItems.length;
|
||||
|
||||
function updateTimeline(index) {
|
||||
timelineItems.forEach((item, i) => {
|
||||
item.classList.toggle("active", i === index);
|
||||
});
|
||||
const timelineWidth = document.querySelector(".timeline").offsetWidth - 40;
|
||||
const newWidth = (timelineWidth / (totalKites - 1)) * index;
|
||||
if (lineFill) lineFill.style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
// Initialize Swiper
|
||||
const swiper = new Swiper(".mySwiper", {
|
||||
spaceBetween: 20,
|
||||
centeredSlides: true,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
}
|
||||
});
|
||||
|
||||
swiper.on("slideChange", () => {
|
||||
updateTimeline(swiper.realIndex);
|
||||
});
|
||||
|
||||
updateTimeline(0);
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// ✅ Generic Swiper Init (Other Pages)
|
||||
// ===============================
|
||||
function initSwiper() {
|
||||
if (document.querySelector(".mySwiper")) {
|
||||
new Swiper(".mySwiper", {
|
||||
@@ -41,7 +172,9 @@ function initSwiper() {
|
||||
}
|
||||
}
|
||||
|
||||
// ===============================
|
||||
// ✅ Team Drawer
|
||||
// ===============================
|
||||
window.openDrawer = function (name, role, img, desc) {
|
||||
document.getElementById("drawerName").textContent = name;
|
||||
document.getElementById("drawerRole").textContent = role;
|
||||
@@ -52,9 +185,9 @@ window.openDrawer = function (name, role, img, desc) {
|
||||
drawer.show();
|
||||
};
|
||||
|
||||
// ==============================
|
||||
// 🪄 GSAP STACK SCROLL ANIMATION
|
||||
// ==============================
|
||||
// ===============================
|
||||
// ✅ GSAP Stack Scroll Animation
|
||||
// ===============================
|
||||
let cards = [];
|
||||
let currentIndex = 0;
|
||||
let animating = false;
|
||||
@@ -71,16 +204,13 @@ function initGsapStackScroll() {
|
||||
gsap.set(cards[0], { opacity: 1, y: "0%" });
|
||||
currentIndex = 0;
|
||||
|
||||
// 🎯 Mouse enter/leave detect karein
|
||||
section.addEventListener('mouseenter', () => { isInsideSection = true; });
|
||||
section.addEventListener('mouseleave', () => { isInsideSection = false; });
|
||||
|
||||
// 🌐 Global scroll listener
|
||||
window.removeEventListener('wheel', window._gsapStackHandler);
|
||||
window._gsapStackHandler = function (e) {
|
||||
if (!isInsideSection) return; // 📌 agar mouse section ke bahar hai to kuch mat karo
|
||||
|
||||
e.preventDefault(); // ✅ sirf section ke andar scroll disable karo
|
||||
if (!isInsideSection) return;
|
||||
e.preventDefault();
|
||||
if (animating) return;
|
||||
|
||||
if (e.deltaY > 0) {
|
||||
@@ -124,7 +254,9 @@ function showPrevGsapCard() {
|
||||
currentIndex--;
|
||||
}
|
||||
|
||||
// ✅ Load page content dynamically
|
||||
// ===============================
|
||||
// ✅ Load Page Content Dynamically
|
||||
// ===============================
|
||||
function loadPage() {
|
||||
const hash = location.hash || "#/";
|
||||
const page = routes[hash] || routes["#/"];
|
||||
@@ -133,22 +265,20 @@ function loadPage() {
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
document.getElementById("page-content").innerHTML = html;
|
||||
|
||||
// ✅ Scroll to top after page load
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
||||
// ✅ Re-init Swiper if present
|
||||
// Init all components after content load
|
||||
initSwiper();
|
||||
|
||||
// ✅ Re-init GSAP scroll stack animation
|
||||
initTimelineSwiper();
|
||||
initGsapStackScroll();
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
document.getElementById("page-content").innerHTML = "<h2>Page not found</h2>";
|
||||
});
|
||||
}
|
||||
|
||||
// ✅ Event listener for routing
|
||||
// ===============================
|
||||
// ✅ Router Event Listener
|
||||
// ===============================
|
||||
window.addEventListener("hashchange", loadPage);
|
||||
loadPage(); // default page load
|
||||
loadPage(); // Default load
|
||||
|
||||
@@ -1,20 +1,4 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
||||
<!-- Swiper CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="hero_banner">
|
||||
<div class="banner_overlay">
|
||||
<div class="hero_content">
|
||||
@@ -116,13 +100,3 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Swiper JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user