Pinned Loading

1. cocreating/mytools cocreating/mytools Public

   Shell 1

2. CSS Media queries em/psx equivalences CSS Media queries em/psx equivalences

   1

   /* MOBILE FIRST MEDIA QUERIES (base: 1em=16px)

   2

   Common breakpoints: 360px,600px,800px,900px,1120px,1200px,1366px,1400px,1600px,1800px,1920px,2560px */

   3

   @media (min-width: 22.5em)  { /* 360px */ }

   4

   @media (min-width: 37.5em)  { /* 600px */ }

   5

   @media (min-width: 50em)    { /* 800px */ }

3. JS Optimized Scroll detector JS Optimized Scroll detector

   1

   (function (opts) {

   2

     opts = opts || {};

   3

     var el = document.documentElement,

   4

         nearTop = opts.nearTop || 100,

   5

         delta = opts.delta || 6,

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 {