Pens from Jonathan Barck https://codepen.io/jbarck/ en nospam@codepen.io Copyright 2024 2022-10-19T18:08:09-07:00 A Pen by Jonathan Barck https://codepen.io/jbarck/pen/VwxJvrL https://codepen.io/jbarck/pen/VwxJvrL Jonathan Barck

See the Code - See it Full Page - See Details

]]>
A Pen by Jonathan Barck 2022-10-19T18:08:09-07:00
Personal Details https://codepen.io/jbarck/pen/abLEZvL https://codepen.io/jbarck/pen/abLEZvL Jonathan Barck

See the Code - See it Full Page - See Details

]]>
Personal Details 2021-12-28T09:00:49-07:00
Swiper - Timeline Progressbar https://codepen.io/jbarck/pen/yLoPGzg https://codepen.io/jbarck/pen/yLoPGzg Jonathan Barck

See the Code - See it Full Page - See Details

Swiper Timeline Progressbar, Responsive slider timeline, slider timeline, timeline progress, Slider Timeline Progressbar, swiper slider timeline, slider timeline with progressbar, swiper timeline with progressbar, animated timeline progressbar, animated progressbar, swiper progressbar

]]>
Swiper - Timeline Progressbar 2021-11-02T17:14:47-07:00
suspend https://codepen.io/jbarck/pen/yLYOKWv https://codepen.io/jbarck/pen/yLYOKWv Jonathan Barck

See the Code - See it Full Page - See Details

]]>
suspend 2020-04-17T08:57:58-07:00
CSS Roulette Wheel https://codepen.io/jbarck/pen/qBObgYx https://codepen.io/jbarck/pen/qBObgYx Jonathan Barck

See the Code - See it Full Page - See Details

Building a 'semantic' roulette wheel out of pure CSS. The HTML underneath is a series of radio buttons where one is selected at random after pressing the spin button. The visual treatment uses CSS to spin the ball a number of times around the wheel before coming to rest on a number. The number is played back in the center of the wheel and the historical result data is stored underneath the wheel. To begin a game, you can click/tap the "New Game" button, or swipe the face of the wheel left or right if on mobile.

]]>
CSS Roulette Wheel 2020-04-16T08:52:34-07:00
Button https://codepen.io/jbarck/pen/zYGRWKb https://codepen.io/jbarck/pen/zYGRWKb Jonathan Barck

See the Code - See it Full Page - See Details

]]>
Button 2020-03-11T19:13:51-07:00
Rentle mail https://codepen.io/jbarck/pen/zYxeJrM https://codepen.io/jbarck/pen/zYxeJrM Jonathan Barck

See the Code - See it Full Page - See Details

]]>
Rentle mail 2020-01-23T15:44:34-07:00
Lottie test https://codepen.io/jbarck/pen/xxbXbop https://codepen.io/jbarck/pen/xxbXbop Jonathan Barck

See the Code - See it Full Page - See Details

]]>
Lottie test 2020-01-08T15:39:20-07:00
Calculator https://codepen.io/jbarck/pen/ZEYWYLY https://codepen.io/jbarck/pen/ZEYWYLY Jonathan Barck

See the Code - See it Full Page - See Details

]]>
Calculator 2019-12-10T13:42:26-07:00
Phone-Styled IFrame https://codepen.io/jbarck/pen/XWJrjNo https://codepen.io/jbarck/pen/XWJrjNo Jonathan Barck

See the Code - See it Full Page - See Details

Pretty much only with CSS transforms and box-shadow, JS is only used for the controls.

]]>
Phone-Styled IFrame 2019-11-29T18:16:07-07:00