Avant / Après

Avec les incendies qui ont ravagés la France cet été, on a vu fleurir sur la plupart des sites d'information des petits modules avec des vues satellites "avant/après".
Et je me suis rappelé que j'avais fait un petit plugin jQuery pour cela il y a quelques années.

Alors, hop ! Voici la version "moderne" en javascript Vanilla !

Voir la démo

Diaporama Ultra-light

Je ne sais pas vous mais moi, quand on me demande de faire une galerie de photos ou d'images simple, ça m'ennuie de charger un plugin de carousel complet, complexe et lourd. Alors, j'ai fait mon propre constructeur vanilla ultra-light (~9Ko minifié, 18Ko non-minifié).

Ce mini-slider n'a pas pour vocation de remplacer les Carousels complets comme Slick, Flickity ou Tiny-slider et il ne peut afficher qu'une diapo à la fois mais c'est ce qu'on demande à un diaporama, non ?

Voir la démo

Voir en action

Formulaires

Toi aussi tu aimes les jolis formulaires et la vérification des saisies en javascript 

Toi aussi, tu trouves que c'est compliqué et un peu ingrat à intégrer ?

Voici une solution en Javascript Vanilla qui te simplifiera la vie !

Nouveautés 2022 :

- Classes adaptées aux webForm génériques de Drupal.
- Facile de passer d'un mode d'affichage standard à un mode "labels DANS les champs".

Voir la démo

Parallax Vanilla

Le RegalParallax sans jQuery, encore mieux !
Un constructeur de parallax de 6,11 Ko seulement (minifié).

Nouveauté aout 2021 !

Maintenant, on peut appliquer des transform et une opacité aux objets parallaxés via CSS sans que ceux-ci ne soient écrasés par le script !

Voir la démo

RegalSnippets

Quelques petits polyfills, fonctions, variables qui me sont devenus indispensable aujourd'hui pour bien parler le

Javascript Vanilla.

Alors, je partage !

Voir les explications et télécharger les Snippets

Onglets

Parce que la présentation de contenus en onglets revient régulièrement, autant faire un petit constructeur vanilla qui est bien utile !

SCSS/CSS3 et Javascript Vanilla.

Voir les explications et télécharger le RegalTab

Accordéons

Et les accordéons ?

On en veut souvent aussi des accordéons.

Alors voici un petit constructeur Vanilla exprès pour !

SCSS/CSS3 et Javascript Vanilla.

Voir les explications et télécharger le RegalAccordion

Onglets et Accordéon

Et si on veut un affichage en onglets pour desktop et un affichage en accordéon pour mobile ?

Pas de souci !

SCSS/CSS3 et Javascript Vanilla.

Voir les explications et télécharger les constructeurs

Map interactive

Dans le cadre d'un projet avec Lacroix.fr, j'ai produit une carte des régions de France interactive pour les élections municipales à venir en 2020.

Fichier SVG, CSS3 et Javascript Vanilla.

Voir la carte

Audiocontext HTML5 JS Vanilla

Le lecteur de fichiers audio et/ou vidéo HTML5 en Javascript Vanilla.
Plus besoin de jQuery pour afficher le spectre du son et faire du chapitrage !

Voir la démo

Mise en pratique avec mon album imaginaire

regal-mouse-parallax

Constructeur Javascript Vanilla pour effet de déplacement d'objets selon la position de la souris.

On peut appliquer translateX, translateY, scale et rotation.

On peut choisir l'élément qui servira de référence au lancement du parallax et à la position de la souris (window, parent ou lui-même).

Un seul événement onmouseover appliqué à la window pour améliorer les perfs et éviter les ralentissements ou accoups.

Ce plugin permet d'appliquer des transform à des éléments qui ont déjà un transform en CSS.
Il récupère le transform initial (grace au getComputedStyle(plugin.el).transform) et applique son propre transform par-dessus. C'est top.

Voir la démo

un autre rollover sympa

Petit constructuer Javascript Vanilla (3.05 Ko) pour effet de rollover zoom + déplacement sous la souris.

Voir la démo

resonance-audio SDK

SDK développé par Google qui permet de manipuler des sons avec l'API Audiocontext.
Avec cette bibliothèque, on peut déterminer la taille de la pièce où on écoute le son, la matière de chaque cloison (murs, sol et plafond), la position de la source du son, la position du listener et encore plein d'autres choses très marrantes !
On peut en temps réel modifier tous ces paramètres.
Plutôt prometteur !

Voir la démo

scrollama.js

scrollama.js est un constructeur Javascript Vanilla très pratique et léger (9.38Ko minifié) qui permet de détecter lorsqu'un élément devient visible et de déclencher des événements en conséquence.

Avec un peu d'imagination et quelques lignes de code, on peut faire des animations plutôt sympas...

Voir la démo

Bannières javascript

En intégrant les banners en Javascript Vanilla, on économise le poids de jQuery (85Ko).
En programmant l'animation à la main, pas besoin de Adobe Edge et on économise 106Ko.

Reste à bien optimiser les images (avec fileOptimizer par exemple) et on obtient des bannières animées HTML5 très légères.

Voir la démo

Email responsive

Intégrer une newsletter ou un emailing est bien plus complexe qu'on ne pourrait le croire.
La faute à la multitude de mailers/webmails qui interprètent tous le code HTML à leur sauce (Oulook utilise toujours le moteur d'interprétation de Word ! Et la plupart des webmails ré-écrivent entièrement le code HTML en supprimant des blocs comme ça leur chante !) mais aussi à la multitude de devices (combien de modèle de mobiles déjà ?).
Intégrer une newsletter multi-colonnes responsive peut vite devenir un cauchemar...
Même le framework Email for Foundation ne gère pas correctement ce point sous Android par exemple.
Heureusement, il y a des solutions, certes un peu lourdes à implémenter, mais efficaces.

Voir la démo

Parallax Latéral Vanilla

Un constructeur Vanilla pour appliquer un déplacement horizontal lorsqu'on effectue un scroll vertical.
Plus besoin de jQuery !

Excellent pour les diaporamas !

Voir la démo

jquery.fullpage.js

Fullpage est un super plugin jQuery qui permet de naviguer de section en section par un simple roulement de molette de la souris.
Très efficace et assez léger en version minifiée (28Ko), je l'adopte !
Avec une petite couche de TweenLite pour les animations, le résultat est assez épatant.

Il existe aussi une version Vanilla très efficace !
Voir Sentelis.com

Voir la démo

Fractale

Un constructeur de fractales animées.
Bon, je ne sais pas bien à quoi ni à qui ça va servir mais je suis littéralement hypnotisé par les fractales !

Voir la démo

Fixed-nav vanilla

Grâce aux avancées du langage Javascript, on peut maintenant se passer de la bibilothèque jQuery. On appelle ça faire du javascript Vanilla
Alors, il est temps pour moi de remplacer mes plugins jQuery par des constructeurs vanilla.
Pour commencer, voici la fixed-nav.

Voir la démo

Vidéos HTML5 avec couche alpha

Les vidéos HTML5, c'est bien, c'est très bien même. Mais le format avec couche alpha n'est pas interprété par les navigateurs, c'est dommage...
Rassurez-vous, il y a une solution ! La preuve en image (en vidéo, même)

Voir la démo

Plugin jQuery lazy-load

Pour charger les images uniquement lorsqu'elles approchent du viewport.

Voir la démo

Plugin jQuery sticky

Pour fixer temporairement des éléments en haut de page.
Mais aussi, un plugin fixed-nav qui fixe une navigation avec ancres en haut de sa zone.
Et enfin, un autre petit plugin rigolo pour un p'tit truc sur une image...

Trois plugins pour le prix d'un !

Voir la démo

Diaporama musical

Mix des plugins de diaporamas fullscreen, parallax latéral et spectre du son audio HTML5 pour un petit diaporama en musique.

Voir et écouter

Plugin jQuery player vidéo

Pour youtube et/ou dailymotion.

Possibilité d'afficher plusieurs players des deux types dans la même page.
Commandes personnalisables.
Navigation par chapitres.
Github repository : https://github.com/regaloeb/player-video

Voir les players

Un player full-sreen qui se fixe en haut du viewport.

Le player fullscreen

Parallax jQuery personnel

J'ai toujours préféré faire moi-même que d'utiliser des dev tout pré-machés.
D'abord, c'est pas du jeu.
Ensuite, et surtout, cela me permet de maîtriser complètement le code de façon à pouvoir l'adapter aux besoins spécifiques d'un projet. Je sais d'expérience que chaque projet est unique.

Voir le parallax

Diaporamas full-screen et parallax latéral

Petits plugins jQuery pour diaporamas wizzzzz (encore un peu expérimentaux, ils seront améliorés au gré des besoins/envies !).

Voir le diaporama full-screen

Voir le diaporama parallax latéral

AudioContext

Visualisation du spectre audio de sources audios et/ou vidéos dans des canvas.
Petit plugin jQuery pour le fun (et aussi pour pouvoir placer facilement plusieurs objets spectrumSound dans la même page !).
Simple comme bonjour (à utiliser...) :
$('.spectrumSound').each(function(){$(this).regalSpectrum();});
Oscilloscope et barres superposés, couleur aléatoire et visualisation en cercles concentriques qui suit la barre de progression par défaut.
Fermeture des sons en cours de lecture lorsqu'on en lance un nouveau.
Possibilité de choisir un ou plusieurs types de visualisation et la couleur avec attributs data-values dans le HTML ou au moment de l'initialisation javascript du plugin :
data-values="{'spectreView':0, 'sinusoidView':1, 'circlesView':1, 'stopOthers': 0, 'color': '251,233,21'}"
$(this).regalSpectrum({'spectreView':0, 'sinusoidView':1, 'circlesView':1, 'stopOthers': 0});
Chapitrage possible avec visualisation sur la barre de progression.
Bien sûr, ce plugin évoluera au gré des envies et des besoins.
Non-compatible avec IE (même EDGE), le plugin devient juste un player son ou vidéo avec simple barre de progression... dommage pour eux !

Github repository : https://github.com/regaloeb/player-HTML5

Voir le spectre du son

Un truc

Tapez du texte et... voyez le truc !

Ça va bouger

Player audio zarbi

C'est trop facile de cliquer sur un bouton "play" pour écouter du son.
Ici, il faut bouger la souris et/ou scroller sans s'arrêter.

Écouter

Parallax éclaté

L'autopsie d'un androïde en parallax !
Je sais qu'un jour ça pourra être utile à un projet (sans l'androïde bien sûr).

L'androide

CSS3

Flip 3D retournement d'éléments.

Flip!

Même principe graphique utilisé comme interface de lecteur audio.

Voir la page

Etude des possibilités offertes par le blendMode CSS3.

Voir la page

Audio HTML5

Player audio HTML5 avec lecture en boucle de plusieurs chansons, démarrage aléatoire.
Accès aux informations du titre avec effet accordéon.

Voir la page

Canvas javascript

Adaptation d'un casse-brique canvas existant.
Création de matrices personnelles.
Sonorisation avec objet Audio HTML5.

Voir la page

Dessin canvas.
Exports PNG et matrice javascript.
Shoot PNG.
Sonorisation avec objets Audio HTML5.

Voir la page