mevius6

<svg width="100" height="100" viewBox="0 0 24 24">
  <path d="M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z" />
</svg>

mevius6

Bind CSS keyframe animation to scroll

A Pen by Chris Coyier on CodePen.

License.

mevius6

const doc = document;

const select = (expr, con) => (con || doc).querySelector(expr);
const selectAll = (expr, con) => {
  return Array.prototype.slice.call((con || doc).querySelectorAll(expr));
}
const selectFromData = (expr, con) => selectAll(`[data-${con}]`)
  .find(item => item.dataset[con] === expr);

mevius6

let lock

try {
  lock = await navigator.wakeLock.request('screen');
} catch (err) {
  // Error or rejection
  console.log('Wake Lock error: ', err);
}

await lock.release()

mevius6

const parsedUrl = new URL(window.location.href);

const modules = {
  feed: import('./feed.js'),
  form: import('./form.js'),
  map: import('./map.js'),
};

/**
 * Асинхронная загрузка модулей

mevius6

// https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSModules/v1Explainer.md
import styles from './html5Element.css';

class HTML5Element extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({ mode: "closed" });
    
    this.shadowRoot.adoptedStyleSheets = [styles];
    

mevius6

const UA = navigator.userAgent;
const root = document.documentElement;
const body = document.body;

const MathUtils = {
  map: (x, a, b, c, d) => ((x - a) * (d - c)) / (b - a) + c,
  // линейная интерполяция
  lerp: (min, max, val) => min * (1 - val) + max * val,
  // расстояние между двумя точками
  distance: (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1),

mevius6

{
  /* ------------------------------------------------------------------------
    [Navigation by Tokens]
    ├── window
    ├── workbench
    ├── explorer
    ├── [editor]
    │   ├── minimap
    │   └── suggest
    ├── files