Site :

- Add parallax/roation effect balls on Home Page 2
    - Add footer (not finished)

site/interface/site/index.html

@@ -43,10 +43,19 @@
 		<p>THREEJS</p>
 		
 	</section>
-	<section class="homeSection">
+	<section class="homeSection relative">
-		<p id="firstText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
+		<img id="firstBall" src="style/ball3D2.png">
-		<p id="secondText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
+		<img id="secondBall" src="style/ball3D3.png">
-		<img id="firstBall" src="style/balls.png">
+		<div class="relative">
+			<p id="firstText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
+			<p id="secondText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia totam cupiditate magni unde expedita molestiae eum aliquam fugit voluptatibus omnis! Dolores, ipsa inventore necessitatibus numquam aspernatur in perferendis id voluptas?</p>
+		</div>
 	</section>
+	<section class="homeSection">
+		<p>EKIP</p>
+	</section>
+	<footer>
+		<p>PTME</p>
+	</footer>
 </body>
 </html>

site/interface/site/main.js

@@ -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();

site/interface/site/style/home.css

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/13 19:02:42 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/08/14 12:39:25 by marvin           ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -129,6 +129,7 @@ body {
 
 .homeSection{
 	min-height: 100svh;
+	overflow: hidden;
 }
 
 .homeSection p{
@@ -147,12 +148,28 @@ body {
 #secondText{
 	font-size: 45px;
 	padding-inline: 50px;
-	padding-top: 90px;
+	padding-top: 140px;
 	text-align: right;
 }
 
 #firstBall{
-	width: 25%;
+	position: absolute;
+	width: 340px;
+	transform-origin: center;
+	transform: translateX(-50%);
+	left: 0;
+}
+
+#secondBall{
+	position: absolute;
+	width: 340px;
+	transform-origin: center;
+	transform: translateX(50%);
+	top: 250px;
+	right: 0;
+}
+
+.relative{
 	position: relative;
 }
 
@@ -176,3 +193,12 @@ body {
 #menuDiv li:hover {
 	background-color: #f0f0f0;
 }
+
+footer {
+	padding: 15px;
+	display: flex;
+	overflow: hidden;
+	height: 200px;
+	background-color: white;
+	color: #020202;
+  }