Posté par pierre le 22 mars 2022

Three.js …

Un univers assez intrigant avec texture de planètes et autres effets, jouez un peu avec et observez ses réactions…

Posté par pierre le 18 mars 2022

Détecter si un élément est dans le viewport avec jQuery

Une fonction très simple qui vous permettra de déclencher des événements au moment où ils sont dans la partie visible de la fenêtre du navigateur.

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
    if ($('#Something').isInViewport()) {
        // do something
    } else {
        // do something else
    }
}
Posté par pierre le 18 août 2021

Pug html

Vous désirez optimiser l’écriture de votre code html, Pug pourrait vous être utile. Pug est un outil de templatage qui permet de générer du code HTML en compilant via une fonction Javascript.

L’utilisation de balises n’est plus nécessaire, grâce à un système d’indentations. Les classes et les id sont définis par des raccourcis, respectivement “.” et “#”.

Un des avantages de Pug réside également dans les nombreuses fonctionnalités qu’il offre: possibilité de définir des variables, d’ajouter de petits éléments de code comme des éléments de logique de base (if, each, unless…). On peut en outre écrire du JS directement depuis le fichier .pug, qui sera converti en page HTML.

Plug nécessitera un apprentissage, ne conviendra pas à tous les projets, mais il est toujours intéressant d’être au courant des technologie à disposition.

https://www.sitepoint.com/a-beginners-guide-to-pug/
https://pugjs.org/api/getting-started.html

Posté par pierre le 27 juillet 2021

Essayez cette chaussette verte

Bien que jQuery est toujours un outil très pratique, je vous conseille vivement de tester Greensock pour ajouter des Tween (mouvements d’éléments) à vos pages web. Le framework est plus léger et gère très bien les animations ainsi que les manipulations de classe ou ajout de css. Il deviendra indispensable si vous désirez développer des animations complexes.

https://greensock.com/