-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from romainfb/Feat/mainPage
This commit implements the main data page
- Loading branch information
Showing
4 changed files
with
203 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,28 @@ | ||
| document.addEventListener('DOMContentLoaded', function () { | ||
| var headerHTML = ` | ||
| <header class="bg-[#181823] shadow-lg"> | ||
| <div class="container mx-auto px-8 py-8 flex justify-center scale-110"> <!-- Agrandissement du conteneur --> | ||
| <nav> | ||
| <ul class="flex space-x-6"> <!-- Agrandissement de l'espace entre les éléments --> | ||
| <li> | ||
| <a href="#data" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Data</a> <!-- Texte plus grand et padding augmenté --> | ||
| </li> | ||
| <li> | ||
| <a href="#information" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Information</a> | ||
| </li> | ||
| <li> | ||
| <a href="#autre" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Autre</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header>`; | ||
| var headerHTML = ` | ||
| <div class="w-full bg-[#181823] h-fit shadow-lg px-8 py-8 flex justify-center"> <!-- Agrandissement du conteneur --> | ||
| <nav> | ||
| <ul class="flex space-x-6"> <!-- Agrandissement de l'espace entre les éléments --> | ||
| <li> | ||
| <a href="#data" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Data</a> <!-- Texte plus grand et padding augmenté --> | ||
| </li> | ||
| <li> | ||
| <a href="#information" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Information</a> | ||
| </li> | ||
| <li> | ||
| <a href="#autre" class="text-xl px-5 py-3 bg-mainColor text-white font-semibold rounded-lg shadow-md transition duration-300 hover:bg-white hover:text-black">Autre</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div>`; | ||
|
|
||
| document.body.insertAdjacentHTML('afterbegin', headerHTML); | ||
| }); | ||
| // Trouver la div avec l'id mainContainer | ||
| var mainContainer = document.getElementById('mainContainer'); | ||
|
|
||
| // Insérer le code HTML dans la div mainContainer | ||
| if (mainContainer) { | ||
| mainContainer.insertAdjacentHTML('afterbegin', headerHTML); | ||
| } else { | ||
| console.error("La div avec l'id mainContainer n'a pas été trouvée."); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| class ScrollifyReveal { | ||
| constructor() { | ||
| // Default options for scrolling animations | ||
| this.defaultOptions = { | ||
| delay: 0, // Deadline before start of animation | ||
| distance: '0px', // Vertical travel distance | ||
| duration: '500ms', // Animation duration | ||
| easing: 'cubic-bezier(0.5, 0, 0, 1)', // Timer function (speed curve) | ||
| zoom: 0.8, // Zoom on appear | ||
| hideOnExit: true, // Enable or disable disappearance when out of view | ||
| opacity: 1, // Final opacity | ||
| }; | ||
| } | ||
|
|
||
| reveal(selector, options) { | ||
| // Selects all items corresponding to the selector | ||
| const elements = document.querySelectorAll(selector); | ||
|
|
||
| // Merges default options with supplied options | ||
| options = { ...this.defaultOptions, ...options }; | ||
|
|
||
| // Creates an intersection observer to detect the visibility of elements | ||
| const observer = new IntersectionObserver((entries, observer) => { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) { | ||
| const target = entry.target; | ||
|
|
||
| // Checks if the item has not already been revealed | ||
| if (!target.classList.contains('revealed')) { | ||
| setTimeout(() => { | ||
| // Applies appearance animation | ||
| target.style.opacity = `${options.opacity}`; | ||
| target.style.transform = 'scale(1)'; | ||
| target.style.transition = `opacity ${options.duration} ${options.easing}, transform ${options.duration} ${options.easing}`; | ||
| target.style.transitionDelay = `${options.delay}ms, ${options.delay}ms`; | ||
|
|
||
| // Marks element as revealed | ||
| target.classList.add('revealed'); | ||
|
|
||
| // Add a transitionend event listener to remove the scale transform | ||
| target.addEventListener('transitionend', () => { | ||
| target.style.transform = ''; | ||
| target.style.transition = ''; | ||
| target.style.transitionDelay = ''; | ||
| }, { once: true }); | ||
| }, options.delay); | ||
| } | ||
| } else if (options.hideOnExit) { | ||
| const target = entry.target; | ||
|
|
||
| // Checks if the item has been previously revealed | ||
| if (target.classList.contains('revealed')) { | ||
| // Applies disappearing animation | ||
| target.style.opacity = '0'; | ||
|
|
||
| // Defines the transformation according to options.zoom | ||
| target.style.transform = `translateY(${options.distance}) scale(${options.zoom})`; | ||
|
|
||
| target.style.transition = `opacity ${options.duration} ${options.easing}, transform ${options.duration} ${options.easing}`; | ||
| target.style.transitionDelay = '0s, 0s'; | ||
|
|
||
| // Marks element as not revealed | ||
| target.classList.remove('revealed'); | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // Initialize styles and observer for each element | ||
| elements.forEach(element => { | ||
| element.style.opacity = '0'; | ||
| element.style.transform = `translateY(${options.distance}) scale(${options.zoom})`; | ||
| element.style.transition = `opacity ${options.duration} ${options.easing}, transform ${options.duration} ${options.easing}`; | ||
| element.style.transitionDelay = '0s, 0s'; | ||
|
|
||
| // Observe element for visibility changes | ||
| observer.observe(element); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| const scrollifyReveal = new ScrollifyReveal(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters