Skip to content
View jasubal's full-sized avatar
Block or Report

Block or report jasubal

Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse

Pinned Loading

  1. CSS Media queries em/psx equivalences CSS Media queries em/psx equivalences
    1
    /* MEDIA QUERIES EM/PX with base 1em=16px */
    2
    /* https://www.w3schools.com/tags/ref_pxtoemconversion.asp */
    3
    /*
    4
    xs  = 360px  - 600px,  ( 22.5em = 360px )
    5
    sm  = 600px  - 900px,  ( 37.5em = 600px / 50em = 800px )
  2. JS Optimized Scroll detector JS Optimized Scroll detector
    1
    let lastScrollTop = 0;
    2
    const $html = document.documentElement;
    3
    $html.classList.add('near-top');
    4
    window.addEventListener('scroll', () => {
    5
        const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
  3. JS Scroll Progress Bar Vanilla js JS Scroll Progress Bar Vanilla js
    1
    <div id="_progress"></div>
    2
    
                  
    3
    <style>
    4
    #_progress {
    5
        --scroll: 0%;
  4. JS Get position element/mouse JS Get position element/mouse
    1
    // Determinar las coordenadas del cursor personalizado en relación con la página no es tan fácil.
    2
    // Normalmente, distintos navegadores definen los valores de algunas propiedades de forma diferente.
    3
    // Solución genérica:
    4
    
                  
    5
    function getPosition(e) {
  5. JS Is Scrolling or not JS Is Scrolling or not
    1
    let scrolling = false;
    2
    
                  
    3
    window.scroll = () => {
    4
        scrolling = true;
    5
    };
  6. CSS outlined-text CSS outlined-text
    1
    .parent {
    2
    background-color: color: #144e7b;
    3
    }
    4
    
                  
    5
    .outlined {