Mobile menu slider prototype in HTML, CSS and JavaScript.

Dynamic.css is a bunch of awesome, cross-browser CSS animations to use in any project. It's perfect to animate incoming and leaving web page elements, but it also could be useful for sliders, :hover handlers and all kind of general use.

Pure CSS Toggle slider/checkbox with SVG tick and cross.

Lots people use JS for the text changes but you don't need to.

A range-click slider with a sliding dot indicator, labels, validity-conditional styling, and no JS. Works 100% on JS-restricted sites.

3D HTML5 range price slider.

Live change the value of the range input using JavaScript's "input" addEventListener.

A 100% pure CSS image slider with previous/next buttons and image transitions.

No checkbox at all. But classic href='#..' plus :target combo.

Parallax is like a tarpaulin: if you don't nail down all the corners, it just doesn't work right. With vertical scrolling parallax effects a dime a dozen, I was shocked at how hard it was to find a good horizontal parallax effect that wasn't loaded with jquery or other miscellaneous service calls or superheavy CSS like Bootstrap carousel. Why, I thought, is it so hard to find an explanation of horizontal parallax? It can't really need all this extra scripting to work! So... I dug through websites and codepens plenty, breaking them to try and rewrite them and understanding how all the parts worked.

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.

Cool animates slider with JS.

This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.

A simple Flexbox image slider/carousel made with vanilla JavaScript.

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

Pure HTML/CSS slider with circular SVG progress bar.

A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.