Skip to content

Instantly share code, notes, and snippets.

Avatar

Majid Valipour majido

View GitHub Profile
@majido
majido / explainer-parallax.gif
Last active May 29, 2020
Host some gifs for scroll-linked animations
@majido
majido / scroll-offset-array-reaveal_unreveal.js
Last active Mar 30, 2020
Scroll Timeline offset examples
View scroll-offset-array-reaveal_unreveal.js
// Original example is from https://github.com/w3c/csswg-drafts/issues/4337
const scroller = document.getElementById("scroller");
const image = document.getElementById("image");
const timeline = new ScrollTimeline({
source: scroller,
scrollOffsets: [100, 200, 800, 900]
});
// timeline progress is devided into 4 steps [0%, 33%, 66%, 100%) which are mapped from [100, 200, 900, 1000]
@majido
majido / scroll-related-effects.md
Created Oct 28, 2019
Interesting scroll related libraries
View scroll-related-effects.md
@majido
majido / gerrit-to-makrdown.js
Last active Mar 23, 2020
Gerrit CL to Markdown
View gerrit-to-makrdown.js
// Small bookmarklet to pring CLs from gerrit in Markdown format.
// Used and tested on https://chromium-review.googlesource.com
// To make this a bookmarklet put the content below into a
// bookmark's link field.
javascript:(function() {
const cls = getCLs();
const desc = Array.prototype.map.call(cls, format);
console.log(desc.join('\n'));
function format(a) {
@majido
majido / detect-scroll-snap-stop.js
Created May 6, 2019
Reliable feature detection for scroll-snap-stop
View detect-scroll-snap-stop.js
// Chrome inadvertantly shipped scroll-snap-stop in Chrome 69 but the feature was implemented in Chrome v75.
// This means that the normal css feature detection CSS.supports('scroll-snap-stop: always)' does not work
// in Chrome between v69 - v75.
// Below is an alternate way of feature detecting scroll-snap-stop that uses a temporary hidden scroller.
const scroller = document.createElement('div');
scroller.style = "opacity:1; position:relative; width: 40px; height: 40px; overflow: scroll; scroll-snap-type: x mandatory;";
const snap1 = document.createElement('div');
snap1.style="margin-left: 0px; width: 1px; height: 1px; scroll-snap-align: start; background-color: blue;"
@majido
majido / 0-element-based-API.idl
Last active Nov 15, 2018
Event Delegation API ideas
View 0-element-based-API.idl
// Element delegates to worker/worklet
interface EventDelegate {};
interface EventTarget {
void addEventDelegate(DOMString type?, EventDelegate delegate, EventDelegateOptions options?);
void removeEventDelegate(DOMString type?, EventDelegate delegate);
};
dictionary EventDelegateOptions {
boolean preventDefault = false;
@majido
majido / jank-bookmarklet.js
Last active Aug 28, 2018
A bookmarklet to add custom amount of jank to main thread. Crafted for those who 💜 jank!
View jank-bookmarklet.js
javascript:(function(){
var meter = `
<label style="position:fixed; z-index:10000; top: 0; left: 50%; transform: translateX(-50%); background-color: pink; padding: 5px;">
Main thread jank (0-500ms): <input id="jankmeter" type="range" min=0 max=500 value=50>
</label>
`;
const d = document.createElement('jank');
d.innerHTML = meter;
document.body.appendChild(d);
@majido
majido / overflow-propagation-using-scrollcustomiaztion.js
Created May 16, 2018
Implementing a declarative scroll propagation control on top of scroll customization
View overflow-propagation-using-scrollcustomiaztion.js
class OverflowPropagationElement extends HTMLElement {
createdCallback() {
// See design doc for details of these experimental APIs: https://docs.google.com/document/d/1VnvAqeWFG9JFZfgG5evBqrLGDZYRE5w6G5jEDORekPY/edit
this.distributeScrollIntent = function(scrollIntent) {
if (scrollIntent.deltaY <= 0) {
if (this.getComputedValue('overflow-propagation-up') == 'normal') {
// let children scroll first and then we scroll if any delta remaining
scrollIntent.distributeToScrollChainDescendant();
this.applyScrollIntent(scrollState);
@majido
majido / scroll-snap-status.md
Last active Nov 19, 2019
Scroll Snap Status & History
View scroll-snap-status.md

A brief history of scroll snapping specification and releases by various browsers.

Summary

As of August 2018: Edge (IE) and Firefox ship the old deprecated spec, Safari and Chrome (starting from v69) ship the current CR spec.

Additional Details

|Date | Status | Specification | Model | Browsers | Features | Notes | Link|

@majido
majido / .blocks
Last active Sep 6, 2017
scroll boundary behavior demo
View .blocks
border: yes
height: 600
scrolling: yes
license: mit