-
illadelsbous
- https://illadelsbous.com
Pinned Loading
-
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/*
4xs = 360px - 600px, ( 22.5em = 360px )
5sm = 600px - 900px, ( 37.5em = 600px / 50em = 800px )
-
JS Optimized Scroll detector
JS Optimized Scroll detector 1let lastScrollTop = 0;
2const $html = document.documentElement;
3$html.classList.add('near-top');
4window.addEventListener('scroll', () => {
5const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
-
JS Scroll Progress Bar Vanilla js
JS Scroll Progress Bar Vanilla js 1<div id="_progress"></div>
23<style>
4#_progress {
5--scroll: 0%;
-
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:
45function getPosition(e) {
-
JS Is Scrolling or not
JS Is Scrolling or not 1let scrolling = false;
23window.scroll = () => {
4scrolling = true;
5};
-
CSS outlined-text
CSS outlined-text 1.parent {
2background-color: color: #144e7b;
3}
45.outlined {
Something went wrong, please refresh the page to try again.
If the problem persists, check the GitHub status page or contact support.
If the problem persists, check the GitHub status page or contact support.