Pens from Gary https://codepen.io/wingsfan70/ en nospam@codepen.io Copyright 2024 2021-01-27T03:02:08-07:00 A Pen by Gary https://codepen.io/wingsfan70/pen/GRREayP https://codepen.io/wingsfan70/pen/GRREayP Gary

See the Code - See it Full Page - See Details

]]>
A Pen by Gary 2021-01-27T03:02:08-07:00
A Pen by Gary https://codepen.io/wingsfan70/pen/WNNpZyp https://codepen.io/wingsfan70/pen/WNNpZyp Gary

See the Code - See it Full Page - See Details

]]>
A Pen by Gary 2019-10-29T09:31:20-07:00
Camping Site Temporary Splash Screen https://codepen.io/wingsfan70/pen/ZgLzEV https://codepen.io/wingsfan70/pen/ZgLzEV Gary

See the Code - See it Full Page - See Details

Created as a placeholder for a camping website that is currently under development. The website is www.ourcampingstory.com

]]>
Camping Site Temporary Splash Screen 2019-07-29T00:19:07-07:00
A Pen by Gary https://codepen.io/wingsfan70/pen/xoMmYP https://codepen.io/wingsfan70/pen/xoMmYP Gary

See the Code - See it Full Page - See Details

]]>
A Pen by Gary 2019-07-11T01:44:00-07:00
Simple Click Show / Hide https://codepen.io/wingsfan70/pen/wYLKGm https://codepen.io/wingsfan70/pen/wYLKGm Gary

See the Code - See it Full Page - See Details

]]>
Simple Click Show / Hide 2018-10-30T23:35:07-07:00
Text Swapping https://codepen.io/wingsfan70/pen/xyowVG https://codepen.io/wingsfan70/pen/xyowVG Gary

See the Code - See it Full Page - See Details

Five different ways.

]]>
Text Swapping 2018-10-30T23:58:13-07:00
How to make button disappear onclick and show another button on hide of the active button? https://codepen.io/wingsfan70/pen/VEJveK https://codepen.io/wingsfan70/pen/VEJveK Gary

See the Code - See it Full Page - See Details

http://blog.thelittletechie.com/2014/06/how-to-make-button-disappear-onclick.html

]]>
How to make button disappear onclick and show another button on hide of the active button? 2018-10-30T23:30:09-07:00
CSS-Only Full Page Slider https://codepen.io/wingsfan70/pen/QZGyYx https://codepen.io/wingsfan70/pen/QZGyYx Gary

See the Code - See it Full Page - See Details

Tried to make it as simple yet as awesome as possible. I think it does pretty well at meeting those requirements If you only use one direction it is in less than 40 lines of CSS!

]]>
CSS-Only Full Page Slider 2018-10-07T23:01:13-07:00
Original Slider https://codepen.io/wingsfan70/pen/MPjGyX https://codepen.io/wingsfan70/pen/MPjGyX Gary

See the Code - See it Full Page - See Details

]]>
Original Slider 2018-10-07T18:20:14-07:00
✅ UX Animation Principles: Duration | @keyframers 1.22.1 https://codepen.io/wingsfan70/pen/XxdvKv https://codepen.io/wingsfan70/pen/XxdvKv Gary

See the Code - See it Full Page - See Details

David Khourshid and Stephen Shaw bring examples from an outstanding article on UX animation to life, showcasing good and bad approaches to state animations. This week, they cover the importance of staggering & duration. * ⏰ Streamed live on September 24, 2018 at https://twitch.tv/keyframers * 💡Inspiration: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 * 📺 Video: https://youtu.be/WLYaEohJgxE * 💻 Stagger Code Example: https://cdpn.io/pen/GXaaNw/ * 💻 Duration Code Example: https://cdpn.io/pen/gdJJZV/ Additional Resources: * Flipping https://github.com/davidkpiano/flipping Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations! * Like & subscribe on YouTube at https://youtube.com/keyframers * Follow & tweet us at https://twitter.com/keyframers. * Join the live streams & subscribe on Twitch http://twitch.tv/keyframers * Support us on Patreon at https://patreon.com/keyframers Topics covered: * CSS Animation * Staggering * Duration * State machines * CSS Grid * Layering

]]>
✅ UX Animation Principles: Duration | @keyframers 1.22.1 2018-10-04T16:06:26-07:00