mirror of
https://github.com/Alvin-Zilverstand/school.git
synced 2026-03-07 05:52:46 +01:00
project 1 & 2
This commit is contained in:
vista-man
211
projects/challange 1/carsite/carsite-main/js/scroll-galary.js
Normal file
211
projects/challange 1/carsite/carsite-main/js/scroll-galary.js
Normal file
@@ -0,0 +1,211 @@
|
||||
(() => {
|
||||
if (document.querySelector('html').classList.contains('is-builder')) return;
|
||||
|
||||
function applyScrollAnimation() {
|
||||
const galleryWrappers = document.querySelectorAll('.gallery-wrapper');
|
||||
|
||||
if (!galleryWrappers.length) return;
|
||||
|
||||
galleryWrappers.forEach((galleryWrapper) => {
|
||||
const gridContainer1 = galleryWrapper.querySelector('.grid-container-1');
|
||||
const gridContainer2 = galleryWrapper.querySelector('.grid-container-2');
|
||||
const gridContainer3 = galleryWrapper.querySelector('.grid-container-3');
|
||||
|
||||
const initialTransform1 = gridContainer1 ? getComputedStyle(gridContainer1).transform : null;
|
||||
const initialTransform2 = gridContainer2 ? getComputedStyle(gridContainer2).transform : null;
|
||||
const initialTransform3 = gridContainer3 ? getComputedStyle(gridContainer3).transform : null;
|
||||
|
||||
function updateScrollAnimation() {
|
||||
const scrollPosition = window.scrollY;
|
||||
const screenHeight = window.innerHeight;
|
||||
const galleryBlockTop = galleryWrapper.getBoundingClientRect().top + window.scrollY;
|
||||
const distanceFromTop = galleryBlockTop - screenHeight;
|
||||
|
||||
if (scrollPosition >= distanceFromTop) {
|
||||
const matrix1 = initialTransform1 ? new DOMMatrix(initialTransform1) : null;
|
||||
const matrix2 = initialTransform2 ? new DOMMatrix(initialTransform2) : null;
|
||||
const matrix3 = initialTransform3 ? new DOMMatrix(initialTransform3) : null;
|
||||
|
||||
if (matrix1) {
|
||||
const gridItems1 = gridContainer1.querySelectorAll('.grid-item');
|
||||
const numItems1 = gridItems1.length;
|
||||
|
||||
//fix for mbr-ai
|
||||
gridItems1.forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.classList.remove('hidden');
|
||||
});
|
||||
|
||||
if (numItems1 >= 8 && !gridContainer1.classList.contains('moving-left')) {
|
||||
matrix1.m41 = -2000;
|
||||
}
|
||||
|
||||
if (numItems1 >= 8 && !gridContainer1.classList.contains('moving-left') && window.innerWidth < 1200) {
|
||||
matrix1.m41 = -900;
|
||||
}
|
||||
|
||||
function cloneGalleryItems() {
|
||||
for (let i = 0; i < numItems1; i++) {
|
||||
const clonedItem = gridItems1[i].cloneNode(true);
|
||||
gridContainer1.appendChild(clonedItem);
|
||||
}
|
||||
}
|
||||
|
||||
switch (true) {
|
||||
case (numItems1 < 8):
|
||||
cloneGalleryItems();
|
||||
case (gridContainer1.classList.contains('moving-right')):
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.9;
|
||||
break;
|
||||
case (gridContainer1.classList.contains('moving-left')):
|
||||
translateX1 = matrix1.m41 - (scrollPosition - distanceFromTop) * 0.9;
|
||||
break;
|
||||
default:
|
||||
if (window.innerWidth >= 2560) {
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.9;
|
||||
} else if (window.innerWidth >= 1440) {
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.55;
|
||||
} else if (window.innerWidth >= 1024) {
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.45;
|
||||
} else if (window.innerWidth >= 768) {
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.35;
|
||||
} else if (window.innerWidth >= 320) {
|
||||
translateX1 = matrix1.m41 + (scrollPosition - distanceFromTop) * 0.25;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
gridContainer1.style.transform = `translate3d(${translateX1}px, 0, 0)`;
|
||||
}
|
||||
|
||||
if (matrix2) {
|
||||
const gridItems2 = gridContainer2.querySelectorAll('.grid-item');
|
||||
const numItems2 = gridItems2.length;
|
||||
|
||||
//fix for mbr-ai
|
||||
gridItems2.forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.classList.remove('hidden');
|
||||
});
|
||||
|
||||
if (numItems2 >= 8 && gridContainer2.classList.contains('moving-left')) {
|
||||
matrix2.m41 = -2000;
|
||||
}
|
||||
|
||||
if (numItems2 >= 8 && !gridContainer2.classList.contains('moving-left') && window.innerWidth < 1200) {
|
||||
matrix2.m41 = 0;
|
||||
}
|
||||
|
||||
function cloneGalleryItems() {
|
||||
for (let i = 0; i < numItems2; i++) {
|
||||
const clonedItem = gridItems2[i].cloneNode(true);
|
||||
gridContainer2.appendChild(clonedItem);
|
||||
}
|
||||
}
|
||||
|
||||
switch (true) {
|
||||
case (numItems2 < 8):
|
||||
cloneGalleryItems();
|
||||
case (gridContainer2.classList.contains('moving-right')):
|
||||
translateX2 = matrix2.m41 + (scrollPosition - distanceFromTop) * 0.9;
|
||||
break;
|
||||
case (gridContainer2.classList.contains('moving-left')):
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.9;
|
||||
break;
|
||||
default:
|
||||
if (window.innerWidth >= 2560) {
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.9;
|
||||
} else if (window.innerWidth >= 1440) {
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.55;
|
||||
} else if (window.innerWidth >= 1024) {
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.45;
|
||||
} else if (window.innerWidth >= 768) {
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.35;
|
||||
} else if (window.innerWidth >= 320) {
|
||||
translateX2 = matrix2.m41 - (scrollPosition - distanceFromTop) * 0.25;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
gridContainer2.style.transform = `translate3d(${translateX2}px, 0, 0)`;
|
||||
}
|
||||
|
||||
if (matrix3) {
|
||||
const gridItems3 = gridContainer3.querySelectorAll('.grid-item');
|
||||
const numItems3 = gridItems3.length;
|
||||
|
||||
//fix for mbr-ai
|
||||
gridItems3.forEach(item => {
|
||||
const img = item.querySelector('img');
|
||||
img.classList.remove('hidden');
|
||||
});
|
||||
|
||||
if (numItems3 >= 8 && !gridContainer3.classList.contains('moving-left')) {
|
||||
matrix3.m41 = -2000
|
||||
}
|
||||
|
||||
if (numItems3 >= 8 && !gridContainer3.classList.contains('moving-left') && window.innerWidth < 1200) {
|
||||
matrix3.m41 = -900;
|
||||
}
|
||||
|
||||
let translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.9;
|
||||
|
||||
function cloneGalleryItems() {
|
||||
for (let i = 0; i < numItems3; i++) {
|
||||
const clonedItem = gridItems3[i].cloneNode(true);
|
||||
gridContainer3.appendChild(clonedItem);
|
||||
}
|
||||
}
|
||||
|
||||
if (numItems3 < 8) {
|
||||
cloneGalleryItems()
|
||||
}
|
||||
|
||||
if (!gridContainer3.classList.contains('moving-left')) {
|
||||
if (window.innerWidth >= 2560) {
|
||||
translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.9;
|
||||
} else if (window.innerWidth >= 1440) {
|
||||
translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.55;
|
||||
} else if (window.innerWidth >= 1024) {
|
||||
translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.45;
|
||||
} else if (window.innerWidth >= 768) {
|
||||
translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.35;
|
||||
} else if (window.innerWidth >= 320) {
|
||||
translateX3 = matrix3.m41 + (scrollPosition - distanceFromTop) * 0.25;
|
||||
}
|
||||
} else if (gridContainer3.classList.contains('moving-left')) {
|
||||
if (numItems3 < 8) {
|
||||
cloneGalleryItems()
|
||||
}
|
||||
if (window.innerWidth >= 2560) {
|
||||
translateX3 = matrix3.m41 - (scrollPosition - distanceFromTop) * 0.9;
|
||||
} else if (window.innerWidth >= 1440) {
|
||||
translateX3 = matrix3.m41 - (scrollPosition - distanceFromTop) * 0.55;
|
||||
} else if (window.innerWidth >= 1024) {
|
||||
translateX3 = matrix3.m41 - (scrollPosition - distanceFromTop) * 0.45;
|
||||
} else if (window.innerWidth >= 768) {
|
||||
translateX3 = matrix3.m41 - (scrollPosition - distanceFromTop) * 0.35;
|
||||
} else if (window.innerWidth >= 320) {
|
||||
translateX3 = matrix3.m41 - (scrollPosition - distanceFromTop) * 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
gridContainer3.style.transform = `translate3d(${translateX3}px, 0, 0)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
requestAnimationFrame(updateScrollAnimation);
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
requestAnimationFrame(updateScrollAnimation);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
applyScrollAnimation();
|
||||
})();
|
||||
|
||||
//# sourceMappingURL=scroll-gallery.js.map
|
||||
|
||||
Reference in New Issue
Block a user