Pens from Tyler Peterson https://codepen.io/Gingernaut/ en nospam@codepen.io Copyright 2024 2019-09-14T03:32:15-07:00 Credit Card Payment Form https://codepen.io/Gingernaut/pen/bGbjbVv https://codepen.io/Gingernaut/pen/bGbjbVv Tyler Peterson

See the Code - See it Full Page - See Details

Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form.

]]>
Credit Card Payment Form 2019-09-14T03:32:15-07:00
Particle Test https://codepen.io/Gingernaut/pen/MoMwLB https://codepen.io/Gingernaut/pen/MoMwLB Tyler Peterson

See the Code - See it Full Page - See Details

]]>
Particle Test 2017-07-19T01:22:27-07:00
MacBook Pro https://codepen.io/Gingernaut/pen/XgaPyK https://codepen.io/Gingernaut/pen/XgaPyK Tyler Peterson

See the Code - See it Full Page - See Details

MacBook Pro made from CSS

]]>
MacBook Pro 2017-06-23T22:43:45-07:00
CSS transform animation stress test https://codepen.io/Gingernaut/pen/owZJGP https://codepen.io/Gingernaut/pen/owZJGP Tyler Peterson

See the Code - See it Full Page - See Details

]]>
CSS transform animation stress test 2017-06-20T03:48:25-07:00
Animated SVG Path https://codepen.io/Gingernaut/pen/KqWwEv https://codepen.io/Gingernaut/pen/KqWwEv Tyler Peterson

See the Code - See it Full Page - See Details

Experimental Javascript / SVG Animation using Snap.svg with easing [Animated SVG Path with Jquery Callback][1] Resources: * Snap.svg Documentation - http://snapsvg.io/docs/ * Snap.svg Google Discussion - http://goo.gl/K0t9Gq * Raymond Camden's "Help with Snap.svg" - http://goo.gl/ [1]:http://codepen.io/mattsince87/pen/vdEbg

]]>
Animated SVG Path 2017-06-19T04:56:58-07:00
Full Page Parallax Scroll Effect https://codepen.io/Gingernaut/pen/VjEwbg https://codepen.io/Gingernaut/pen/VjEwbg Tyler Peterson

See the Code - See it Full Page - See Details

A lightweight full page parallax scroll effect.

]]>
Full Page Parallax Scroll Effect 2016-08-04T02:47:58-07:00
Flexbox Sticky Footer https://codepen.io/Gingernaut/pen/EywdwK https://codepen.io/Gingernaut/pen/EywdwK Tyler Peterson

See the Code - See it Full Page - See Details

<3

]]>
Flexbox Sticky Footer 2016-07-11T03:07:50-07:00
pen#PwLXXP https://codepen.io/Gingernaut/pen/LGJzOX https://codepen.io/Gingernaut/pen/LGJzOX Tyler Peterson

See the Code - See it Full Page - See Details

Hi, I'm just your average pen. Kinda new here, just lookin' for frenz. UPDATE: My cousin [pen#JoVrdw](http://codepen.io/jakealbaugh/full/JoVrdw) joined CodePen! Forked from [Jake Albaugh](http://codepen.io/jakealbaugh/)'s Pen [pen#PwLXXP](http://codepen.io/jakealbaugh/pen/PwLXXP/).

]]>
pen#PwLXXP 2016-02-04T05:25:27-07:00
Animated SVG Hover Buttons https://codepen.io/Gingernaut/pen/qOgMLy https://codepen.io/Gingernaut/pen/qOgMLy Tyler Peterson

See the Code - See it Full Page - See Details

A lot of people liked the buttons I made for my website so I threw together a CodePen and added comments. This is pure HTML/CSS implementation of some SVG buttons with a cool hover effect. The colors and shapes can be customized to fit your needs.

]]>
Animated SVG Hover Buttons 2019-08-21T02:48:38-07:00