tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site :

Browse Source 
- Add parallax/roation effect balls on Home Page 2
    - Add footer (not finished)
This commit is contained in:
madegryc pc
2024-08-14 12:56:36 +02:00
parent c3f01d0e4c
commit 3b963de536
7 changed files with 61 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/interface/site/main.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/07 17:52:24 by edbernar ### ########.fr */
/* Updated: 2024/08/14 11:32:50 by marvin ### ########.fr */
/* */
/* ************************************************************************** */
@ -14,6 +14,21 @@ import { createNotification } from "./notification/main.js";
import { liveChat } from "./liveChat/main.js";
import { login } from "./login/main.js";
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
const rotationAngle = scrollPosition * 0.1; // Ajustez ce facteur pour contrôler l'angle de rotation
const parallaxElement = document.querySelector('#firstBall');
const parallaxElement2 = document.querySelector('#secondBall');
const parallaxSpeed = scrollPosition * -0.15; // Ajustez ce facteur pour ralentir le défilement
// Appliquer la rotation en fonction de la position de défilement
parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
// Ajuster la position de l'arrière-plan pour l'effet de parallaxe
// parallaxElement.style.backgroundPositionY = `${parallaxSpeed}px`;
});
document.addEventListener('DOMContentLoaded', () => {
liveChat();
login();