Five Features On CodePen

Everyone in the pigeon coop has been busy working on projects and playing each other in ping pong, but that has not stopped us from sharing some code snippets on CodePen. There have been

Everyone in the pigeon coop has been busy working on projects and playing each other in ping pong, but that has not stopped us from sharing some code snippets on CodePen.

There have been a few of them that stood out and have been picked to be featured on the homepage.

The first one is a tribute to the couple of sneakerheads we have in the office for one of the biggest sneaker releases of the year. I used box-shadow, transition, and animation to make it. The box-shadow is on the button where the horizontal and vertical shadow transitions on hover. The animation also starts on the button hover that transforms the image with a 2D translation and rotation simultaneously.

You might have stumbled across this one on Formidable when Steve posted about it snagging Website of the Day. There is a Sass mixin for increasing the z-index of each section on the page and there is a JavaScript function to offset each of those sections that has the js-clippy class in it. The position of each js-clippy is fixed to the page at those offsets and gives it that scrolling effect.

This animation is taking the circle from one y-coordinate to another while changing the opacity to fade in and fade out again. I added Parallax to the SVG, so it moves around depending on the user’s interaction with the page.

Click rerun in the CodePen or visit DNA Seattle to see this one in action. The glow effect is done by splitting every letter into a span. Each span has a delay on it where the opacity and text-shadow will change giving you the complete animation.

This is using background-clip, but cannot be used in any website yet because of cross-browser compatibility. It works on Google Chrome, Safari, and that’s about it. Here the text is transparent, the background is a gradient, and the background is clipped to only show where the text is. I added an animation that is slowly filtering the color hue, so you end up with a color changing header.