danjohnsonnj Goto Github PK

animate-scrollto-es6

Animate page scroll to an arbitrary X and Y

background-sounds

Learning to use Web Audio API, with browser cache to mimic a small PWA

blur-up

Implementation exploration of blur-up progressive image loading.

boilerplate

This project creator uses webpack 4 and Babel 6, and LESS as a CSS preprocessor. Bring your own web server and use the NPM watch scripts to make it easier to see your changes.

bulksplash

A simple command line tool that lets you bulk download images from Unsplash

canvas-sketch-experiments

cinemagraph

A web implementation of cinemagraph

compare-foods

covid-19-tracker

Display latest data from covidtracking.com for various states. Available at https://danjohnsonnj.github.io/covid-19-tracker/index and https://danjohnsonnj.github.io/covid-19-tracker/historic

css-scroll-animations

Recreate JS based scroll animations using the new CSS APIs, plus some additional leading edge CSS features.

cube-gallery-custom-elements

I wanted to play with custom elements, so I thought I might as well play with CSS custom properties (variables), the Shadow DOM, and some 3D transforms. All in vanilla ES2015+, so Chrome-only at the time of the first publishing.

cubic-bezier-exploration

In order to more deeply understand how cubic bezier curves work, I built a simple UI to play with the points that make the curve. Of course, Chrome's Dev Tools curve tool is far superior, but this is hand crafted by an artisan, so...

deefdiffarray

eased-smooth-scroll

Ensure smooth scrolling for scrollTo, scrollBy and scrollIntoView. Uses native browser API if available.

getclosestnumber

homebridge-server

Server plugin for homebridge

image-reveal-poly-clip

Experimenting with creating a dynamic clip path to reveal an image in "strips". Also initially at a pen here: https://codepen.io/danjnj/pen/BMBqPM

interpolate

js-easing-functions

Javascript easing functions based upon jQuery's easing functions, using Robert Penner's easing equations.

media-source-tutorial

Media Source Extensions Tutorial

parcel-base

parcel-react-demo

sample-colors-from-image-upload

Upload an image and it will be analyzed to determine average colors based on the squared number of specified samples and the radius around each sample. This will draw a grid of those averaged colors, as well as a radial gradient version.

scriptable-app-scripts

A collection of Scripts written for the iOS Scriptable App (https://apps.apple.com/us/app/scriptable/id1405459188, by Simon B. Støvring)

scroll-velocity

skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

srcset-test

A simple example to test the use of the image element's "srcset" attribute

todws

touch-manager

translate-blur

Testing scenarios for blurry text as a result of CSS translates for horizontally and/or vertically centering text.