Intégrateur Multimédia
  • 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
  • Wordpress

    Parce que Wordpress permet tout de même de produire des sites dynamiques sans trop toucher au PHP, j'ai fait mon propre thème responsive compatible Woocommerce.

    Avec les plugins Advanced Custom Fields Pro et Block Lab et des surcouches CSS et Vanilla Javascript, j'ai développé quelques modules interactifs intéressants.

    Avec cette base, je suis prêt pour de la vraie prod !

    Voir le site
    Voir un blog regalTheme
  • 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
  • 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 !

    Voir la démo
  • Parallax Vanilla

    Le RegalParallax sans jQuery, encore mieux !
    Un constructeur de parallax de 7Ko seulement.

    Nouveauté mai 2019 !

    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 grace au getComputedStyle(plugin.el).transform et quelques génuflexions neuronales !

    Voir la démo
  • 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
  • rollover tilt

    Petit constructeur Javascript Vanilla (4.40 Ko) pour effet de rollover qui déforme l'élément selon la position de la souris.
    Oui, comme le visuel sur le côté !

    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