Dan's public fiddles
-
-
-
Set Equal Heights
No-Library (pure JS), HTML, CSS, JavaScript
-
20gusmfb
No-Library (pure JS), HTML, CSS, JavaScript
-
Absolute Positioning
Basic demo of how to position elements.
-
Text Hover Effect
Basic text hover effects, light a highlighter.
-
Scroll Magic layer with offset and delay
Using scroll magic, pause a layer until a future layer bumps it.
-
gydj2ft8
No-Library (pure JS), HTML, CSS, JavaScript
-
Clipping Path - SVG Inline
No-Library (pure JS), HTML, CSS, JavaScript
-
lightSlider
lightSlider Demo
-
Calculating Remaining Space in a Multi-column Responsive Grid
When a grid of items is responsive, inevitably some of your breakpoints have leftover space. This method uses modulus to determine if the number of items is divisible by the number of columns, and if not, uses the remainder to determine how big a filler item should be.
-
Fade in each image as it loads
No-Library (pure JS), HTML, CSS, JavaScript
-
Hide header on scroll down, show on scroll up
jQuery 3.2.1, HTML, CSS, JavaScript
-
Box-Sizing : Border-Box
Why border-box is awesome.
-
Vertical Centering - Script Method
Use a function to vertically center and div.
-
Vertical Centering - Display-Inline Method
You can also use this method.
-
Vertical Centering - Table-Cell Method
Table cells support vertical centering, so we can make divs behave like table cells by setting display properties.
-
Centered Content with Max Width
Content with a max width, that is also centered.