https://github.com/ormidales/portfolio_diaporama

Le projet consiste en la création d'un créateur de diaporama interactif en utilisant les technologies web fondamentales telles que HTML, CSS et JavaScript.
https://github.com/ormidales/portfolio_diaporama

css diaporama diapos html javascript js presentation presentation-slides presentations slides slideshow

Last synced: 1 day ago
JSON representation

Le projet consiste en la création d'un créateur de diaporama interactif en utilisant les technologies web fondamentales telles que HTML, CSS et JavaScript.

• Host: GitHub
• URL: https://github.com/ormidales/portfolio_diaporama
• Owner: Ormidales
• Created: 2023-08-08T23:26:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-10T09:57:25.000Z (over 1 year ago)
• Last Synced: 2023-08-10T10:27:16.166Z (over 1 year ago)
• Topics: css, diaporama, diapos, html, javascript, js, presentation, presentation-slides, presentations, slides, slideshow
• Language: JavaScript
• Homepage: https://hugodoueil.fr
• Size: 732 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Créateur de diaporama HTML

Ce projet est un diaporama interactif riche en fonctionnalités qui permet aux utilisateurs de naviguer à travers différentes diapositives contenant des images et des textes. Les textes dans les diapositives peuvent être personnalisés avec différentes orientations, positions, couleurs et opacités.

## Fonctionnalités

- Navigation fluide: Utilisez les boutons ou les touches de votre clavier pour naviguer entre les diapositives.

- Positionnement et orientation du texte: Personnalisez le positionnement et l'orientation de chaque texte dans une diapositive à l'aide des attributs data-text-position et data-text-orientation.

- Couleurs et opacité du texte: Modifiez les couleurs de fond et du texte ainsi que l'opacité à l'aide des attributs data-text-bgcolor, data-text-color et data-text-opacity.

- Menu de navigation: Un menu de navigation stylisé qui s'affiche et disparaît en fonction de l'interaction de l'utilisateur. Reste visible lorsque l'utilisateur passe la souris dessus.

- Autoplay: Un bouton pour activer la lecture automatique des diapositives.

- Positionnement et orientation des images: Personnalisez le positionnement et l'orientation de chaque image dans une diapositive à l'aide des attributs data-bg-position et data-bg-orientation.

- Couleurs et opacité des images: Modifiez les couleurs de fond et du texte ainsi que l'opacité à l'aide des attributs data-bg-color et data-bg-opacity.

- Menu de navigation verrouillé / déverrouillé avec la touche M

- Apparitions fluides des objets de vos slides (textes et images pour l'instant).

## Fonctionnalités à venir

- Autoplay avec une vitesse personnalisable.

- Autoplay verrouillé / déverrouillé avec la touche A.

- Transitions entre les slides (fade, fade-up, fade-down, fade-left, fade-right, blur, bounce).

- Ajout de vidéos et fonds vidéo.

- Ajout de boutons et de liens.

- Ajout de formes.

- Ajout de sons.

## Comment utiliser

### Structure HTML

Incluez vos diapositives dans une structure comme celle-ci :

```html



    


        
regjnerkgnerkgbnr

        
ergkljnerognergjoerngerjkogjergjerogjnero

    

    


        

        

    

    


        

        

    

    



```


## Documentation rapide

Ce code JavaScript implémente un carrousel de diapositives avec diverses fonctionnalités, y compris la navigation par boutons et roue de souris, des animations, la personnalisation des éléments textes et images, et un système de lecture automatique.

Structure HTML attendue

La structure HTML devrait contenir des éléments avec les classes .slide, .prev-button, .next-button, et .navigation-buttons, ainsi que des attributs de données spécifiques pour le style et l'animation.

Variables

    slides: Un tableau de tous les éléments de diapositive.

    prevButton: Élément pour passer à la diapositive précédente.

    nextButton: Élément pour passer à la diapositive suivante.

    currentSlide: Index de la diapositive actuelle.

    isMouseOver: Indique si la souris est sur le menu.

    menuLocked: Indique si le menu est verrouillé.

    timeout: Utilisé pour gérer le délai avant de masquer les boutons.

    currentOrder: Utilisé pour le suivi de l'ordre des éléments d'animation.

    autoplayInterval: Interval pour gérer l'autoplay.

### Fonctions

    hideButtons(): Masque les boutons de navigation.

    showButtons(): Affiche les boutons de navigation.

    goToSlide(slideIndex): Navigue vers la diapositive à l'index donné.

    toggleAutoplay(): Active ou désactive l'autoplay.

### Écouteurs d'événements

    Sur la molette de la souris pour naviguer entre les diapositives.

    Sur la touche "M" pour verrouiller/déverrouiller le menu.

    Sur la touche "Espace" pour afficher des éléments dans un ordre spécifié.

    Sur les flèches du clavier pour naviguer entre les diapositives.

    Sur les boutons précédent et suivant pour naviguer entre les diapositives.

    Sur l'ID autoplayButton pour gérer l'autoplay.

### Personnalisation

Les diapositives, les textes et les images peuvent être personnalisés en utilisant divers attributs de données comme data-bg-image, data-text-position, data-text-orientation, etc.

## Installation

Téléchargez ou clonez ce répertoire et ouvrez index.html dans votre navigateur.

---

Créé par [Ormidales](https://github.com/Ormidales)