772 lines
24 KiB
JavaScript
772 lines
24 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
||
const openButtons = document.querySelectorAll(".open-intouch");
|
||
// let intouchBtn = document.getElementById("get-in-touch");
|
||
let intouchPopup = document.getElementById("get-in-touch-page");
|
||
let closeBtns = document.getElementById("close-btn");
|
||
const mobileRedirectURL = "book-counsellor.php"; // Change to your desired mobile page URL
|
||
|
||
openButtons.forEach((button) => {
|
||
button.addEventListener("click", function () {
|
||
if (window.innerWidth > 992) {
|
||
// Desktop and tablets
|
||
intouchPopup.classList.add("active");
|
||
} else {
|
||
// Mobile – redirect to a page
|
||
window.location.href = mobileRedirectURL;
|
||
}
|
||
});
|
||
});
|
||
|
||
// Hide both popups when clicking any close button
|
||
closeBtns.addEventListener("click", function () {
|
||
intouchPopup.classList.remove("active");
|
||
});
|
||
|
||
// Hide popups when clicking outside them
|
||
window.addEventListener("click", function (event) {
|
||
if (event.target.classList.contains("get-in-touch-page")) {
|
||
intouchPopup.classList.remove("active");
|
||
}
|
||
});
|
||
});
|
||
|
||
// university image animation
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
const section = document.getElementById("animated-section");
|
||
const leftItems = document.querySelectorAll(".left-group .line-item");
|
||
const rightItems = document.querySelectorAll(".right-group .line-item");
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
leftItems.forEach((item, i) => {
|
||
setTimeout(
|
||
() => item.classList.add("visible"),
|
||
i * 300
|
||
);
|
||
});
|
||
rightItems.forEach((item, i) => {
|
||
setTimeout(
|
||
() => item.classList.add("visible"),
|
||
i * 300
|
||
);
|
||
});
|
||
} else {
|
||
leftItems.forEach((item) =>
|
||
item.classList.remove("visible")
|
||
);
|
||
rightItems.forEach((item) =>
|
||
item.classList.remove("visible")
|
||
);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.5 }
|
||
);
|
||
|
||
observer.observe(section);
|
||
});
|
||
|
||
// tabs in free resources
|
||
function showTab(id) {
|
||
// Remove active class from all buttons
|
||
document
|
||
.querySelectorAll(".tab-btn")
|
||
.forEach((btn) => btn.classList.remove("active"));
|
||
|
||
// Hide all tab contents
|
||
document
|
||
.querySelectorAll(".tab-content")
|
||
.forEach((tab) => tab.classList.remove("active"));
|
||
|
||
// Show the selected tab
|
||
document.getElementById(id).classList.add("active");
|
||
}
|
||
|
||
// NEW: Attach click event on all tab buttons
|
||
document.querySelectorAll(".tab-btn").forEach((button) => {
|
||
button.addEventListener("click", function () {
|
||
// Remove active from all
|
||
document
|
||
.querySelectorAll(".tab-btn")
|
||
.forEach((btn) => btn.classList.remove("active"));
|
||
|
||
// Add active to clicked button
|
||
this.classList.add("active");
|
||
});
|
||
});
|
||
|
||
// counter section
|
||
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
const counters = document.querySelectorAll(".counter");
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry) => {
|
||
const counter = entry.target;
|
||
|
||
if (entry.isIntersecting) {
|
||
if (!counter.classList.contains("started")) {
|
||
startCounting(counter);
|
||
counter.classList.add("started");
|
||
}
|
||
} else {
|
||
resetCounter(counter);
|
||
counter.classList.remove("started");
|
||
}
|
||
});
|
||
});
|
||
|
||
counters.forEach((counter) => {
|
||
observer.observe(counter);
|
||
});
|
||
|
||
function startCounting(counter) {
|
||
let start = 0;
|
||
const targetNumber = parseInt(counter.getAttribute("data-target"));
|
||
const duration = 2000; // 2 seconds
|
||
const increment = targetNumber / (duration / 16);
|
||
|
||
const timer = setInterval(() => {
|
||
start += increment;
|
||
if (start >= targetNumber) {
|
||
counter.textContent = targetNumber;
|
||
clearInterval(timer);
|
||
} else {
|
||
counter.textContent = Math.floor(start);
|
||
}
|
||
}, 16);
|
||
}
|
||
|
||
function resetCounter(counter) {
|
||
counter.textContent = 0;
|
||
}
|
||
});
|
||
|
||
// course finder ball bouncing
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
const canvas = document.getElementById("flagCanvas");
|
||
const ctx = canvas.getContext("2d");
|
||
const ballSection = document.getElementById("ball-section");
|
||
|
||
// Get responsive ball size
|
||
function getBallSize() {
|
||
const width = window.innerWidth;
|
||
if (width < 480) return 20;
|
||
if (width < 768) return 25;
|
||
return 35;
|
||
}
|
||
|
||
let ballSize = getBallSize();
|
||
|
||
// Responsive canvas sizing
|
||
function resizeCanvas() {
|
||
canvas.width = ballSection.clientWidth;
|
||
canvas.height = ballSection.clientHeight;
|
||
ballSize = getBallSize();
|
||
}
|
||
resizeCanvas();
|
||
window.addEventListener("resize", resizeCanvas);
|
||
|
||
const gravity = 1;
|
||
const friction = 0.8;
|
||
const elasticity = 0.75;
|
||
const flags = ["us", "gb", "np", "dk", "ca", "au"];
|
||
let balls = [];
|
||
|
||
class Ball {
|
||
constructor(x, y, radius, imageSrc) {
|
||
this.x = x;
|
||
this.y = y;
|
||
this.radius = radius;
|
||
this.dx = (Math.random() - 0.5) * 2;
|
||
this.dy = 0;
|
||
this.image = new Image();
|
||
this.image.src = imageSrc;
|
||
this.dragging = false;
|
||
this.offsetX = 0;
|
||
this.offsetY = 0;
|
||
this.elasticity = elasticity;
|
||
this.hasSettled = false;
|
||
}
|
||
|
||
draw() {
|
||
ctx.save();
|
||
ctx.beginPath();
|
||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
|
||
ctx.closePath();
|
||
ctx.clip();
|
||
|
||
const img = this.image;
|
||
const size = Math.min(img.width, img.height);
|
||
const sx = (img.width - size) / 2;
|
||
const sy = (img.height - size) / 2;
|
||
|
||
ctx.drawImage(
|
||
img,
|
||
sx,
|
||
sy,
|
||
size,
|
||
size,
|
||
this.x - this.radius,
|
||
this.y - this.radius,
|
||
this.radius * 2,
|
||
this.radius * 2
|
||
);
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
update(others) {
|
||
if (!this.dragging) {
|
||
this.dy += gravity;
|
||
this.x += this.dx;
|
||
this.y += this.dy;
|
||
|
||
// Floor
|
||
if (this.y + this.radius > canvas.height) {
|
||
this.y = canvas.height - this.radius;
|
||
this.dy *= -this.elasticity;
|
||
this.dx *= friction;
|
||
if (Math.abs(this.dy) < 0.5) {
|
||
this.dy = 0;
|
||
this.hasSettled = true;
|
||
}
|
||
}
|
||
|
||
// Walls
|
||
if (this.x - this.radius < 0) {
|
||
this.x = this.radius;
|
||
this.dx *= -friction;
|
||
} else if (this.x + this.radius > canvas.width) {
|
||
this.x = canvas.width - this.radius;
|
||
this.dx *= -friction;
|
||
}
|
||
}
|
||
|
||
// Collisions
|
||
if (this.dragging || !this.hasSettled) {
|
||
for (let other of others) {
|
||
if (other !== this) {
|
||
this.resolveBallCollision(other);
|
||
}
|
||
}
|
||
}
|
||
|
||
this.draw();
|
||
}
|
||
|
||
resolveBallCollision(other) {
|
||
const dx = other.x - this.x;
|
||
const dy = other.y - this.y;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
const minDist = this.radius + other.radius;
|
||
|
||
if (dist < minDist) {
|
||
const nx = dx / dist;
|
||
const ny = dy / dist;
|
||
const overlap = minDist - dist;
|
||
|
||
const impulse = 0.5;
|
||
this.x -= nx * overlap * impulse;
|
||
this.y -= ny * overlap * impulse;
|
||
other.x += nx * overlap * impulse;
|
||
other.y += ny * overlap * impulse;
|
||
|
||
const tx = -ny;
|
||
const ty = nx;
|
||
|
||
const dpTan1 = this.dx * tx + this.dy * ty;
|
||
const dpTan2 = other.dx * tx + other.dy * ty;
|
||
|
||
const dpNorm1 = this.dx * nx + this.dy * ny;
|
||
const dpNorm2 = other.dx * nx + other.dy * ny;
|
||
|
||
this.dx = tx * dpTan1 + nx * dpNorm2;
|
||
this.dy = ty * dpTan1 + ny * dpNorm2;
|
||
other.dx = tx * dpTan2 + nx * dpNorm1;
|
||
other.dy = ty * dpTan2 + ny * dpNorm1;
|
||
}
|
||
}
|
||
}
|
||
|
||
function createBalls() {
|
||
balls = [];
|
||
for (let i = 0; i < 30; i++) {
|
||
const flag = flags[i % flags.length];
|
||
const x = Math.random() * (canvas.width - ballSize * 2) + ballSize;
|
||
const y = -Math.random() * 300;
|
||
balls.push(
|
||
new Ball(
|
||
x,
|
||
y,
|
||
ballSize,
|
||
`raffles/assets/images/logo/country/${flag}.png`
|
||
)
|
||
);
|
||
}
|
||
}
|
||
|
||
createBalls();
|
||
|
||
let draggedBall = null;
|
||
let lastMouse = { x: 0, y: 0 };
|
||
|
||
canvas.addEventListener("pointerdown", (e) => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const scaleX = canvas.width / rect.width;
|
||
const scaleY = canvas.height / rect.height;
|
||
const mouseX = (e.clientX - rect.left) * scaleX;
|
||
const mouseY = (e.clientY - rect.top) * scaleY;
|
||
|
||
for (let ball of balls) {
|
||
const dx = mouseX - ball.x;
|
||
const dy = mouseY - ball.y;
|
||
if (Math.sqrt(dx * dx + dy * dy) < ball.radius) {
|
||
ball.dragging = true;
|
||
draggedBall = ball;
|
||
ball.offsetX = dx;
|
||
ball.offsetY = dy;
|
||
ball.hasSettled = false;
|
||
lastMouse = { x: mouseX, y: mouseY };
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
|
||
canvas.addEventListener("pointermove", (e) => {
|
||
if (draggedBall) {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const scaleX = canvas.width / rect.width;
|
||
const scaleY = canvas.height / rect.height;
|
||
const mouseX = (e.clientX - rect.left) * scaleX;
|
||
const mouseY = (e.clientY - rect.top) * scaleY;
|
||
|
||
draggedBall.x = mouseX - draggedBall.offsetX;
|
||
draggedBall.y = mouseY - draggedBall.offsetY;
|
||
draggedBall.dx = (mouseX - lastMouse.x) * 0.4;
|
||
draggedBall.dy = (mouseY - lastMouse.y) * 0.4;
|
||
lastMouse = { x: mouseX, y: mouseY };
|
||
}
|
||
});
|
||
|
||
window.addEventListener("pointerup", () => {
|
||
if (draggedBall) {
|
||
draggedBall.dragging = false;
|
||
draggedBall = null;
|
||
}
|
||
});
|
||
|
||
// Animation loop
|
||
let animationId = null;
|
||
let isAnimating = false;
|
||
|
||
function animate() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
balls.forEach((ball) => ball.update(balls));
|
||
animationId = requestAnimationFrame(animate);
|
||
}
|
||
|
||
// Intersection Observer
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
if (!isAnimating) {
|
||
createBalls();
|
||
isAnimating = true;
|
||
animate();
|
||
}
|
||
} else {
|
||
if (isAnimating) {
|
||
cancelAnimationFrame(animationId);
|
||
isAnimating = false;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1 }
|
||
);
|
||
|
||
observer.observe(ballSection);
|
||
});
|
||
|
||
// scroll detect in slider
|
||
// JS script
|
||
// JS for updating label on scroll
|
||
window.addEventListener("load", () => {
|
||
console.log("Window loaded. Running scroll indicator script.");
|
||
|
||
const scrollLabel = document.getElementById("scroll-indicator-label");
|
||
console.log("Scroll Label Element:", scrollLabel);
|
||
|
||
const sections = document.querySelectorAll(".scroll-section");
|
||
console.log("Found Sections:", sections);
|
||
|
||
if (!scrollLabel || sections.length === 0) {
|
||
console.error(
|
||
"Could not find scroll label or sections to observe. Exiting."
|
||
);
|
||
return;
|
||
}
|
||
|
||
const observer = new IntersectionObserver(
|
||
(entries) => {
|
||
console.log("IntersectionObserver callback fired:", entries);
|
||
entries.forEach((entry) => {
|
||
console.log(
|
||
"Observing entry:",
|
||
entry.target,
|
||
"Is intersecting:",
|
||
entry.isIntersecting
|
||
);
|
||
if (entry.isIntersecting) {
|
||
// --- CHANGE IS HERE ---
|
||
const sectionId = entry.target.id; // Get the ID of the intersecting section
|
||
// --- END OF CHANGE ---
|
||
|
||
console.log("Intersecting section ID:", sectionId);
|
||
|
||
if (sectionId) {
|
||
// Check if ID exists
|
||
// Optional: Format the ID if needed (example: replace hyphens, capitalize)
|
||
// let displayText = sectionId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
|
||
// scrollLabel.textContent = displayText;
|
||
|
||
// Simple version: Use the ID directly
|
||
scrollLabel.textContent = sectionId;
|
||
console.log("Updated scroll label text to:", sectionId);
|
||
} else {
|
||
console.warn(
|
||
"Intersecting section is missing an ID attribute:",
|
||
entry.target
|
||
);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
{
|
||
threshold: 0.5, // Trigger when 50% of the section is visible
|
||
// Consider adjusting rootMargin if you have sticky headers/footers
|
||
// rootMargin: "-50px 0px -50px 0px" // Example: ignore top/bottom 50px
|
||
}
|
||
);
|
||
|
||
sections.forEach((section) => {
|
||
if (!section.id) {
|
||
console.warn(
|
||
"Section is missing an ID, it won't update the label:",
|
||
section
|
||
);
|
||
}
|
||
console.log("Observing section:", section);
|
||
observer.observe(section);
|
||
});
|
||
|
||
console.log("Intersection observer setup complete.");
|
||
});
|
||
|
||
// Optional: Add a check outside the load event to see if the script file itself is loaded
|
||
console.log("Scroll indicator script file loaded.");
|
||
|
||
// aeroplane flying
|
||
const plane = document.getElementById("plane");
|
||
|
||
let planeX = 100;
|
||
let planeYBase = 200; // starting height
|
||
let vx;
|
||
|
||
if (window.innerWidth < 600) {
|
||
// mobile
|
||
vx = 1;
|
||
} else if (window.innerWidth < 1200) {
|
||
// tablet
|
||
vx = 2;
|
||
} else {
|
||
// desktop
|
||
vx = 3;
|
||
}
|
||
// horizontal speed
|
||
let direction = 1; // 1 = right, -1 = left
|
||
// const amplitude = 150;
|
||
let amplitude;
|
||
|
||
if (window.innerWidth < 768) {
|
||
// mobile
|
||
amplitude = 90;
|
||
} else {
|
||
// desktop
|
||
amplitude = 150;
|
||
}
|
||
// const numWaves = 2;
|
||
|
||
let numWaves;
|
||
|
||
if (window.innerWidth < 768) {
|
||
// mobile
|
||
numWaves = 1;
|
||
} else {
|
||
// desktop
|
||
numWaves = 3;
|
||
}
|
||
|
||
let dodgeOffset = 0;
|
||
const dodgeDecay = 0.9;
|
||
|
||
let downwardMovement = 0; // current Y offset
|
||
let targetDownwardMovement = 0; // target Y offset
|
||
let downwardStep = 200; // increase per edge hit
|
||
let goingDown = true;
|
||
|
||
function updatePosition() {
|
||
const w = window.innerWidth;
|
||
const h = document.body.scrollHeight;
|
||
const maxPlaneY = h - 200;
|
||
|
||
// bounce left/right
|
||
if (planeX <= 0 || planeX >= w - plane.width) {
|
||
vx *= -1;
|
||
direction *= -1;
|
||
plane.style.transform = `scaleX(${direction > 0 ? 1 : -1})`;
|
||
|
||
if (goingDown) {
|
||
targetDownwardMovement += downwardStep;
|
||
if (planeYBase + targetDownwardMovement >= maxPlaneY) {
|
||
targetDownwardMovement = maxPlaneY - planeYBase;
|
||
goingDown = false;
|
||
}
|
||
} else {
|
||
targetDownwardMovement -= downwardStep;
|
||
if (targetDownwardMovement <= 0) {
|
||
targetDownwardMovement = 0;
|
||
goingDown = true;
|
||
}
|
||
}
|
||
}
|
||
|
||
planeX += vx;
|
||
|
||
// Smoothly move downwardMovement towards targetDownwardMovement
|
||
downwardMovement += (targetDownwardMovement - downwardMovement) * 0.05;
|
||
|
||
// progress across screen
|
||
let progress = planeX / (w - plane.width);
|
||
if (direction < 0) {
|
||
progress = 1 - progress;
|
||
}
|
||
|
||
const angle = progress * numWaves * 2 * Math.PI;
|
||
const waveY = Math.sin(angle) * amplitude;
|
||
|
||
const finalY = planeYBase + downwardMovement + waveY + dodgeOffset;
|
||
|
||
plane.style.left = planeX + "px";
|
||
plane.style.top = finalY + "px";
|
||
|
||
dodgeOffset *= dodgeDecay;
|
||
|
||
requestAnimationFrame(updatePosition);
|
||
}
|
||
|
||
document.addEventListener("mousemove", function (e) {
|
||
const viewportOffset = plane.getBoundingClientRect();
|
||
const planeCenterX = viewportOffset.left + plane.width / 2;
|
||
const planeCenterY = viewportOffset.top + plane.height / 2;
|
||
const dx = e.clientX - planeCenterX;
|
||
const dy = e.clientY - planeCenterY;
|
||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
if (dist < 100) {
|
||
dodgeOffset -= (dy / dist) * 10;
|
||
}
|
||
});
|
||
|
||
updatePosition();
|
||
|
||
// gallery image
|
||
const images = Array.from(document.querySelectorAll(".gallery img"));
|
||
const lightbox = document.getElementById("lightbox");
|
||
const lightboxImg = document.getElementById("lightbox-img");
|
||
let currentIndex = 0;
|
||
|
||
images.forEach((img, index) => {
|
||
img.addEventListener("click", () => {
|
||
currentIndex = index;
|
||
showImage();
|
||
});
|
||
});
|
||
|
||
function showImage() {
|
||
lightboxImg.src = images[currentIndex].src;
|
||
lightbox.classList.add("active");
|
||
}
|
||
|
||
function closeLightbox() {
|
||
lightbox.classList.remove("active");
|
||
}
|
||
|
||
function changeSlide(step) {
|
||
currentIndex = (currentIndex + step + images.length) % images.length;
|
||
showImage();
|
||
}
|
||
|
||
document.addEventListener("keydown", (e) => {
|
||
if (!lightbox.classList.contains("active")) return;
|
||
if (e.key === "ArrowRight") changeSlide(1);
|
||
if (e.key === "ArrowLeft") changeSlide(-1);
|
||
if (e.key === "Escape") closeLightbox();
|
||
});
|
||
|
||
// cost calculator progress
|
||
|
||
let currentStep = 1;
|
||
const totalSteps = 5;
|
||
const monkey = document.getElementById("monkey").querySelector("img");
|
||
const monkeyContainer = document.getElementById("monkey");
|
||
const nextBtn = document.getElementById("nextBtn");
|
||
const prevBtn = document.getElementById("prevBtn");
|
||
const doneBtn = document.getElementById("doneBtn");
|
||
|
||
const monkeyImages = [
|
||
"raffles/assets/images/icons/monkey2.png",
|
||
"raffles/assets/images/icons/monkey2.png",
|
||
"raffles/assets/images/icons/monkey3.png",
|
||
"raffles/assets/images/icons/monkey4.png",
|
||
"raffles/assets/images/icons/monkey5.png",
|
||
"raffles/assets/images/icons/monkey6.png",
|
||
"raffles/assets/images/icons/monkey7.png",
|
||
];
|
||
|
||
// Function to update monkey position based on screen size
|
||
function updateMonkeyPosition() {
|
||
let percent;
|
||
|
||
if (window.innerWidth <= 540) {
|
||
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
|
||
} else if (window.innerWidth <= 768) {
|
||
percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
|
||
} else if (window.innerWidth <= 992) {
|
||
percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
|
||
} else if (window.innerWidth <= 1180) {
|
||
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
|
||
} else {
|
||
percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
|
||
}
|
||
|
||
monkeyContainer.style.left = percent + "%";
|
||
}
|
||
|
||
// Function to update button visibility
|
||
function updateButtonVisibility() {
|
||
if (currentStep === 1) {
|
||
prevBtn.style.display = "none"; // Hide Previous on first step
|
||
} else {
|
||
prevBtn.style.display = "flex"; // Show Previous on other steps
|
||
}
|
||
|
||
if (currentStep === totalSteps) {
|
||
nextBtn.style.display = "none";
|
||
doneBtn.style.display = "block";
|
||
} else {
|
||
nextBtn.style.display = "flex";
|
||
doneBtn.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// Next button click event
|
||
nextBtn.addEventListener("click", () => {
|
||
if (currentStep < totalSteps) {
|
||
currentStep++;
|
||
|
||
// Update monkey position
|
||
updateMonkeyPosition();
|
||
|
||
// Change monkey image
|
||
monkey.src = monkeyImages[currentStep - 1];
|
||
|
||
// Update step content
|
||
const currentContent = document.getElementById("step" + (currentStep - 1));
|
||
const nextContent = document.getElementById("step" + currentStep);
|
||
if (currentContent && nextContent) {
|
||
currentContent.classList.remove("active");
|
||
nextContent.classList.add("active");
|
||
}
|
||
|
||
// Update button visibility
|
||
updateButtonVisibility();
|
||
}
|
||
});
|
||
|
||
// Previous button click event
|
||
prevBtn.addEventListener("click", () => {
|
||
if (currentStep > 1) {
|
||
// Update step content first
|
||
const currentContent = document.getElementById("step" + currentStep);
|
||
const prevContent = document.getElementById("step" + (currentStep - 1));
|
||
if (currentContent && prevContent) {
|
||
currentContent.classList.remove("active");
|
||
prevContent.classList.add("active");
|
||
}
|
||
|
||
currentStep--;
|
||
|
||
// Update monkey position
|
||
updateMonkeyPosition();
|
||
|
||
// Change monkey image (go back to previous image)
|
||
monkey.src = monkeyImages[currentStep - 1];
|
||
|
||
// Update button visibility
|
||
updateButtonVisibility();
|
||
}
|
||
});
|
||
|
||
// Initialize button visibility on page load
|
||
updateButtonVisibility();
|
||
|
||
// Update on window resize
|
||
window.addEventListener("resize", updateMonkeyPosition);
|
||
doneBtn.addEventListener("click", () => {
|
||
bananalast.classList.add("active");
|
||
|
||
if (window.innerWidth <= 992) {
|
||
// On mobile: show 7th image and move down
|
||
monkey.src = monkeyImages[6]; // 7th image (index 6)
|
||
monkeyContainer.style.top = "142%";
|
||
monkeyContainer.style.left = "40%"; // Optional: keep it centered or adjust as needed
|
||
} else {
|
||
// On desktop: show 6th image and move right
|
||
monkey.src = monkeyImages[5]; // 6th image (index 5)
|
||
monkeyContainer.style.left = "110%";
|
||
monkeyContainer.style.top = "-120%"; // Reset top if changed previously
|
||
}
|
||
});
|
||
|
||
|
||
// Final monkey image
|
||
|
||
// document.addEventListener("DOMContentLoaded", function () {
|
||
// const animatedSections = document.querySelectorAll('[data-custom-animations="true"]');
|
||
|
||
// const observer = new IntersectionObserver(entries => {
|
||
// entries.forEach(entry => {
|
||
// const el = entry.target;
|
||
|
||
// if (entry.isIntersecting) {
|
||
// el.classList.add("lqd-animations-done"); // Add class when in view
|
||
// console.log('added')
|
||
// } else {
|
||
// el.classList.remove("lqd-animations-done"); // Remove class when out of view
|
||
// console.log('removed')
|
||
// }
|
||
// });
|
||
// }, {
|
||
// threshold: 0.1 // You can adjust this if needed
|
||
// });
|
||
|
||
// animatedSections.forEach(section => observer.observe(section));
|
||
// });
|
||
|
||
// free resources
|