DEV Community: Kabirou ALASSANE

Simplifiez la Validation de Données en PHP avec PHPValidator

Kabirou ALASSANE — Wed, 22 Nov 2023 16:55:49 +0000

La validation des données est une étape cruciale dans le développement d’applications PHP robustes. Cela garantit que les données entrantes sont conformes aux attentes, réduisant ainsi les erreurs et améliorant la sécurité. Dans cet article, nous allons explorer l’importance de la validation des données en PHP et présenter PHPValidator, un outil puissant que j’ai développé pour simplifier ce processus.

Pourquoi la validation des données est-elle importante ?

La validation des données est essentielle pour plusieurs raisons :

Sécurité : Évitez les attaques par injection et protégez-vous contre les entrées malveillantes.
Intégrité des données : Assurez-vous que les données respectent le format attendu pour éviter des erreurs inattendues.
Expérience utilisateur : Fournissez des commentaires clairs et précis pour guider les utilisateurs lors de la saisie des données.

PHPValidator : Simplifiez la validation des données en PHP

PHPValidator est une bibliothèque de validation de données open source que j’ai créée pour faciliter la validation en PHP. Elle offre une gamme de règles prédéfinies, tout en permettant aux développeurs d’ajouter leurs propres règles personnalisées.

Installation

L’installation de PHPValidator est simple à l’aide de Composer. Exécutez la commande suivante dans votre terminal :

composer require blakvghost/php-validator

Utilisation de PHPValidator

use BlakvGhost\PHPValidator\Validator;
use BlakvGhost\PHPValidator\ValidatorException;

try {

    $data = [
        'username' => 'BlakvGhost',
        'email' => 'example@example.com',
        'score' => 42,
    ];
    // or
    // $data = $_POST;

    $validator = new Validator($data, [
        'username' => 'required|string',
        'email' => 'required|email',
        'score' => ['required','max:200', new CustomRule()],
        'password' => new CustomRule(),
    ]);

    if ($validator->isValid()) {
        echo "Validation passed!";
    } else {
        $errors = $validator->getErrors();
        print_r($errors);
    }
} catch (ValidatorException $e) {
    echo "Validation error: " . $e->getMessage();
}

Vous pouvez également personnaliser les messages d’erreur de validation

$data = [
    'username' => 'BlakvGhost',
];

$validator = new Validator(
    $data,
    [
        'username' => 'required|string',
    ],
    [
        'username' => [
            'required' => 'Votre nom d\'utilisateur doit être présent',
            'string' => 'Votre nom d\'utilisateur doit forcément être une chaîne de caractère',
            ],
        ]
    );

Création de Règles Personnalisées

Vous pouvez créer vos règles de validation personnalisées. Par exemple, une règle pour valider un numéro de téléphone :

namespace YourNameSpace\Rules;

use BlakvGhost\PHPValidator\Contracts\Rule;

class PhoneRule implements Rule
{
    protected $field;

    public function __construct(protected array $parameters = [])
    {
    }

    public function passes(string $field, $value, array $data): bool
    {
        $this->field = $field;
        // Votre logique de validation ici
        return true;
    }

    public function message(): string
    {
        return "Votre numéro de téléphone est invalide"
    }
}

Utilisez ensuite cette règle dans vos règles de validation :

    use BlakvGhost\PHPValidator\Validator;
    use BlakvGhost\PHPValidator\ValidatorException;

    use YourNameSpace\Rules\PhoneRule;


    // ...

    try {

        $data = [
            'tel' => '425555555',
        ];
        // or
        // $data = $_POST;

        $validator = new Validator($data, [
            'tel' => ['required', new PhoneRule()],
        ]);

        if ($validator->isValid()) {
            echo "Validation passed!";
        } else {
            $errors = $validator->getErrors();
            print_r($errors);
        }
    } catch (ValidatorException $e) {
        echo "Validation error: " . $e->getMessage();
    }

Ou en ajoutant votre classe personnalisée à la liste des règles et utilisez-la comme si elle était native

use BlakvGhost\PHPValidator\Validator;
    use BlakvGhost\PHPValidator\ValidatorException;
    use BlakvGhost\PHPValidator\Mapping\RulesMaped;

    use YourNameSpace\Rules\PhoneRule;

    // Add your rule here using an alias and the full namespace of your custom class
    RulesMaped::addRule('c_phone', PhoneRule::class);

    try {

        $data = [
            'tel' => '428877777',
        ];

        $validator = new Validator($data, [
            'tel' => 'required|c_phone',
        ]);

        if ($validator->isValid()) {
            echo "Validation passed!";
        } else {
            $errors = $validator->getErrors();
            print_r($errors);
        }
    } catch (ValidatorException $e) {
        echo "Validation error: " . $e->getMessage();
    }

Principales fonctionnalités de PHPValidator

Règles prédéfinies : Disposez d’un ensemble complet de règles telles que required, email, numeric, etc.
Personnalisation facile : Ajoutez vos propres règles de validation personnalisées.
Messages traduits : Utilisez des messages d’erreur traduits pour une expérience multilingue.
Intégration avec des frameworks : Intégrez facilement PHPValidator dans vos projets basés sur des frameworks tels que Laravel, Symfony, etc.

Exemple d’intégration avec Laravel

// Installation avec Composer
composer require blakvghost/php-validator

// Exemple d'utilisation dans un contrôleur Laravel
use BlakvGhost\PHPValidator\Validator;

class UserController extends Controller
{
    public function store(Request $request)
    {
        $validator = new Validator($request->all(), [
            'name' => 'required|string|max:255',
            'email' => 'required|email',
            'age' => 'numeric|min:18',
        ]);

        if ($validator->isValid()) {
            // Les données sont valides
        } else {
            // Récupérez les erreurs de validation
            $errors = $validator->getErrors();
        }
    }
}

Conclusion

PHPValidator simplifie le processus de validation des données en PHP, permettant aux développeurs de garantir que leurs applications fonctionnent avec des données fiables. Intégrez-le dans vos projets pour améliorer la sécurité, l’intégrité des données et l’expérience utilisateur.

Pour plus d’informations, consultez la documentation complète de PHPValidator sur GitHub.

N’hésitez pas à contribuer, signaler des problèmes ou proposer des améliorations. Ensemble, faisons de la validation des données en PHP une tâche simple et efficace.

Happy coding !

Animation d'apparition au défilement avec JavaScript et CSS

Kabirou ALASSANE — Sun, 05 Feb 2023 23:04:07 +0000

Dans ce tutoriel, nous allons développer ensemble une animation d'apparition au défilement en utilisant JavaScript et l'objet IntersectionObserver ou simplement en écoutant sur l'évènement scroll. Les éléments qui doivent être animés sont définis avec une classe CSS, et l'animation est déclenchée lorsque l'élément entre dans la zone visible de la fenêtre du navigateur.

Prérequis

Connaissance de base de HTML, CSS et JavaScript
Connaissance des sélecteurs CSS et des classes en JavaScript

1ère méthode: IntersectionObserver

L'objet IntersectionObserver est une API JavaScript qui permet de détecter lorsqu'un élément entre ou sort de la zone visible de la fenêtre du navigateur. Il peut être utilisé pour implémenter une animation d'apparition au défilement de manière efficace et performante. Voici un exemple d'implémentation de l'animation d'apparition au défilement en utilisant IntersectionObserver :

Code HTML

Les éléments qui doivent être animés doivent avoir une classe
.animate-on-scroll.

<div class="animate-on-scroll">Contenu à animer</div>

Code CSS

Les styles de base sont définis pour cacher les éléments animés jusqu'à ce qu'ils soient en train d'intersecter avec la zone visible, avec une opacité initiale de 0 et une translation initiale de 50 pixels vers le bas. Lorsque la classe .is-visible est ajoutée, l'opacité est définie à 1 et la translation initiale est annulée.

.animate-on-scroll {
  /* Initialement invisible avec une opacité de 0 */
  opacity: 0;
  /* Translation initiale de 50 pixels vers le bas */
  transform: translateY(50px);
  /* Animation pour la transparence et la translation */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.animate-on-scroll.is-visible {
  /* Devenir visible avec une opacité de 1 */
  opacity: 1;
  /* Translation initiale de 0 pixels */
  transform: translateY(0);
}

Code JavaScript

Le script JavaScript instancie un objet IntersectionObserver avec les options spécifiées. Lorsque les entrées intersectent la zone visible, la classe .is-visible est ajoutée pour déclencher l'animation CSS. Les éléments animés sont observés en utilisant la méthode observe de l'observateur d'intersection.

// Ceci est une fonction auto - exécutable.Les fonctions auto - exécutables
// sont des fonctions qui s'exécutent immédiatement après leur déclaration,
// sans avoir besoin d'être appelées.Les accolades immédiatement après la 
// déclaration de la fonction et les parenthèses à la fin de la déclaration 
// définissent la fonction et permettent de l'exécuter immédiatement.
(function () {
    // Utilisation de la directive "use strict" pour activer le mode strict en JavaScript
    // Cela implique une meilleure gestion des erreurs et une syntaxe plus stricte pour le code
    "use strict"

    // Sélectionne tous les éléments avec la classe "animate-on-scroll"
    const elements = document.querySelectorAll(".animate-on-scroll");

    // Options pour l'observateur d'intersection
    const options = {
        threshold: 0.25
    };

    // Instanciation de l'observateur d'intersection
    const observer = new IntersectionObserver(function (entries, observer) {
        // Boucle sur chaque entrée pour traiter les intersections
        entries.forEach(entry => {
            // Si l'entrée est en train d'intersecter avec la zone visible
            if (entry.isIntersecting) {
                // Ajouter la classe "is-visible" pour déclencher l'animation
                entry.target.classList.add("is-visible");
                // Cesser d'observer cet élément
                observer.unobserve(entry.target);
            }
        });
    }, options);

    // Observer chaque élément
    elements.forEach(element => {
        observer.observe(element);
    });

})();

2ème méthode: Scroll

Voici comment vous pouvez créer une animation d'apparition au défilement en JavaScript autrement:

Détectez le défilement de la page en utilisant l'événement "scroll" ou "onscroll".
Calculez la position de l'élément par rapport à la fenêtre du navigateur à l'aide de la méthode "getBoundingClientRect()".
Si la position de l'élément est dans la zone visible de la fenêtre du navigateur, vous pouvez alors ajouter une classe à l'élément avec des styles d'animation CSS.

Voici un exemple simple de code HTML qui peut être utilisé avec l'implémentation JavaScript de l'animation d'apparition au défilement :

<div class="animate-on-scroll">Contenu à animer</div>

Dans ce code, nous avons simplement un élément div avec la classe "animate-on-scroll". C'est ce qui permettra à notre code JavaScript de détecter l'élément et d'appliquer l'animation d'apparition au défilement.

Il est également important d'avoir un peu de CSS pour styliser l'animation :

.animate-on-scroll {
    /* Définit une opacité initiale de 0 pour les éléments */
    opacity: 0;
    /* Définit une transition d'opacité d'une seconde */
    transition: opacity 1s;
}

.animate-on-scroll.is-visible {
    /* Définit une opacité de 1 pour les éléments avec la classe 'is-visible' */
    opacity: 1;
}

/* Ensemble, ces styles permettent aux éléments d'être rendus
    transparents et de devenir progressivement plus opaques en 1 seconde
    lorsque la classe 'is-visible' est ajoutée. Cela peut créer un effet
    d'animation pour les éléments. */

Dans ce code CSS, nous avons défini la classe "animate-on-scroll" avec une opacité initiale de 0, ce qui rend l'élément invisible au départ. Nous avons également ajouté une transition d'opacité pour lisser l'animation. La classe "is-visible" ajoute une opacité de 1, ce qui rend l'élément entièrement visible.

Et le plus important, le JavaScript:

// Ceci est une fonction auto - exécutable.Les fonctions auto - exécutables
// sont des fonctions qui s'exécutent immédiatement après leur déclaration,
// sans avoir besoin d'être appelées.Les accolades immédiatement après la 
// déclaration de la fonction et les parenthèses à la fin de la déclaration 
// définissent la fonction et permettent de l'exécuter immédiatement.
(function () {
    // Utilisation de la directive "use strict" pour activer le mode strict en JavaScript
    // Cela implique une meilleure gestion des erreurs et une syntaxe plus stricte pour le code
    "use strict"

    // Définir la fonction detectAndAnimate pour basculer la classe des éléments
    const detectAndAnimate = () => {
        // Sélectionner tous les éléments avec la classe 'animate-on-scroll'
        const elements = document.querySelectorAll('.animate-on-scroll');
        // Boucle sur tous les éléments sélectionnés
        elements.forEach(element => {
            // Vérifier si l'élément est visible dans la fenêtre du navigateur
            const isVisible = isElementInViewport(element);
            // Ajouter ou supprimer la classe 'is-visible' en fonction de la visibilité de l'élément
            element.classList.toggle('is-visible', isVisible);
        });
    };

    // Définir la fonction isElementInViewport pour vérifier la visibilité de l'élément dans la fenêtre du navigateur
    const isElementInViewport = el => {
        // Récupérer les dimensions de l'élément
        const rect = el.getBoundingClientRect();
        // Récupérer la hauteur de la fenêtre du navigateur
        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
        // Récupérer la largeur de la fenêtre du navigateur
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

        // Retourner vrai si l'élément est entièrement visible dans la fenêtre du navigateur, sinon retourner faux
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= viewportHeight &&
            rect.right <= viewportWidth
        );
    };

    // Écouter l'événement de défilement de la fenêtre du navigateur et appeler la fonction detectAndAnimate
    window.addEventListener('scroll', detectAndAnimate);
    // Appeler la fonction detectAndAnimate une fois au démarrage pour mettre à jour l'état des éléments
    detectAndAnimate();

})()

Notez que dans cet exemple, nous ajoutons un écouteur d'événement "scroll" à la fenêtre, puis nous parcourons tous les éléments avec la classe "animate-on-scroll" pour déterminer si leur position est dans la zone visible de la fenêtre du navigateur. Si c'est le cas, nous ajoutons la classe "is-visible" à l'élément, sinon nous la supprimons.

Conclusion

J’espère que ce tutoriel vous a plu et vous a été utile. Si vous avez des suggestions ou des commentaires, n’hésitez pas à me les faire parvenir. Retrouver le code source déjà fait sur mon GitHub. Merci!

Créer un Carrousel en HTML CSS & JS

Kabirou ALASSANE — Sun, 05 Feb 2023 02:54:48 +0000

Introduction

Un carrousel ou slideshow, également appelé diaporama, est un outil très pratique pour afficher plusieurs images ou éléments de contenu en une seule page. Il permet de faire défiler automatiquement ou manuellement des éléments, ce qui est très utile pour présenter des images, des produits ou des témoignages sur un site Web.

Dans ce tutoriel, nous allons développer ensemble un carrousel en JavaScript et en CSS. Le carrousel permettra de faire défiler des images de manière automatique, mais il sera également possible de le contrôler manuellement en cliquant sur les boutons "précédent" et "suivant". De plus, des points seront affichés en bas de l'image pour permettre de sauter directement à une image en particulier ainsi qu'un système de glisser pour défiler les images sur les smartphones tactiles.

Préparation

Tout d'abord, nous devons définir les éléments HTML nécessaires pour notre carrousel. Il nous faut un

pour contenir l'ensemble du carrousel, un autre pour contenir les images, et des boutons pour contrôler le défilement des images. Voici à quoi cela peut ressembler :

HTML

Créer un fichier index.html dans le répertoire créer pour le carrousel

<!DOCTYPE html>
<html lang="fr">

<head>
    <!-- Déclaration du type de document HTML -->
    <meta charset="UTF-8">
    <!-- Déclaration de la compatibilité pour les différents navigateurs -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Déclaration de la largeur de la vue pour les différents dispositifs -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Titre de la page -->
    <title>Carousel Exemple</title>
    <!-- Lien vers le fichier CSS pour la mise en forme -->
    <link rel="stylesheet" href="style.css">
    <!-- Lien vers le fichier JavaScript pour les fonctionnalités interactives -->
    <script src="app.js" async></script>
</head>

<body>
    <!-- Conteneur principal pour le carrousel -->
    <div class="container">
        <!-- Élément carrousel -->
        <div class="carousel">
            <!-- Conteneur interne pour les diapositives -->
            <div class="carousel-inner">
                <!-- Première diapositive -->
                <div class="slide">
                    <!-- Image de la première diapositive -->
                    <img src="https://images.pexels.com/photos/1242764/pexels-photo-1242764.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                        alt="Image 1">
                </div>
                <!-- Deuxième diapositive -->
                <div class="slide">
                    <!-- Image de la deuxième diapositive -->
                    <img src="https://images.pexels.com/photos/1329711/pexels-photo-1329711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2p"
                        alt="Image 2">
                </div>
                <!-- Troisième diapositive -->
                <div class="slide">
                    <!-- Image de la troisième diapositive -->
                    <img src="https://images.pexels.com/photos/3183132/pexels-photo-3183132.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                        alt="Image 3">
                </div>
                <!-- Quatrième diapositive -->
                <div class="slide">
                    <!-- Image de la quatrième diapositive -->
                    <img src="https://images.pexels.com/photos/2739013/pexels-photo-2739013.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                        alt="Image 4">
                </div>
                <!-- Cinquième diapositive -->
                <div class="slide">
                    <!-- Image de la cinquième diapositive -->
                    <img src="https://images.pexels.com/photos/3555161/pexels-photo-3555161.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                        alt="Image 5">
                </div>
            </div>
            <!-- Conteneur pour les boutons de navigation -->
            <div class="carousel-controls">
                <!-- Bouton pour passer à la diapositive précédente -->
                <button id="prev">Précédent</button>
                <!-- Bouton pour passer à la diapositive suivante -->
                <button id="next">Suivant</button>
            </div>
            <!-- Conteneur pour les points de navigation -->
            <div class="carousel-dots"></div>
        </div>
    </div>

</body>

</html>

Style CSS

Maintenant que nous avons défini notre structure HTML, nous pouvons commencer à définir le style pour notre carrousel en utilisant CSS en créant un fichier style.css dans le même répertoire.

/* Suppression des marges et des bords pour html et body */
html,
body {
    padding: 0;
    margin: 0;
}

/* Définition d'un container pour gérer l'affichage */
.container {
    overflow: hidden;
    /* Cache les éléments qui dépassent du container */
}

/* Définition du carousel */
.carousel {
    position: relative;
    /* Le carousel est positionné relativement à son parent */
}

/* Définition de l'élément contenant les diapositives */
.carousel-inner {
    display: flex;
    /* Affiche les éléments en ligne */
    overflow: hidden;
    /* Cache les éléments qui dépassent */
    height: 100vh;
    /* Hauteur égale à 100% de la hauteur de la vue */
    flex-wrap: nowrap;
    /* Empêche les éléments de se placer sur plusieurs lignes */
}

/* Définition des diapositives */
.slide {
    flex: 0 0 100%;
    /* Largeur de chaque diapositive est de 100% */
    height: 100%;
    /* Hauteur de chaque diapositive est de 100% */
    transition: .5s ease-in-out;
    /* Ajout d'une animation douce pour la transition entre les diapositives */
}

/* Définition de l'affichage de l'image de chaque diapositive */
.slide img {
    width: 100%;
    /* Largeur de l'image est de 100% */
    height: 100%;
    /* Hauteur de l'image est de 100% */
    object-fit: cover;
    /* Couvre tout l'espace disponible */
}

/* Définition des boutons de contrôle du carousel */
.carousel-controls {
    position: absolute;
    /* Les boutons sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 10%;
    /* La distance à gauche est de 10% */
    right: 10%;
    /* La distance à droite est de 10% */
    top: 50%;
    /* La distance du haut est de 50% */
    display: flex;
    /* Affiche les boutons en ligne */
    justify-content: space-between;
    /* Espacement égal entre les boutons */
}

/* Style des boutons de contrôle */
.carousel-controls button {
    padding: 10px;
    /* Ajout de padding pour un meilleur contrôle */
    background-color: aquamarine;
    /* Arrière-plan en aquamarine */
}

/* Définition des points de contrôle */
.carousel-dots {
    position: absolute;
    /* Les points sont absolument positionnés */
    z-index: 5;
    /* Ils sont placés au-dessus des autres éléments */
    left: 50%;
    /* La distance à gauche est de 50% */
    right: 50%;
    /* La distance à droite est de 50% */
    bottom: 10%;
    /*La distance du bas est de 10% */
    display: flex;
    /* Affiche les points en ligne */
    justify-content: center;
    /* Centrage des points */
}

/* Style des points de contrôle */
.carousel-dots .dot {
    border-radius: 50%;
    /* Les points sont en forme de cercle */
    margin: 5px;
    /* Ajout d'un margin pour un meilleur contrôle */
    cursor: pointer;
    /* Curseur en forme de main pour un meilleur contrôle */
}

/* Styles pour les points de navigation du carrousel */
.carousel-dots .active {
    /* Border de 10px pour le point actif */
    border: 10px solid #761530 !important;
    /* !important permet de surcharger les autres styles éventuels */
}

.carousel-dots .inactive {
    /* Border de 10px pour les points inactifs */
    border: 10px solid #2596be;
}

JavaScript

Le code JavaScript permet de faire défiler automatiquement les images, de contrôler la navigation et de mettre à jour les points de navigation ainsi que de gérer le glisser sur tactile.

// Ceci est une fonction auto - exécutable.Les fonctions auto - exécutables
// sont des fonctions qui s'exécutent immédiatement après leur déclaration,
// sans avoir besoin d'être appelées.Les accolades immédiatement après la 
// déclaration de la fonction et les parenthèses à la fin de la déclaration 
// définissent la fonction et permettent de l'exécuter immédiatement.
(function () {
    // Utilisation de la directive "use strict" pour activer le mode strict en JavaScript
    // Cela implique une meilleure gestion des erreurs et une syntaxe plus stricte pour le code
    "use stict"

    // Déclare la constante pour la durée de chaque slide
    const slideTimeout = 5000;

    // Récupère les boutons de navigation
    const prev = document.querySelector('#prev');
    const next = document.querySelector('#next');

    // Récupère tous les éléments de type "slide"
    const $slides = document.querySelectorAll('.slide');

    // Initialisation de la variable pour les "dots"
    let $dots;

    // Initialisation de la variable pour l'intervalle d'affichage des slides
    let intervalId;

    // Initialisation du slide courant à 1
    let currentSlide = 1;

    // Fonction pour afficher un slide spécifique en utilisant un index
    function slideTo(index) {
        // Vérifie si l'index est valide (compris entre 0 et le nombre de slides - 1)
        currentSlide = index >= $slides.length || index < 1 ? 0 : index;

        // Boucle sur tous les éléments de type "slide" pour les déplacer
        $slides.forEach($elt => $elt.style.transform = `translateX(-${currentSlide * 100}%)`);

        // Boucle sur tous les "dots" pour mettre à jour la couleur par la classe "active" ou "inactive"
        $dots.forEach(($elt, key) => $elt.classList = `dot ${key === currentSlide? 'active': 'inactive'}`);
    }

    // Fonction pour afficher le prochain slide
    function showSlide() {
        slideTo(currentSlide);
        currentSlide++;
    }

    // Boucle pour créer les "dots" en fonction du nombre de slides
    for (let i = 1; i <= $slides.length; i++) {
        let dotClass = i == currentSlide ? 'active' : 'inactive';
        let $dot = `<span data-slidId="${i}" class="dot ${dotClass}"></span>`;
        document.querySelector('.carousel-dots').innerHTML += $dot;
    }

    // Récupère tous les "dots"
    $dots = document.querySelectorAll('.dot');

    // Boucle pour ajouter des écouteurs d'événement "click" sur chaque "dot"
    $dots.forEach(($elt, key) => $elt.addEventListener('click', () => slideTo(key)));

    // Ajout d'un écouteur d'événement "click" sur le bouton "prev" pour afficher le slide précédent
    prev.addEventListener('click', () => slideTo(--currentSlide))

    // Ajout d'un écouteur d'événement "click" sur le bouton "next" pour afficher le slide suivant
    next.addEventListener('click', () => slideTo(++currentSlide))

    // Initialisation de l'intervalle pour afficher les slides
    intervalId = setInterval(showSlide, slideTimeout)
    // Boucle sur tous les éléments de type "slide" pour ajouter des écouteurs d'événement pour les interactions avec la souris et le toucher
    $slides.forEach($elt => {
        let startX;
        let endX;
        // Efface l'intervalle d'affichage des slides lorsque la souris passe sur un slide
        $elt.addEventListener('mouseover', () => {
            clearInterval(intervalId);
        }, false)
        // Réinitialise l'intervalle d'affichage des slides lorsque la souris sort d'un slide
        $elt.addEventListener('mouseout', () => {
            intervalId = setInterval(showSlide, slideTimeout);
        }, false);
        // Enregistre la position initiale du toucher lorsque l'utilisateur touche un slide
        $elt.addEventListener('touchstart', (event) => {
            startX = event.touches[0].clientX;
        });
        // Enregistre la position finale du toucher lorsque l'utilisateur relâche son doigt
        $elt.addEventListener('touchend', (event) => {
            endX = event.changedTouches[0].clientX;
            // Si la position initiale est plus grande que la position finale, affiche le prochain slide
            if (startX > endX) {
                slideTo(currentSlide + 1);
                // Si la position initiale est plus petite que la position finale, affiche le slide précédent
            } else if (startX < endX) {
                slideTo(currentSlide - 1);
            }
        });
    })
})()

Conclusion

J'espère que ce tutoriel vous a plu et vous a été utile. Si vous avez des suggestions ou des commentaires, n'hésitez pas à me les faire parvenir via GitHub. Merci!

Animation d'écriture automatique de texte en javascript

Kabirou ALASSANE — Tue, 31 Jan 2023 00:12:54 +0000

Bonjour, nous allons voir dans ce tutoriel comment utiliser la librairie Futura.js pour créer une animation d'écriture automatique de texte en JavaScript.

Futura.js est une librairie javascript d'implémentation d'animation, de carrousels et plus…

Nous allons d'abord installer futura.js dans notre projet, il existe trois moyens pour le faire, soit par:

NPM Par le gestionnaire de dépendance NPM il faut procéder ainsi:

npm install @futuravision/futura.js

Une fois installer avec succès, vous pouvez importer le module AutoWriteText

import {AutoWriteText} from 'futura.js';

CDN Pour l'utiliser en CDN unpkg :

<script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>

GitHub Vous pouvez télécharger le projet sur GitHub

git clone https://github.com/BlakvGhost/FuturaJS.git

Ouvrir une balise script dans le head

<script src="futurajs/dist/futurajs.min.js" charset="utf-8"></script>

Création de l'animation d'écriture automatique de texte

Maintenant que vous avez installer futura.js, nous allons pouvoir implémenter notre animation d'écriture automatique de texte dans sur notre site web:

Vous devez extensier AutoWriteText avec les options de votre choix

new fJs.AutoWriteText({
    separator: 'separator',
    timeout: 'the time out in milisecond'
});
// fJs lorsque vous utiliser un cdn ou le github, par contre
// utiliser simplement AutoWriteText() pour un NPM

Maintenant, il faut définir en sur site dans la balise qui doit contenir le texte, les attributs data pour l'initialiser:

<h1 data-fv-anim='autowrite' data-fv-data="Write Here Your Text"></h1>
// data-fv-anim="autowrite": pour initialiser l'animation
// data-fv-data="Write Here Your Text": Pour le passer la texte qui sera auto ecrit.

Exemple:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <script src="https://unpkg.com/@futuravision/futura.js/dist/futurajs.min.js"></script>
    </head>
    <body>
        <h1 data-fv-anim='autowrite' data-fv-data="Write Here Your Text"></h1>
    </body>
    <script type="text/javascript">
        new fJs.AutoWriteText({
        separator: '|',
        timeout: 300
    });
    </script>
</html>

Laissez des étoiles sur le projet GitHub de futura.js en le visitant ici.

Futura.js

Kabirou ALASSANE — Mon, 30 Jan 2023 23:16:18 +0000

Salut! Je suis heureux de vous présenter notre toute nouvelle librairie JavaScript : Futura.js!

Futura.js est une librairie conçue pour faciliter la création de carousels et d'animations de défilement, d’écriture automatique des texte à leur apparition, et pleins d'autre. Nous avons travaillé dur pour fournir une solution simple et efficace pour les développeurs souhaitant ajouter du dynamisme à leurs projets.

Notre librairie est facile à utiliser et est accompagnée de documentation détaillée et d'exemples de code pour vous aider à démarrer. Nous sommes impatients de voir ce que vous allez créer avec Futura.js !
Vous pouvez consulter notre site web à l'adresse suivante :
https://blakvghost.github.io/FuturaJS/

N'hésitez pas à nous envoyer vos commentaires et suggestions, nous sommes toujours à l'écoute de nos utilisateurs pour améliorer notre librairie.
Nous sommes également à la recherche de contributeurs pour nous aider à développer Futura.js . Si vous êtes intéressé pour nous rejoindre, n'hésitez pas à nous contacter !
Merci de votre soutien et nous espérons que vous apprécierez FuturaJS !