Jon's public fiddles
-
Lottie on Scroll
No-Library (pure JS), HTML, CSS, JavaScript
-
Lottie on Scroll
No-Library (pure JS), HTML, CSS, JavaScript
-
cq8ajftx
No-Library (pure JS), HTML, CSS, JavaScript
-
2ef3zab4
No-Library (pure JS), HTML, CSS, JavaScript
-
Progress bar of today between dates
Set start date and end date, and the JS and CSS does the rest.
-
Progress bar of today between dates (alternate version)
Set start date and end date, and the JS and CSS does the rest.
-
Maintain aspect ratio of div but fill screen width and height in CSS
Resize vertically and horizontally and you'll see that the element will always fill the maximum viewport size without breaking the ratio and without scrollbars
-
f27j8Lkt
No-Library (pure JS), HTML, CSS, JavaScript
-
Change background color class when in viewport
Based on element position within viewport, change background color via toggle of classes.
-
co0kyrpx
jQuery 1.11.0, HTML, CSS, JavaScript
-
vz39x0ey
No-Library (pure JS), HTML, CSS, JavaScript
-
Change background color class when in viewport
Based on element position within viewport, change background color via toggle of classes.
-
Play video when in viewport
Autoplay videos when they enter viewport, and hide them when the exit viewport.
-
Fade In Text
Use JS animation to fade in text from spans
-
Custom Ordered List
Custom ordered lists using counter-increment and Flexbox.
-
Animate SVG Blob
jQuery (edge), HTML, CSS, JavaScript
-
Javascript Count Up Timer
Count up using Javscript from 0 seconds, including minutes, hours, and days.
-
Animate Skew of Image
Continuously animate the skewing of an image without distorting it.
-
FS Lime Spinner
Background image spinner
-
Add class to parent based on text of child
Add a class to a parent wrapper, depending on if one of its child elements has certain text within it.