113 lines
3.4 KiB
JavaScript
113 lines
3.4 KiB
JavaScript
// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
|
|
// for details on configuring this project to bundle and minify static web assets.
|
|
|
|
// Write your JavaScript code.
|
|
|
|
|
|
|
|
//1- change by click buttons
|
|
//2- method to call n
|
|
function animate(listOfData) {
|
|
|
|
var mainImage = document.getElementById("mainImage");
|
|
var mainText = document.getElementById("mainText");
|
|
|
|
var currentIndex = -1; // Start at -1 so first changeIndex(1) goes to 0
|
|
|
|
changeIndex(1)
|
|
var x = setInterval(changeIndex, 4000, 1);
|
|
|
|
document.getElementById("next").onclick = function () {
|
|
clearInterval(x);
|
|
changeIndex(1)
|
|
x = setInterval(changeIndex, 4000, 1);
|
|
}
|
|
|
|
document.getElementById("prev").onclick = function () {
|
|
clearInterval(x);
|
|
changeIndex(-1)
|
|
x = setInterval(changeIndex, 4000, 1);
|
|
}
|
|
|
|
function changeIndex(i) {
|
|
if (currentIndex + i >= listOfData.length) {
|
|
currentIndex = 0;
|
|
}
|
|
else if (currentIndex + i < 0) {
|
|
currentIndex = listOfData.length - 1;
|
|
}
|
|
else {
|
|
currentIndex += i;
|
|
}
|
|
|
|
changeInfo(listOfData)
|
|
animateText();
|
|
}
|
|
|
|
function changeInfo(listOfData) {
|
|
mainImage.src = listOfData[currentIndex][1];
|
|
mainText.innerText = listOfData[currentIndex][0];
|
|
|
|
// 1. Absolutely kill transition via inline style and classes
|
|
mainImage.style.transition = 'none';
|
|
mainImage.classList.remove("transition", "transition-all", "duration-[4000ms]");
|
|
|
|
// Determine direction based on current presence of scale-125
|
|
const shouldZoomIn = !mainImage.classList.contains("scale-125");
|
|
|
|
// 2. Snap to STARTING position
|
|
if (shouldZoomIn) {
|
|
mainImage.classList.remove("scale-125"); // Snap to 100%
|
|
} else {
|
|
mainImage.classList.add("scale-125"); // Snap to 125%
|
|
}
|
|
|
|
// Force reflow
|
|
void mainImage.offsetWidth;
|
|
|
|
// 3. Re-enable transition and set TARGET position
|
|
mainImage.style.transition = '';
|
|
mainImage.classList.add("transition", "duration-[4000ms]");
|
|
|
|
if (shouldZoomIn) {
|
|
mainImage.classList.add("scale-125"); // Animate 100% -> 125%
|
|
} else {
|
|
mainImage.classList.remove("scale-125"); // Animate 125% -> 100%
|
|
}
|
|
}
|
|
|
|
function animateText() {
|
|
var textWrapper = document.querySelector('.ml14 .letters');
|
|
if (!textWrapper) return;
|
|
|
|
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter lg:text-5xl md:text-4xl text-3xl text-accent'>$&</span>");
|
|
|
|
anime.timeline({ loop: false })
|
|
.add({
|
|
targets: '.ml14 .line',
|
|
scaleX: [0, 1],
|
|
opacity: [0.5, 1],
|
|
easing: "easeInOutExpo",
|
|
duration: 500
|
|
}).add({
|
|
targets: '.ml14 .letter',
|
|
opacity: [0, 1],
|
|
translateX: [40, 0],
|
|
translateZ: 0,
|
|
scaleX: [0.3, 1],
|
|
easing: "easeOutExpo",
|
|
duration: 350,
|
|
offset: '-=600',
|
|
delay: (el, i) => 150 + 25 * i
|
|
})
|
|
.add({
|
|
targets: '.ml14',
|
|
opacity: 1,
|
|
duration: 0,
|
|
easing: "easeOutExpo",
|
|
delay: 0
|
|
});
|
|
}
|
|
|
|
}
|