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

17
site/interface/site/index.html
View File

@ -43,10 +43,19 @@
<p>THREEJS</p>
</section>
<section class="homeSection">
<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>
<img id="firstBall" src="style/balls.png">
<section class="homeSection relative">
<img id="firstBall" src="style/ball3D2.png">
<img id="secondBall" src="style/ball3D3.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>

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

BIN
site/interface/site/style/ball3D.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
site/interface/site/style/ball3D2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
site/interface/site/style/ball3D3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
site/interface/site/style/balls.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 740 KiB

36
site/interface/site/style/home.css
View File

@ -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;
}
@ -175,4 +192,13 @@ body {
#menuDiv li:hover {
background-color: #f0f0f0;
}
}
footer {
padding: 15px;
display: flex;
overflow: hidden;
height: 200px;
background-color: white;
color: #020202;
}