e1blue

Animated SVG Avatar

Created a login form with an SVG avatar that responds to the input in the email field. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.

Email validation is very simple and crude just for the purposes of getting this prototype working.

A Pen by Darin S on CodePen.

License.

3D step counter card 🚶

CSS only 3D bar chart showing weekly step counts. Works best in Chrome.

A Pen by Steve Gardner on CodePen.

License.

Jack in a Box Factory

These Jack in a boxes are all made, tested and then discarded straight away. Not sure how this factory makes any money.

Made with GSAP and Three.js. Everything except the face texture was created in code.

A Pen by Steve Gardner on CodePen.

License.

Fetch a Movie Card

Vue.js version: https://codepen.io/hexagoncircle/pen/gereWW

Fetches movie data with OMDb API and places it inside a responsive card layout. This project was created for the movie night #CodePenChallenge (Dead Poets Society)

A Pen by Ryan Mulligan on CodePen.

License.

	var start_pos = 0;
	$(window).scroll(function(e){
	var current_pos = $(this).scrollTop();
	if (current_pos > start_pos) {
	console.log('down');
	} else {
	console.log('up');
	}
	start_pos = current_pos;
	});

	<meta name="viewport" content="width=device-width,user-scalable=no">

	<div id="container">
	<div id="game"></div>
	<div id="score">0</div>
	<div id="instructions">Click (or press the spacebar) to place the block</div>
	<div class="game-over">
	<h2>Game Over</h2>
	<p>You did great, you're the best.</p>
	<p>Click or spacebar to start again</p>

	<div class="no-props">
	<p>Your browser doesn't support CSS Custom Properties. 😭</p>
	</div>

	<div id="app" :style="{'--skin-shade': lightness, '--hair-color': picked.currentColor}">
	<main>
	<person :currenthairdo="picked.currentStyle" ref="person"></person>
	<skintone :shade="picked.skinShade" @changeshade="updateShade($event)"></skintone>
	<hair-styles :selected="picked.currentStyle"></hair-styles>
	<hair-color :color="picked.currentColor" @changecolor="updateColor($event)"></hair-color>

	.brand
	%a{:href => 'https://www.jamiecoulter.co.uk',:target => '_blank'}
	%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/logo.png'}
	.login
	.login_title
	%span Login to your account
	.login_fields
	.login_fields__user
	.icon
	%img{:src => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/user_icon_copy.png'}

	%h1.logo
	Solar explorer
	%span in only CSS
	%input.planet9{:type => 'radio', :id => 'pluto', :name => 'planet'}
	%label.pluto.menu{:for => 'pluto'}
	.preview
	.info
	%h2
	.pip
	Pluto